Google Map API ( input value error/not updating )

Question

I am trying to create google map with api, but input value not updating in const, please help me.

var map;

function initMap() {
  var lat_1 = document.getElementById('lat_1').value;
  var lng_1 = document.getElementById('lng_1').value;
  /*
  var lat_1 = 20.5937;
  var lng_1 = 78.9629;
  */
  const options = {
    zoom: 4,
    scaleControl: true,
    center: {
      lat: lat_1,
      lng: lng_1
    },
    mapTypeId: 'roadmap'
  };
  map = new google.maps.Map(document.getElementById('map'), options);
  // Locations of landmarks
  new google.maps.Marker({
    position: {
      lat: lat_1,
      lng: lng_1
    },
    map,
  });

}

<div id="about_map">
  <input name="lat_1" id="lat_1" type="text" value="20.5937" class="_input" onChange="initMap()">
  <input name="lng_1" id="lng_1" type="text" value="78.9629" class="_input" onChange="initMap()">
</div>
<div id="map"></div>

Answer 1

You are setting options.center.lat and options.center.lng to the values you enter in the input-fields which is returned as strings while lat and lng values must be numeric

You may use:

const options = {
    zoom: 4,
    scaleControl: true,
    center: new google.maps.LatLng(lat_1, lng_1),
    mapTypeId: 'roadmap'
};
map = new google.maps.Map(document.getElementById('map'), options);

Or you can use:

var lat_1 = parseFloat(document.getElementById('lat_1').value);
var lng_1 = parseFloat(document.getElementById('lng_1').value);