Ajax Google Maps Gmap not loading for Json Web Service

I’m trying to load a map using Gmaps and Jquery Ajax via JSON, but I can’t get the map to show on my page, I know I’m getting the correct coordinates because I test in console.

I don’t know why is not showing.

Here’s my code

$.ajax({
    url: 'http://api.geonames.org/earthquakesJSON?formatted=true&north=44.1&south=-9.9&east=-22.4&west=55.2&username=warriorshadow&style=full',
    username: "jrodrguez",
    password: "7kZ7MHZ2vj",
    dataType: 'JSON',
    success: function (data) {

        var map = new GMaps({
            el: '#map_canvas',
            lat: 0,
            lng: 0,
        });

        $.each(data.earthquakes, function (key, val) {
            var lat = val.lat; 
            var long = val.lng;
            map.addMarker({
                lat: lat,
                lng: long,

                infoWindow: {
                    content: '<p>La magnitud fue '+val.magnitude+'</p>'}
            });
        });
    }
});

and here’s my HTML (Just the div)

<div id="map_canvas"></div>


Source: json

Leave a Reply