I have this function, the default function from google maps api tutorial, I have just added 2 parameters latt and lngg.

function initMap(latt,lngg) {


    var uluru = {lat: latt , lng: lngg};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }

And I want to call it like they call it :

<script async defer
src=";callback=initMap">
</script>

but using different parameters each time, because I will have 6000 maps, and I want to call the script for each function

I don't know if something like &callback=initMap(latt,lngg) is possible.

Thank you so much

I have this function, the default function from google maps api tutorial, I have just added 2 parameters latt and lngg.

function initMap(latt,lngg) {


    var uluru = {lat: latt , lng: lngg};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }

And I want to call it like they call it :

<script async defer
src="https://maps.googleapis./maps/api/js?key=AIzaSyAmjE35Pm1eDdyF6Vg3WC69opkqLIVt3GY&callback=initMap">
</script>

but using different parameters each time, because I will have 6000 maps, and I want to call the script for each function

I don't know if something like &callback=initMap(latt,lngg) is possible.

Thank you so much

• javascript
• google-maps
• google-maps-api-3
• google-maps-markers

2 Answers 2

You could have a separate script which sets the variables, and then have the initMap() call these variables.

var latt;
var lngg;

function setCoords(latt,lngg){
  this.latt = latt;
  this.lngg = lngg;
}

function initMap() {

    var uluru = {lat: latt , lng: lngg};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }

<script type ='text/javascript'>setCoords(33.225488,-111.5955)</script>
<script async defer
src="https://maps.googleapis./maps/api/js?key=AIzaSyAmjE35Pm1eDdyF6Vg3WC69opkqLIVt3GY&callback=initMap">
</script>

You can't add parameters to a function that is used as a callback. You can add variables in the global scope or in your HTML that can be used in the callback function.

For example:

<div id="mapcoords" data-lat="40" data-lng="-117" data-zoom="5"></div>

function initMap() {
  var uluru = {
    lat: parseFloat(document.getElementById('mapcoords').getAttribute("data-lat")), 
    lng: parseFloat(document.getElementById('mapcoords').getAttribute("data-lng"))
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: parseInt(document.getElementById('mapcoords').getAttribute("data-zoom")),
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

proof of concept fiddle

code snippet:

function initMap() {
  var uluru = {
    lat: parseFloat(document.getElementById('mapcoords').getAttribute("data-lat")),
    lng: parseFloat(document.getElementById('mapcoords').getAttribute("data-lng"))
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: parseInt(document.getElementById('mapcoords').getAttribute("data-zoom")),
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<div id="map"></div>
<div id="mapcoords" data-lat="40" data-lng="-117" data-zoom="5"></div>
<script async defer src="https://maps.googleapis./maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>