google.maps.LatLng() not working not taking parameters as variable only direct values are working

Question

I want to input source and destination and then show a direction between source and destination receptively, But the problem is google.maps.LatLng() this function is not taking in a variable as a parameter. if I pass value it's working for example: google.maps.LatLng(35.653341, -97.470570) ................................................

I have tried changing data type of var d for example:

var d=document.getElementById("destlat").value;

it didn't work

I have also tried google.maps.LatLng('arr[a]', 'arr[b]'); it is not working too

function initMap() {

alert("WELCOME");
var a=document.getElementById("sourcelon").value;
var b=document.getElementById("sourcelat").value;
var c=document.getElementById("destlon").value;
var d=document.getElementById("destlat").value;
var arr=[a,b,c,d,];
alert(arr);
var pointA = new google.maps.LatLng(arr[a], arr[b]);
var pointB = new google.maps.LatLng(arr[c], arr[d]);
var myOptions = {
  zoom: 7,
  center: pointA
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
// Instantiate a directions service.
directionsService = new google.maps.DirectionsService,
directionsDisplay = new google.maps.DirectionsRenderer({
  map: map
}),
markerA = new google.maps.Marker({
  position: pointA,
  title: "point A",
  label: "Source",
  map: map
}),
markerB = new google.maps.Marker({
  position: pointB,
  title: "point B",
  label: "Destination",
  map: map
});

I want to pass longitude and latitude dynamically to function but it is not working

score 0 · Answer 1 · answered Apr 30 '19 at 14:11

You have typos in your code. pointA (and pointB) should be either

new google.maps.LatLng(b, a); // lat/lng (notice not from the array)

or

new google.maps.LatLng(arr[1], arr[0]); // lat/lng

not:

var pointA = new google.maps.LatLng(arr[a], arr[b]);

proof of concept fiddle

code snippet:

function initMap() {

  var a = document.getElementById("sourcelon").value;
  var b = document.getElementById("sourcelat").value;
  var c = document.getElementById("destlon").value;
  var d = document.getElementById("destlat").value;
  var arr = [a, b, c, d, ];
  var pointA = new google.maps.LatLng(arr[1], arr[0]);
  var pointB = new google.maps.LatLng(arr[3], arr[2]);
  var myOptions = {
      zoom: 7,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService,
    directionsDisplay = new google.maps.DirectionsRenderer({
      map: map
    }),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "point A",
      label: "Source",
      map: map
    }),
    markerB = new google.maps.Marker({
      position: pointB,
      title: "point B",
      label: "Destination",
      map: map
    });
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-canvas {
  height: 90%;
  margin: 0;
  padding: 0;
}

<!--
New York, NY, USA (40.7127753, -74.0059728)
Newark, NJ, USA (40.735657, -74.1723667)
-->
<input id="sourcelat" value="40.7127753" size="10" />
<input id="sourcelon" value="-74.0059728" size="10" />
<input id="destlat" value="40.735657" size="10" />
<input id="destlon" value="-74.1723667" size="10" />
<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

google.maps.LatLng() not working not taking parameters as variable only direct values are working

1 Answers1