Can't initiate the google.maps.Geocoder

Question

I don\'t understand why but i\'m getting this error when I try to initialize the google.maps.Geocoder.

Here is the error:

Uncaught TypeError: undefi         


        

Answer 1

Since you appear to be using something like jQuery, you may have the same issue I had where jQuery considers the script loading complete before Google Maps is actually completely "assembled". Using jQuery's $.getScript (equivalent to $.ajax with dataType: "script" used here), it appears parts of the maps API are not yet available in the success/done callbacks.

$(function() {
    var doSomethingMapRelatedInvolvingJQuery = function(geocoder, map) { ... };

    $.ajax({
        url: "https://maps.googleapis.com/maps/api/js?v=3&sensor=false",
        dataType: "script"
    }).done(function() {
        var geocoder = new google.maps.Geocoder(), // ERROR!
            activityMap = new google.maps.Map($("#map_canvas")[0], {
                center: new google.maps.LatLng(0, 0),
                zoom: 0,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            });

        doSomethingMapRelatedInvolvingJQuery(geocoder, map);
    });
});

For some reason, even though jQuery is saying the script has been executed already by executing the callbacks, parts of the Google Maps API are not yet available (possibly additional asynchronous stuff by Google after the first file executes).

The only solution I could find was to declare a global variable name to hold a function that Google Maps would be responsible for calling when it was completely ready. You can give it that control by adding the callback={yourfunctionname} querystring parameter to the URL (e.g., https://maps.googleapis.com/maps/api/js?v=3&callback=googleMapsCallback&sensor=false). It's not the prettiest solution, but it works.

var googleMapsCallback;
$(function() {
    var doSomethingMapRelatedInvolvingJQuery= function(geocoder, map) { ... };

    googleMapsCallback = function() {
        var geocoder = new google.maps.Geocoder(), // Works when google makes the call.
            activityMap = new google.maps.Map($("#map_canvas")[0], {
                center: new google.maps.LatLng(0, 0),
                zoom: 0,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            });

        doSomethingMapRelatedInvolvingJQuery(geocoder, map);
    };
    $.ajax({
        url: "https://maps.googleapis.com/maps/api/js?v=3&callback=googleMapsCallback&sensor=false",
        dataType: "script"
    });
});

EDIT:

I put together a proof-of-concept jsFiddle that pulls all that ugliness into a jQuery-extended method that allows for Deferred-chaining. Here's a quick example of how it can be used:

$.loadGoogleMaps().done(function () {
    var geocoder = new google.maps.Geocoder();
    // ... do stuff with your geocoder here ...
});

Answer 2

Looks to me like Geocoder isn't defined, hence the error that Undefined is not a function. However, google.maps is defined or you would have gotten an error that it wasn't defined before Geocoder was resolved.

You'll need to check how you're loading the Map API because it doesn't seem to have been loaded correctly.

Answer 3

If you use the Google AJAX API Loader to load the Google Maps API you must explicitly specify whether your app uses a sensor, otherwise you won't get the Geocoder object.

google.load('maps','3.6',{other_params:'sensor=false'});

Answer 4

I solved my problem, it was because of a bad href url in the script tag for the Maps library:

<script src="http://maps.google.com/maps/api/js?v=3.6&sensor=false&key=XXXX" ....