Call Function Initmap With Parameters In Gmaps Api

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

Solution 1:

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

var latt;
var lngg;

functionsetCoords(latt,lngg){
  this.latt = latt;
  this.lngg = lngg;
}

functioninitMap() {

    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
    });
  }

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

Solution 2:

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>

functioninitMap() {
  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:

functioninitMap() {
  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
}

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