如何在Google Map Marker中添加点击事件？

Question

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>

Answer 1

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