Google Map Markers not appearing

Question

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);

Answer 1

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.

• rctneil: Thanks, Why I didn't try that I have no idea! Works perfectly now!