Ajax Google Maps Gmap not loading for Json Web Service

Question

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>

Answer 1

It seems you need to give a width and height to the canvas for it to show correctly, see below snippet:

 $.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, zoom: 1 }); $.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>' } }); }); } }); 

 #map_canvas { height: 300px; width: 600px; background: #6699cc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script src="https://hpneo.github.io/gmaps/gmaps.js"></script> <div id="map_canvas"></div>