简体   繁体   中英

Pass data to callback when asynchronously loading google maps V3

I am loading the google maps API asynchronously which allows you to define a callback to execute when the API loads. Is there any way I can pass arguments to the callback?

EDIT:

Here's the code I'm working with. I have a global object called master storing the following functions.

/**
 * Load the Google Maps API
 * https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
 */
loadGoogleMaps: function(){
    var googleMaps = document.createElement("script");
    googleMaps.type = "text/javascript";
    googleMaps.src = "http://maps.googleapis.com/maps/api/js?key=[MYAPIKEY]&sensor=false&callback=master.mapInit";
    document.body.appendChild(googleMaps);
}

I want to be able to pass an array of locations into mapInit so I can add markers to the map when it gets initialized. I'd also like to be able to globally access the reference to the map so I can modify the map after its creation.

/**
 * Initialize the map
 */
mapInit: function(){

    // Default map options
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng( 40, -95 ),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    // Create map
    var map = new google.maps.Map( document.getElementById("map"), mapOptions );

}

I ended up working around the need to pass arguments to the callback.

I created an object inside my master object to hold information about a specific map. Each map has its own callback defined. It also holds the reference to the initialized map and any additional map specific data that needs to be referenced by the callback.

/**
 * Map listing
 */
mapList: {
    mainMap: {
        map: "",
        callback: function(){

            for( var i = 0, length = this.locations.length; i < length; i++ ){

                master.placeMapMarker( this.locations[i], this );

            }

        },
        prevInfoWindow: "",
        locations: {}
    }
}

I modified the mapInit function to store the reference to the map and execute the callback in master.mapList.mainMap .

/**
 * Initialize the map
 */
mapInit: function(){


    // Default map options
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng( 40, -95 ),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    // Create map
    var mapName = $("#map").data("name");
    var map = this.mapList[mapName].map = new google.maps.Map( document.getElementById("map"), mapOptions );

    this.mapList[mapName].callback();


}

I stored the map name in a data-name attribute on the placeholder element for the map.

<div id="map" data-name="mainMap"></div>

How about wrapping your function into some dummy function that passes necessary arguments like:

function wrapper()
{
    myCallback(arg1, arg2);
}

and pass wrapper() as a google maps callback

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM