Question

The problem is that i can’t load google maps using the following code. Map canvas is blank and Chrome is throwing

Uncaught TypeError: undefined is not a function

Here’s the code:

var MYAPP = MYAPP || {};    
MYAPP.Map = function() {
        var _map = null;
        return{
            init: function() {
                _map = document.getElementById('map_canvas');

                var src = 'http://maps.googleapis.com/maps/api/js?sensor=false&' + 
                'callback=MYAPP.Map.googleMapsCallback';

                $.getScript(src);
            },
            googleMapsCallback: function() {
                var options = {
                    zoom: 15,
                    center: new google.maps.Latlng(13.353988,33.815918),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var gMap = new google.maps.Map(_map, options);
                this.displayMarkers();
            },
            displayMarkers: function() {
                //markers code
            }
        };
    }();

I’m loading gMaps asynchronously using $.getScript with a specified callback function ‘googleMapsCallback’). Callback function is firing but the maps won’t load. The script is breaking at this line:

new google.maps.Latlng(13.353988,33.815918),

Anyone have idea why this happens and how to solve it?

Answer 1

You’re mispelling the function:

Latlng instead of LatLng (second ‘L’ uppercase!)