Question

In the initialization function of my google map, I need to call a function from another .js file.

Problem: When I tried the following code, I get an error "Uncaught ReferenceError: getPlacesByBounds is not defined" when the listener is triggered. How can I solve this problem? I do not want to move that function over to the initialize() function as it is too long.

JS Code

var map;

function initialize() {
    var center_latlng = new google.maps.LatLng(42.354183, -71.065063);

    var options = {
        zoom: 15,
        minZoom: 11,
        maxZoom: 19,
        center: center_latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    //instantiate map object
    map = new google.maps.Map(document.getElementById("map_canvas"), options);

    //attach listener to the map object.
    google.maps.event.addListener(map, 'idle', function() {
        getPlacesByBounds ();
    });

Additional Info: The function getPlacesByBounds() is within jQuery’s $(function() {...});

Answer 1

You need to ensure that the code declaring getPlacesByBounds has run before you try to use it. And that getPlacesByBounds is visible.

As an aside you should consider creating a namespace for your functions (such as getPlacesByBounds) to avoid polluting the global scope.