CODEWITHSUNDEEP
javascriptjquerygoogle-mapsmobilegoogle-maps-api-3
FakeBenJay
FakeBenJay

Reputation: 41

Google Maps JS API won't load markers on mobile (works perfectly on desktop)

I have a simple webapp that plots wifi hotspots in NYC (based on NYC OpenData JSON and geolocation) onto Google Maps. It works perfectly on https desktop, but the hotspot markers don't render on mobile (a blank map with a solitary marker for your location, with onclick infowindow renders, but the hotspot markers/windows aren't there.) Any ideas? Is there a jQuery or Google API issue that might address this? Any help is appreciated!

App: https://wifi-freerider.herokuapp.com Source: http://github.com/fakebenjay/nyc-wifi-2

Upvotes: 0

Views: 283

Answers (2)

FakeBenJay
FakeBenJay

Reputation: 41

The problem was Heroku related. The images from my markers were being referenced from insecure locations. Changing 'http' to 'https' at the beginning of those URLs in the JavaScript solved the issue.

I found this by using Safari's mobile console, which I accessed on my computer by hooking my phone up to my computer (guys, I'm way too excited about this right now).

Here's what the error looked like.

Safari mobile console screenshot

Upvotes: 1

Geeyung Li
Geeyung Li

Reputation: 1

can you use this to check to see whether it's a browser compatibility issue? I've taken this from one of Google's developer

https://developers.google.com/web/fundamentals/native-hardware/user-location/

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS.');
}

Upvotes: 0

Related Questions