Get the Clicked marker in Google maps and send it to a function

Question

I tried to make google maps for cities in jordan that will Show information about the city to the user when the marker clicked

My problem is When I tried to get the Marker that been clicked by the user ,it always send the last marker in the For-loop that instantiate the markers and give the information

The for-loop works will and Give each marker it's own title,label and give an event listener for each marker

How can I get the clicked marker ?

<!DOCTYPE html>
<html>

<head>
  <title>Gis Map</title>
  <style>
    .background {} p {
      background-color: white;
    }
    span {
      color: blue;
    }
    #Footer {
      width: 100%;
      height: 30px;
      position: relative;
      left: 0px;
      bottom: 0px;
    }
    #Footer_text {
      padding: 10px;
      color: black;
      background-color: #5B1B14;
    }
    #Fixed {
      position: fixed;
      top: 0px;
      left: 0px;
      height: 70px;
      width: 100%;
      z-index: 3;
      background-color: #5B1B14;
    }
    #Fixed_img_c {
      width: 20%;
      height: 100%;
      margin: 0 auto;
    }
    #Fixed_img {
      height: 100%;
    }
    .paragraphs {
      text-align: center;
      z-index: 1;
      font-size: 20px;
      width: 100%;
      color: red;
    }
    /*************************Menu*****************************/
    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0px;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }
    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s
    }
    .sidenav a:hover,
    .offcanvas a:focus {
      color: #f1f1f1;
    }
    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }
  </style>
</head>

<body>
  <div id="Fixed">
    <div id="Fixed_img_c">
    </div>
  </div>


  <script>
    function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
    }

    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
    }
  </script>

  <div class="container">

    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">Something</a>
      <a href="#">Something</a>
    </div>

    <div id="map" style="width:100%;height:500px"></div>

    <script>
      var map;

      function initMap() {
        map = new google.maps.Map(
          document.getElementById('map'), {
            zoom: 7,
            center: new google.maps.LatLng(31.9, 35.8),
            mapTypeId: 'terrain'
          });



        //jordan cities locations
        var locations = [
          [31.8354533, 35.9674337],
          [31.186446, 35.6248844],
          [30.8071736, 35.5228078],
          [32.0522945, 35.9935951],
          [31.7157524, 35.7633807],
          [32.0321557, 35.655972],
          [32.3402518, 36.1527321],
          [32.2699656, 35.824437],
          [32.3415654, 35.7322292],
          [32.5525113, 35.81239],
          [30.2200923, 35.5467541],
          [29.5909744, 35.1750487]
        ]

        var info = [
          ["Amman", 4.007256],
          ["Al_Karak", 316.629],
          ["Tafilah", 96.291],
          ["Zarqa  ", 1.364878],
          ["Madaba  ", 189.192],
          ["Balqa   ", 491.709],
          ["Mafraq  ", 549.948],
          ["Jerash  ", 237.059],
          ["Ajloun  ", 176.080],
          ["Irbid  ", 1.770158],
          ["Ma'an", 144.083],
          ["Aqaba ", 188.160]
        ]
        var markers = new Array();

        for (var i = 0; i < locations.length; i++) {
          var coords = locations[i];
          var latLng = new google.maps.LatLng(coords[0], coords[1]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            label: info[i][0],
            title: info[i][0]
          });

          var infowindow = new google.maps.InfoWindow({
            content: info[i][1] + ""
          });

          google.maps.event.addListener(marker, 'click', function() {
            openNav();
            //changeText();
            infowindow.open(map, marker);
          });



          google.maps.event.addListener(map, 'click', function() {
            closeNav()
          });
        }



      }
    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZInPKXBMPYpDNRGJwjGqJb6MRGog_haU&libraries=visualization&callback=initMap">
    </script>


    <div id="Footer">
      <p id="Footer_text" class="paragraphs">dufault</p>
    </div>


  </div>




</body>

</html>

geocodezip · Answer 1 · 2020-11-06T21:58:27.470

You need to associate the infowindow with the correct marker. One solution to that is function closure as demonstrated in the similar question: Google Maps JS API v3 - Simple Multiple Marker Example. For your code:

google.maps.event.addListener(marker, 'click', function(marker,i) {
 return function() {
  openNav();
  //changeText();
  // set the infowindow content for this marker (the function has closure on i)
  infowindow.setContent(info[i][1]+"");
  // open the infowindow on this marker (the function has closure on marker)
  infowindow.open(map, marker);
}}(marker,i));

proof of concept fiddle

code snippet:

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
var map;

function initMap() {
  map = new google.maps.Map(
    document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(31.9, 35.8),
      mapTypeId: 'terrain'
    });



  //jordan cities locations
  var locations = [
    [31.8354533, 35.9674337],
    [31.186446, 35.6248844],
    [30.8071736, 35.5228078],
    [32.0522945, 35.9935951],
    [31.7157524, 35.7633807],
    [32.0321557, 35.655972],
    [32.3402518, 36.1527321],
    [32.2699656, 35.824437],
    [32.3415654, 35.7322292],
    [32.5525113, 35.81239],
    [30.2200923, 35.5467541],
    [29.5909744, 35.1750487]
  ]

  var info = [
    ["Amman", 4.007256],
    ["Al_Karak", 316.629],
    ["Tafilah", 96.291],
    ["Zarqa  ", 1.364878],
    ["Madaba  ", 189.192],
    ["Balqa   ", 491.709],
    ["Mafraq  ", 549.948],
    ["Jerash  ", 237.059],
    ["Ajloun  ", 176.080],
    ["Irbid  ", 1.770158],
    ["Ma'an", 144.083],
    ["Aqaba ", 188.160]
  ]
  var markers = new Array();

  for (var i = 0; i < locations.length; i++) {
    var coords = locations[i];
    var latLng = new google.maps.LatLng(coords[0], coords[1]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      label: info[i][0],
      title: info[i][0]
    });

    var infowindow = new google.maps.InfoWindow({
      content: info[i][1] + ""
    });

    google.maps.event.addListener(marker, 'click', function(marker, i) {
      return function() {
        openNav();
        //changeText();
        infowindow.setContent(info[i][1] + "");
        infowindow.open(map, marker);
      }
    }(marker, i));
    google.maps.event.addListener(map, 'click', function() {
      closeNav()
    });
  }
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="Fixed">
  <div id="Fixed_img_c">
  </div>
</div>
<div class="container">

  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">Something</a>
    <a href="#">Something</a>
  </div>

  <div id="map" style="width:100%;height:500px"></div>
  <div id="Footer">
    <p id="Footer_text" class="paragraphs">dufault</p>
  </div>

score 2 · Answer 2 · answered Dec 30 '16 at 14:42

Try placing the listener in a function and pass the value you need

  var myFunctinForListener = function(aMarker, aInfoWindow) {
      google.maps.event.addListener(aMarker, 'click', function() {
          openNav();
          //changeText();
          aInfoWindow.open(map, aMarker);
        });
  }



  ....


      for (var i = 0; i < locations.length; i++) {
        var coords = locations[i];
        var latLng = new google.maps.LatLng(coords[0], coords[1]);
        var marker = new google.maps.Marker({
          position: latLng,
          map: map,
          label: info[i][0],
          title: info[i][0]
        });

        var infowindow = new google.maps.InfoWindow({
          content: info[i][1] + ""
        });


        myFunctinForListener(marker, inforwinodow);


    .....

Get the Clicked marker in Google maps and send it to a function

2 Answers2