Pass parameters to a url callback function in JavaScript

Question

I have the following piece of code which displays a map when the user clicks on the submit button.

At the moment the function initialize() takes no parameters and the map centers on a fixed latitude and longitude. I would like to be able to have latitude and longitude as parameters so that the map centers on those.

I have the latitude and the longitude already so getting these parameters isn't the problem; my problem is that I don't know how to pass them to the function.

Full code:

<!DOCTYPE html>
<html>
    <head>
      <link rel="stylesheet" type="text/css" href="stylesheet.css">
      <title>Simple Map</title>
      <meta name="viewport" content="initial-scale=1.0">
      <meta charset="utf-8">
    </head>
<body>
    <div id="map">

        <button type="button" onclick="loadScript()">submit</button>

    </div>


    <script>

        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"),
        myOptions);
        }


        function loadScript() {
            var myKey = "myAPIKey";
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?key=" + myKey + "&sensor=false&callback=initialize";
            document.body.appendChild(script);
        }

    </script>

</body>

JavaScript alone:

        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"),
        myOptions);
        }


        function loadScript() {
            var myKey = "myAPIKey";
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?key=" + myKey + "&sensor=false&callback=initialize";
            document.body.appendChild(script);
        }

Possible duplicate of Pass data to callback when asynchronously loading google maps V3 — kerwan
– kerwan, Commented Mar 17, 2016 at 14:20

Sagar V · Accepted Answer · 2017-07-06 13:16:33Z

Just initiate variables before the script. In "loadScript" function update the variables and use them in the "initialize" function. For me, it works.

<script>
    var string = "";   // initialize variables here. You need var lat and var lng 

    function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        console.log(string);  // just checking, if it does work in "initialize" function
        var myOptions = { 
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
    myOptions);
    }


    function loadScript() {
        var myKey = "myAPIKey";
        var script = document.createElement('script');
        script.type = 'text/javascript';
        string = "hey it works";   //////////// here take the coordinates
        script.src = "https://maps.googleapis.com/maps/api/js?&sensor=false&callback=initialize";
        document.body.appendChild(script);
    }

</script>

Also, I think it is possible to change the position later, with the command:

map.setCenter(new google.maps.LatLng( 45, 19 ) );

I hope it helps

Calvin Belden · Accepted Answer · 2016-03-17 14:25:55Z

You can use Array.prototype.bind to pre-load arguments to a function. We can use this to store arguments even if the function isn't invoked with any:

// Modify initialize to accept lat/long
function initialize(lat, long) {
    /* etc */
}

// Pre-load our arguments
var gmapsInitialize = initialize.bind(null, -34.397, 150.644);

And now you can set the callback to be gmapsInitialize.

Another option would be to create a higher-order function that returns your callback when invoked with the lat/long parameters:

function initializeFactory(lat, long) {
    return function () {
       /* function body of your original initialize here; make use of lat/long arguments */
    }
}

And you can create different versions of initialize this way:

var gmapsInitialize = initializeFactory(-34.397, 150.644);

Max Barrass · Accepted Answer · 2019-03-15 11:27:36Z

1

I solved passing parameter to callback by creating an extra function like so:

var id = $($element).attr("id");;
var callBackName = id+"_callback";
window[callBackName] = new Function("googleMapCallback(\""+id+"\")");
script.src = "https://maps.googleapis.com/maps/api/js?&sensor=false&callback=window."+callBackName;

This way you can have an element with all of the content and you can get back to it.

answered Mar 15, 2019 at 11:27

Max Barrass

3,3221 gold badge22 silver badges14 bronze badges

Collectives™ on Stack Overflow

Pass parameters to a url callback function in JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related