title: How to add on click event in google map marker?
body: <p>I am calling this view with a geolist containing longitude, and latitude values.</p>
  
  <p>I convert it to an array. </p>
  
  <pre><code>var geoArray = @Html.Raw(Json.Encode(@ViewBag.GeoList));
  </code></pre>
  
  <p>then within loop I put those values to markers,</p>
  
  <pre><code>    for (var i = 0; i &lt; geoArray.length; i++)
      {
           var myLatLng = new google.maps.LatLng(geoArray[i].Latitude, geoArray[i].Longitude);
           var markers = new google.maps.Marker({
           position: myLatLng,
           map: map,
           title: geoArray[i].SubmittedBy
  
            });
  
      }
  </code></pre>
  
  <p>Now, I want to create a click event here for markers so that when I click on the <strong>marker</strong> I can show some information about the place. Also, on clicking I want to zoom to that place.</p>
  
  <p>My full script code is :</p>
  
  <pre><code>&lt;script&gt;
  
  
                  var map;
                  var src = 'https://s3-ap-southeast-1.amazonaws.com/cloudcreativeltd/Rail_Ex_RoW_my.kml';
  
  
  
  
                  function initMap() {
                      // Map options
                      var options = {
                          zoom: 6,
                          center: { lat: 23.6850, lng: 90.3563 }
                      }
                      var ctaLayer = new google.maps.KmlLayer({
                          url: 'https://s3-ap-southeast-1.amazonaws.com/cloudcreativeltd/Rail_Ex_RoW_my.kml',
                          map: map
                      });
  
                      // New map
                      var map = new google.maps.Map(document.getElementById('map'), options);
  
  
                      var geoArray = @Html.Raw(Json.Encode(@ViewBag.GeoList));
  
                      for (var i = 0; i &lt; geoArray.length; i++) {
                          var myLatLng = new google.maps.LatLng(geoArray[i].Latitude, geoArray[i].Longitude);
                          var markers = new google.maps.Marker({
                              position: myLatLng,
                              map: map,
                              title: geoArray[i].SubmittedBy
  
                          });
                      }
  
  
                      markers.addListener('click', toggleBounce);
  
                      // Loop through markers
                      for (var i = 0; i &lt; markers.length; i++)
                      {
                          addMarker(markers[i]);
                      }
  
                      // Add Marker Function
                      function addMarker(props) {
                          var marker = new google.maps.Marker({
                              position: props.coords,
                              map: map,
                              //icon:props.iconImage
  
                          });
  
  
                          google.maps.event.addListener(marker, 'click', function () {
                              map.setZoom(9);
                              map.setCenter(marker.getPosition());
                          });
                          // Check for customicon
                          if (props.iconImage) {
                              // Set icon image
                              marker.setIcon(props.iconImage);
                          }
  
                          // Check content
                          if (props.content) {
                              var infoWindow = new google.maps.InfoWindow({
                                  content: props.content
                              });
  
  
                              //Adding KML leayer
                              var kmlLayer = new google.maps.KmlLayer(src,
                                  {
                                      suppressInfoWindows: true,
                                      preserveViewport: false,
                                      map: map
                                  });
                              kmlLayer.addListener('click',
                                  function(event) {
                                      var content = event.featureData.infoWindowHtml;
                                      var testimonial = document.getElementById('capture');
                                      testimonial.innerHTML = content;
                                  });
  
  
                              marker.addListener('click',
                                  function() {
                                      infoWindow.open(map, marker);
                                  });
                          }
  
                      }
  
  
                  }
                  function toggleBounce(){
                      content:hello
                  }
          &lt;/script&gt;
  </code></pre>