Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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

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
  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>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.