Question

I am trying to get some json markers to display on my map.

The map is actually appearing but no pointers are being displayed and the position of the map is way off.

Here is the js code:

<script>

    $('#map_canvas').gmap().bind('init', function() { 
    // This URL won't work on your localhost, so you need to change it
    // see http://en.wikipedia.org/wiki/Same_origin_policy
    $.getJSON( 'locations.json', function(data) { 
        $.each( data.markers, function(i, marker) {
            $('#map_canvas').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
                'bounds': true 
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', {'content': marker.content }, this);
            });
        });
    });
});
</script>

And here is the contents of the json file:

{"locations":[{"id":"14","location":"(50.8765125,
 -1.1504182944499557)"}]}

Is there anything wrong with the code?

Answer 1

From the structure of your json file I’d say your’re trying to access undefined properties of each item in data.markers. locations is an array of objects with two properties: id is a String and locations is an array of length 2. So why this code?

marker.latitude
marker.longitude
marker.content

Maybe you should try

marker.location[0]
marker.location[1]

First you should confirm your json output:

$.getJSON( 'locations.json', function(data) { 
    console.log(data);
}

And post it in your question…

If it’s ok try like this:

$.each( data.markers, function(i, marker) {
        $('#map_canvas').gmap('addMarker', { 
            'position': new google.maps.LatLng(marker.location[0], marker.location[1]), 
            'bounds': true 
        }).click(function() {
            $('#map_canvas').gmap('openInfoWindow', {'content': marker.id }, this);
        });
    });

… Actually I’m not sure why you use data.marker also and not data.locations