title: Get the Clicked marker in Google maps and send it to a function
body: <p>I tried to make google maps for cities in jordan that will Show information about the city to the user when the marker clicked </p>
  
  <p>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 </p>
  
  <p>The for-loop works will and Give each marker it's own title,label and give an event listener for each marker </p>
  
  <p>How can I get the clicked marker ?   </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Gis Map&lt;/title&gt;
    &lt;style&gt;
      .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;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="Fixed"&gt;
      &lt;div id="Fixed_img_c"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;script&gt;
      function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
      }
  
      function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
      }
    &lt;/script&gt;
  
    &lt;div class="container"&gt;
  
      &lt;div id="mySidenav" class="sidenav"&gt;
        &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
        &lt;a href="#"&gt;Something&lt;/a&gt;
        &lt;a href="#"&gt;Something&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div id="map" style="width:100%;height:500px"&gt;&lt;/div&gt;
  
      &lt;script&gt;
        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 &lt; 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()
            });
          }
  
  
  
        }
      &lt;/script&gt;
  
      &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZInPKXBMPYpDNRGJwjGqJb6MRGog_haU&amp;libraries=visualization&amp;callback=initMap"&gt;
      &lt;/script&gt;
  
  
      &lt;div id="Footer"&gt;
        &lt;p id="Footer_text" class="paragraphs"&gt;dufault&lt;/p&gt;
      &lt;/div&gt;
  
  
    &lt;/div&gt;
  
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>