Databases
StackOverflow2013
Postsdbo
POGoogle Maps API (v3) adding/updating markers
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps API (v3) adding/updating markers
    text
    copied!<p><strong>EDIT: It now works, but does not load if the user does not allow or have location-based services. See accepted answer comment for jsfiddle example.</strong></p> <p>I've looked through a few tutorials and questions but I can't quiet understand what's happening (or in this case, not happening). I'm loading my map when the user clicks a link. This loads the map with the users current location in the center, and a marker at the users location. However, any markers outside of the <code>if (navigation.location)</code> don't seem to load. Below is my current code:</p> <pre><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); } &lt;? for ($i = 0; $i &lt; sizeof($userLocations); $i++) { ?&gt; var userLatLong = new google.maps.LatLng(&lt;? echo $userLocations[$i]['lat']; ?&gt;, &lt;? echo $userLocations[$i]['long']; ?&gt;); new google.maps.Marker({ position: userLatLong, map: map, title:"&lt;? echo $userLocations[$i]['displayName'] . ', ' . $userLocations[$i]['usertype']; ?&gt;" }); &lt;? } ?&gt; } 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&amp;sensor=true&amp;callback=initialize"; document.body.appendChild(script); loaded = true; } else { alert("Map already loaded!"); } } </code></pre> <p>loadMapScript() is called when the user clicks a link. The php for loop loops through a pre-created array with all the information.<br> I'm guessing I don't fully understand it, as when if I put:</p> <pre><code>var userLatLong = new google.maps.LatLng(53, 0); new google.maps.Marker({ position: userLatLong, map: map, title:"Title" }); </code></pre> <p>into the console (Google Chrome), I get the error:</p> <pre><code>Error: Invalid value for property &lt;map&gt;: [object HTMLDivElement] </code></pre> <p>I don't, however, get any errors otherwise. Any help would be much appreciated! :)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload