Google Maps API API (v3) Add / Update

Question

EDIT: Now it works, but does not load if the user does not allow or use location-based services. See the accepted comment response for a jsfiddle example.

I looked through a few lessons and questions, but I can’t understand what is happening (or doesn’t happen in this case). I load my map when the user clicks on the link. This loads a map with the current location of the users in the center and a marker at the location of the user. However, any tokens outside if (navigation.location) do not seem to load. Below is my current code:

 function initialize() { // Check if user support geo-location if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var userLat = position.coords.latitude; var userLong = position.coords.longitude; var mapOptions = { zoom: 8, center: point, mapTypeId: google.maps.MapTypeId.HYBRID } // Initialize the Google Maps API v3 var map = new google.maps.Map(document.getElementById("map"), mapOptions); // Place a marker new google.maps.Marker({ position: point, map: map, title: 'Your GPS Location' }); }); } else { var userLat = 53; var userLong = 0; var mapOptions = { zoom: 8, center: new google.maps.LatLng(userLat, userLong), mapTypeId: google.maps.MapTypeId.HYBRID } // Place a marker new google.maps.Marker({ position: point, map: map, title: 'Default Location' }); // Initialize the Google Maps API v3 var map = new google.maps.Map(document.getElementById("map"), mapOptions); } <? for ($i = 0; $i < sizeof($userLocations); $i++) { ?> var userLatLong = new google.maps.LatLng(<? echo $userLocations[$i]['lat']; ?>, <? echo $userLocations[$i]['long']; ?>); new google.maps.Marker({ position: userLatLong, map: map, title:"<? echo $userLocations[$i]['displayName'] . ', ' . $userLocations[$i]['usertype']; ?>" }); <? } ?> } function loadMapScript() { if (typeof(loaded) == "undefined") { $("#showMap").css("display", "none"); $("#showMapLink").removeAttr("href"); $("#map").css("height", "600px"); $("#map").css("width", "600px"); var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=true&callback=initialize"; document.body.appendChild(script); loaded = true; } else { alert("Map already loaded!"); } } 

loadMapScript () is called when the user clicks the link. The PHP loop for the loop goes through a pre-created array with all the information.
I assume that I do not quite understand this, as if I set:

 var userLatLong = new google.maps.LatLng(53, 0); new google.maps.Marker({ position: userLatLong, map: map, title:"Title" }); 

in the console (Google Chrome), I get an error message:

 Error: Invalid value for property <map>: [object HTMLDivElement] 

However, I am not getting any errors. Any help is appreciated! :)

Answer 1

navigator.geolocation.getCurrentPosition() is asynchronous.

Change your code as follows:

 var mapOptions = { zoom: 8, mapTypeId: google.maps.MapTypeId.HYBRID } function initialize() { // Check if user support geo-location if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { makeMap(position.coords.latitude, position.coords.longitude, 'Your GPS Location'); }); } else { makeMap(53, 0, 'DefaultLocation'); } } function makeMap(lat, lng, text) { var point = new google.maps.LatLng(lat, lng); mapOptions.center = point; map = new google.maps.Map(document.getElementById("map"), mapOptions); new google.maps.Marker({ position: point, map: map, title: text }); <?php for ($i = 0; $i < sizeof($userLocations); $i++): ?> var userLatLong = new google.maps.LatLng(<? echo $userLocations[$i]['lat']; ?>, <? echo $userLocations[$i]['long']; ?>); new google.maps.Marker({ position: userLatLong, map: map, title:"<? echo $userLocations[$i]['displayName'] . ', ' . $userLocations[$i]['usertype']; ?>" }); <?php endforeach ?> } 

Also consider loading $ userLocations into a JavaScript variable as follows:

 var userLocations = <?php print json_encode($userLocations) ?>; 

Then do the for loop in JavaScript, instead of mixing languages.

Answer 2

You tried:

 var map = null; function initialize() { ... } 

and then changing the code inside:

 map = new google.maps.Map( ... ); //make this the first line if (navigator.geolocation) { // Change the code from: var map ... // to: map ... 

You simply reference the map directly (without var ) everywhere, so this should work.

Answer 3

Edit:

  var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

To:

 map = new google.maps.Map(document.getElementById("map"), mapOptions); 

Because of var your map variable is bound to the initialize() scope. Removing this parameter will be set as a global map variable (or window.map ), which will make it accessible outside the initialize() function.

What happens, you have the HTML element <div id="map"> . In many browsers, global variables are created from the identifiers of the html elements, so map is equal to document.getElementById('map') .

---

Edit: Actually, this only explains your problem on the Chrome console. You need to install map before trying to attach markers to it, as in if (navigator.geolocation) {} . This also explains why none of the user's location markers are placed. The code to place them runs before initialize() . Put this code in either initialize or its own function, and call this function from initialize .

Answer 4

It looks like you are creating a marker, but you are not doing anything with it. Try changing your new marker to look like this:

 var marker = new google.maps.Marker({ position: point, // this won't actually work - point is out of scope title: 'Your GPS Location' }); marker.setMap(map); 

Edit: make sure the dot is inside the map!

 var bounds = new google.maps.LatLngBounds(); bounds.extend(point); map.fitBounds(bounds);