How to add markers to Google Maps after the map has already been loaded?

Question

I'm working on a simple phoneGap app - I'm pacing around my house to collect coordinates:

var positions = [
  {lat:123.12313123, lng:123.123345131},
  {lat:123.12313123, lng:123.123345131}
]

I'm checking out the documentation here which works flawlessly. In that example, the script defer async from what I understand fires when initMap() is created. initMap() has one marker. This works flawlessly in my app, showing the marker in Straya.

First, I create the map:

var map; // making it global

  function initMap() {
    var myLatLng = {lat: 39.909736, lng: -98.522109}; // center US

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: myLatLng
    });
  }

This draws the map. Now, I'd like to iterate through my coordinates like so:

// Remember, the map has already loaded at this point
$(positions).each(function(i, item) {
          var marker = new google.maps.Marker({
            position: item,
            map: map,
            title: 'Route item ' + i
          });
        })

This doesn't work. I can't be running initMap() inside of a loop, and it doesn't work anyway. I can't run initMap() with a pre-set number of coordinates because I don't know what they are yet until I'm done. What am I doing wrong here?

Answer 1

This is a scope problem. When you initialize the map, you are saying var map , which makes a local variable called map inside the initMap function. this means that the global map variable is still uninitialized, and when you create your marker it doesn't put it on the map because the map variable that you pass to the marker is undefined. Remove the var keyword, and your new Map will be assigned to the original global map variable outside the function, like so:

var map; // making it global

  function initMap() {
    myLatLng = {lat: 39.909736, lng: -98.522109}; // center US

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: myLatLng
    });
  }

Also as an unrelated note, I think you misunderstand what async defer does. When you load a script with the async and defer attributes, you are telling the browser to wait until the whole page has been loaded, and then go load the script. In the case of google maps, in the actual url of the script, you also pass the name of a function to call when the script is loaded: &callback=initMap .

So the browser loads the entire page, then fetches the google maps script, then executes the google maps script which gets the google maps code all ready for you to use, and then that code calls initMap .

Answer 2

I might see the problem - you're declaring map twice, once outside the initMap function and once inside. This means the global map variable will stay be undefined . Remove the var from in front of the assignment:

map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: myLatLng
    });

Now you will be assigning the map instance to the map variable outside your function scope instead of creating a new map variable that collides with your global.

Also, don't forget it's often better to avoid these global variables when possible :)