How to use link in marker map to pass data's marker to another page?

Question

There is a map in my MVC code. when loads map show some marker on map. So when click on marker, data of this marker pass to another page and show info of marker on new page.

for (i = 0; i < (alarm.length) ; i++) {
            marker = new google.maps.Marker({

                position: new google.maps.LatLng(alarm[i][0], alarm[i][1]),
                map: map, icon: '/Content/alarm.png',
                url: 'http://localhost/Alarm/Index/'+alarm[i][3]
            });
            google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                return function () {
                    infowindow.setContent("<br/> No: " + alarm[i][2] + "<br/> Serial: " + alarm[i][3] );
                    infowindow.open(map, marker);
                }
            })
            (marker, i));
            marker.addListener('mouseout', function () {
                infowindow.close();
            });

            google.maps.event.addListener(marker, 'click', function () {
                window.location.href =marker.url ;
            });
        }

This is my code, but when click any marker, it show the same info for all marker.

possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Feb 20 '16 at 07:06
@geocodezip But when click on marker i want to use link to open another page. — mahdis dezfouli, Feb 20 '16 at 07:10

score 1 · Accepted Answer · answered Feb 20 '16 at 07:13

You need to get function closure for your marker "click" listener as well as for the marker "mouseout" listener. I would suggest a createMarker function rather than lots of anonymous function closures. But you could just use the this inside the "click" listener to access its .url property (change marker.url to this.url).

for (i = 0; i < (alarm.length) ; i++) {
   createMarker(alarm[i]);
}
function createMarker(alarm) {
  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(alarm[0], alarm[1]),
        map: map, icon: '/Content/alarm.png',
        url: 'http://localhost/Alarm/Index/'+alarm[3]
      });
   google.maps.event.addListener(marker, 'mouseover', function (evt) {
     infowindow.setContent("<br/> No: " + alarm[2] + "<br/> Serial: " + alarm[3] );
     infowindow.open(map, marker);
   });
   marker.addListener('mouseout', function () {
     infowindow.close();
  });
  google.maps.event.addListener(marker, 'click', function () {
     window.location.href =marker.url ;
  });
}

How to use link in marker map to pass data's marker to another page?

1 Answers1