Question

I’m having trouble getting my markers to show up using Google Maps API V3.

This is my JavaScript:

function getMap(zoom, center) {
var myOptions = {
    zoom: zoom,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);

var marker = new google.maps.Marker({ position: centerBegin })
$.getJSON('json/markers.json', function (data) {
    $.each(data, function (i, marker) {

        var markerOptions = { map: map, position: new google.maps.LatLng(marker.latitude, marker.longtitude) , title: 'test'};
        var marker = new google.maps.Marker(markerOptions);
        /*var marker = new google.maps.Marker({
            position: new google.maps.LatLng(marker.latitude, marker.longtitude),
            content: i.toString(),
            map: map,
            title: 'test'
        });*/
    });
});

}

Here is my JSON file:

{"markers": [ 
    {"text":"Ondertekenen koopverkoopcontract", "latitude":-12.917239,     "longtitude":-38.48209},
    {"text":"Openen documentair krediet", "latitude":51.218584, "longtitude":4.40413},
    {"text":"Transport van producent naar haven Salvador", "latitude":51.22952, "longtitude":4.411617},
    {"text":"Vertrek naar haven Antwerpen", "latitude":-12.968114, "longtitude":-38.511543},
    {"text":"Aankomst haven Antwerpen + vertrek naar Transibel", "latitude":51.22952, "longtitude":4.411617},
    {"text":"Aankomst Transibel", "latitude":51.094863, "longtitude":4.12973},
    {"text" : "center point", "latitude":28.767659, "longtitude":-31.640625}
]} 

I cannot see any markers on my map. Can someone help me with this?

Answer 1

There are two problems with the sample code you’ve posted.

1. Iterating over data, when you really want to iterate over data['markers']. If you look at your JSON file you’ll see it’s not an array, but an object whose markers element is holding an array of marker info.

2. Over-use of the marker variable, like graphicdivine pointed out.