title: Google Maps API (v3) adding/updating markers
body: <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>