Derek Fu Derek Fu - 1 month ago 10
Javascript Question

How can I pass the value of variables inside a function into google map function?

Hi I'm trying to set map's centre using the input value from an array, but somehow it won't update. If I call the map function inside of the view onclick function it shows that "InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number"

<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="style.css">
<style>
body{
margin: 0;
}
#map {
position:absolute;
bottom: 0;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<button id="create">Create</button>

<button id="view">View</button>
<div id="display"></div>
<div id="map"></div>



</body>
<script src="https://maps.googleapis.com/maps/api/js?&callback=inimap"async defer></script>
<script src="test.js"></script>
</html>

var create = document.getElementById("create");
var view = document.getElementById("view");
var latDefault = 41;
var lngDefault = -122;
var map = null;


var store_arr = [];

create.onclick = function(){
var latInput = document.createElement("input");
latInput.placeholder = "Latitude" ;
//latInput.value = latDefault;
var lngInput = document.createElement("input");
lngInput.placeholder = "Longitude";
//lngInput.value = lngDefault;
var pushBut = document.createElement("button");
pushBut.innerHTML= "Store";

display.appendChild(latInput);
display.appendChild(lngInput);
display.appendChild(pushBut);

pushBut.onclick = function(){
var latVal = latInput.value;
var lngVal = lngInput.value;
var profileObj = {
Latitude: latVal,
Longitude:lngVal
};

store_arr.push(profileObj);

}
}

view.onclick = function(){
var displayB = document.createElement("div");
document.body.appendChild(displayB);
displayB.innerHTML="";
for (var i = 0; i<store_arr.length; i++){
var infos = document.createElement("div");
infos.innerHTML = " Latitude: " + store_arr[i].Latitude + "; Longitude: " + store_arr[i].Longitude;
displayB.appendChild(infos);

latDefault = store_arr[i].Latitude;
lngDefault = store_arr[i].Longitude;

}

}


function inimap(){

map = new google.maps.Map(
document.getElementById("map"),
{
center: {lat:latDefault, lng:lngDefault},
zoom:5
}
);

}

Answer

You are getting the error "InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number" because the values in latDefault and lngDefault are strings, not numbers:

  var latVal = latInput.value; // this is a string
  var lngVal = lngInput.value; // so is this
  var profileObj = {
    Latitude: latVal,
    Longitude: lngVal
  };
  store_arr.push(profileObj);

// snip

latDefault = store_arr[i].Latitude;
lngDefault = store_arr[i].Longitude;

To convert them to numbers, either call parseFloat on them or perform a numeric operation on them.

latDefault = parseFloat(store_arr[i].Latitude);
lngDefault = parseFloat(store_arr[i].Longitude);

code snippet:

body {
  margin: 0;
}
#map {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 300px;
}
<button id="create">Create</button>

<button id="view">View</button>
<div id="display"></div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?&callback=inimap" async defer></script>
<script>
  var create = document.getElementById("create");
  var view = document.getElementById("view");
  var latDefault = 41;
  var lngDefault = -122;
  var map = null;


  var store_arr = [];

  create.onclick = function() {
    var latInput = document.createElement("input");
    latInput.placeholder = "Latitude";
    //latInput.value = latDefault;
    var lngInput = document.createElement("input");
    lngInput.placeholder = "Longitude";
    //lngInput.value = lngDefault;
    var pushBut = document.createElement("button");
    pushBut.innerHTML = "Store";

    display.appendChild(latInput);
    display.appendChild(lngInput);
    display.appendChild(pushBut);

    pushBut.onclick = function() {
      var latVal = latInput.value;
      var lngVal = lngInput.value;
      var profileObj = {
        Latitude: latVal,
        Longitude: lngVal
      };
      store_arr.push(profileObj);
    }
  }
  view.onclick = function() {
    var displayB = document.createElement("div");
    document.body.appendChild(displayB);
    displayB.innerHTML = "";
    for (var i = 0; i < store_arr.length; i++) {
      var infos = document.createElement("div");
      infos.innerHTML = " Latitude: " + store_arr[i].Latitude + "; Longitude: " + store_arr[i].Longitude;
      displayB.appendChild(infos);

      latDefault = parseFloat(store_arr[i].Latitude);
      lngDefault = parseFloat(store_arr[i].Longitude);
    }
    inimap();
  }

  function inimap() {
    map = new google.maps.Map(
      document.getElementById("map"), {
        center: {
          lat: latDefault,
          lng: lngDefault
        },
        zoom: 5
      }
    );
  }
</script>