Brtdku

I am calling this view with a geolist containing longitude, and latitude values.

I convert it to an array.

var geoArray = @Html.Raw(Json.Encode(@ViewBag.GeoList));

then within loop I put those values to markers,

    for (var i = 0; i < 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



          });



    }

Now, I want to create a click event here for markers so that when I click on the marker I can show some information about the place. Also, on clicking I want to zoom to that place.

My full script code is :

<script>





                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 < 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 < 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

                }

        </script>

In you could use a closure using a function fo create the listener in this case the function addListenerOnMarker

<script>





  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));



      var addListenerOnMarker = function(actMarker){



              actMarker.addListener('click', function() {

                  map.setZoom(9);

                  map.setCenter(actMarker.getPosition());

              });



      }



      for (var i = 0; i < 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



          });

          addListenerOnMarker(markers);

      }



</script>

Be careful at the proper use of var and array .. in your code you don't produce an array of markers but just create (and recreate ) a single marker i have leave the name markers and the remove the not propedeutical rest of code ..
(for produce an array of obeject (eg_marker) you should push the object inside and array . )