CODEWITHSUNDEEP
javascriptjsonapigoogle-maps
rctneil
rctneil

Reputation: 7220

Google Map Markers not appearing

I have my map and code to loop through a json array to add marks to a map.

The map loads and I get console output stating that each park has been added to the map but no marker appears on it.

Any ideas?

  function initialize() {

    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 2
    };

    var map = new google.maps.Map($('#maptest')[0], mapOptions);

    $.getJSON("/parks.json", function(parks) {
      $.each(parks, function(key, park) {
        if (park.lat && park.lng) {
          var latlng = park.lat + ',' + park.lng;
          var location = new google.maps.LatLng(latlng);
          var marker = new google.maps.Marker({
            position: location,
            map: map
          });
          console.log('Added map marker for ' + park.name + ' at ' + park.lat + ', ' + park.lng);
        }
      });
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 0

Views: 80

Answers (1)

Suvi Vignarajah
Suvi Vignarajah

Reputation: 5788

The google.maps.LatLng constructor expects you to pass in the latitude and longitude as number type. Currently, it's being passed in as a string (var latlng = park.lat + ',' + park.lng;). Remove that line and just pass in the park.lat and park.lng values:

var location = new google.maps.LatLng(park.lat, park.lng);

For more reference click here.

Upvotes: 1

Related Questions