Google Maps Mehrere Marker, die auf dieselbe URL verweisen

Question

Ich habe ein Problem mit Google Maps. Ich versuche, es so zu bekommen, dass jeder der Marker mit den relevanten Seiten meiner Website verlinkt. Derzeit sind jedoch alle Marker mit dem gleichen Ort verbunden und ich bin mir nicht sicher warum. Ich habe einen Ereignis-Listener innerhalb der for-Schleife eingerichtet, der angibt, wann der Marker angeklickt wird, der Benutzer wird auf die richtige spezifische Webseite verschoben. Das Problem scheint zu sein, dass alle Marker die erste Marker-Position einnehmen und an dieselbe Stelle verlinken. Jede Hilfe würde massiv geschätzt werden.

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 8, 
     styles: [{"featureType": "all", "elementType": "labels.text.fill", "stylers": [{"saturation": 36},{"color": "#333333"},{"lightness": 40}]},{"featureType": "all", "elementType": "labels.text.stroke", "stylers": [{"visibility": "on"},{"color": "#ffffff"},{"lightness": 16}]},{"featureType": "all", "elementType": "labels.icon", "stylers": [{"visibility": "off"}]},{"featureType": "administrative", "elementType": "geometry.fill", "stylers": [{"color": "#fefefe"},{"lightness": 20}]},{"featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{"color": "#fefefe"},{"lightness": 17},{"weight": 1.2}]},{"featureType": "landscape", "elementType": "geometry", "stylers": [{"color": "#f5f5f5"},{"lightness": 20}]},{"featureType": "poi", "elementType": "geometry", "stylers": [{"color": "#f5f5f5"},{"lightness": 21}]},{"featureType": "poi.park", "elementType": "geometry", "stylers": [{"color": "#dedede"},{"lightness": 21}]},{"featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{"color": "#ffffff"},{"lightness": 17}]},{"featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{"color": "#ffffff"},{"lightness": 29},{"weight": 0.2}]},{"featureType": "road.arterial", "elementType": "geometry", "stylers": [{"color": "#ffffff"},{"lightness": 18}]},{"featureType": "road.local", "elementType": "geometry", "stylers": [{"color": "#ffffff"},{"lightness": 16}]},{"featureType": "transit", "elementType": "geometry", "stylers": [{"color": "#f2f2f2"},{"lightness": 19}]},{"featureType": "water", "elementType": "geometry", "stylers": [{"color": "#e9e9e9"},{"lightness": 17}]}] }); 

    setMarkers(map); 
    } 

    // Data for the markers consisting of a name, a LatLng and a zIndex for the 
    // order in which these markers should display on top of each other. 
    var beaches = [ ['Test', Latitude, Longitude, 4], ['Test1', Latitude, Longitude, 4], ['Test2', Latitude, Longitude, 4], ['Test3', Latitude, Longitude, 4] ] 
function setMarkers(map) { 

    var image = { 
     url: 'open.png', 
     // The origin for this image is (0, 0). 
     origin: new google.maps.Point(0, 0) 
    }; 

    var bounds = new google.maps.LatLngBounds(); 
    var infowindow = new google.maps.InfoWindow(); 

    for (var i = 0; i < beaches.length; i++) { 
     var beach = beaches[i]; 
     var marker = new google.maps.Marker({ 
     position: {lat: beach[1], lng: beach[2]}, 
     map: map, 
     icon: image, 
     title: beach[0], 
     zIndex: beach[3] 
     }); 

     bounds.extend(marker.position); 


     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
      window.location.href = "http://localhost/" + beach[0]; 
      } 
     })(marker, i)); 

    } 

    map.fitBounds(bounds); 

     var listener = google.maps.event.addListener(map, "idle", function() { 
     map.setZoom(11); 
     google.maps.event.removeListener(listener); 
    }); 
    } 

Answer 1

Dies ist ein häufiges Problem mit in Schleifen zugewiesenen Variablen. Der Wert von beach zeigt auf den letzten Eintrag in der Tabelle, wenn die Schleife beendet wird.

Sie haben zwei Möglichkeiten:

1. eine Eigenschaft des Markers verwenden, die (this.getTitle())
2. Verwendung Funktion Schließung geklickt wird in dem Ereignis-Listener (wie und i verwendet wird).

Simplest Lösung (# 1):

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
    window.location.href = "http://localhost/" + this.getTitle(); 
    } 
})(marker, i)); 

proof of concept fiddle

Funktion Verschlusslösung (# 2):

google.maps.event.addListener(marker, 'click', (function(marker, i, link) { 
    return function() { 
    window.location.href = "http://localhost/" + link; 
    } 
})(marker, i, beach[0])); 

proof of concept fiddle