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:

  • How to set waypoints in the googlemaps url
  • Getting list of overlay shapes currently on a Google Map API V3
  • Extending the bounds on a Google Map slightly
  • how to change color of route in google map api after route is build
  • onChange event for Google Maps APIv3 drawing manager
  • Relevant zoom after search in google maps
  • 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 );
    
    }
    

  • Pass array and/or object data between Polymer elements
  • How to fix Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number?
  • how to draw a route between two markers in google maps
  • The size of my symbol gets too big when i zoom out in google map
  • Animate a route with google map js api v3
  • Google Static Maps URL length limit
  • 2 Solutions collect form web for “Pass data to callback when asynchronously loading google maps V3”

    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