web-dev-qa-db-fra.com

API Google Maps: ouvrez l’URL en cliquant sur le marqueur

Je souhaite ouvrir une nouvelle fenêtre en cliquant sur un marqueur utilisant Google Maps API 3.

Malheureusement, il n'y a pas beaucoup d'exemples pour l'API Google Maps et j'ai découvert ce code:

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

Comment l'utiliser quand je crée des marqueurs avec une boucle? Je l'ai essayé à bien des égards sans payer.

Ceci est mon code - je l'ai fait simple et court:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100% }
    </style>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
    var points = [
        ['name1', 59.9362384705039, 30.19232525792222, 12],
        ['name2', 59.941412822085645, 30.263564729357767, 11],
        ['name3', 59.939177197629455, 30.273554411974955, 10]
    ];

    function setMarkers(map, locations) {
        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18 , 1],
            type: 'poly'
        };

        for (var i = 0; i < locations.length; i++) {
            var flag = new google.maps.MarkerImage('markers/' + (i + 1) + '.png',
            new google.maps.Size(17, 19),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 19));

            var place = locations[i];
            var myLatLng = new google.maps.LatLng(place[1], place[2]);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: flag,
                shape: shape,
                title: place[0],
                zIndex: place[3]
            });
        }
    }

    function initialize() {
        var myOptions = {
            center: new google.maps.LatLng(59.91823239768787, 30.243222856188822),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        setMarkers(map, points);
    }
    </script>
</head>

<body onload="initialize()">
    <div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>

Comment ouvrir une URL en cliquant sur le marqueur de code ci-dessus?

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
46
idobr

Vous pouvez ajouter une URL spécifique à chaque point, par exemple:

var points = [
    ['name1', 59.9362384705039, 30.19232525792222, 12, 'www.google.com'],
    ['name2', 59.941412822085645, 30.263564729357767, 11, 'www.Amazon.com'],
    ['name3', 59.939177197629455, 30.273554411974955, 10, 'www.stackoverflow.com']
];

Ajoutez l'URL aux valeurs du marqueur dans la boucle for:

var marker = new google.maps.Marker({
    ...
    zIndex: place[3],
    url: place[4]
});

Ensuite, vous pouvez ajouter juste avant la fin de votre boucle for:

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

Voir aussi ceci exemple .

98
scessor

url n'est pas un objet de la classe Marker. Mais rien ne vous empêche d’ajouter cela en tant que propriété de cette classe. Je suppose que tous les exemples que vous avez examinés l’ont également fait. Voulez-vous une URL différente pour chaque marqueur? Qu'est-ce qui se passe quand vous faites:

for (var i = 0; i < locations.length; i++) 
{
    var flag = new google.maps.MarkerImage('markers/' + (i + 1) + '.png',
      new google.maps.Size(17, 19),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 19));
    var place = locations[i];
    var myLatLng = new google.maps.LatLng(place[1], place[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: flag,
        shape: shape,
        title: place[0],
        zIndex: place[3],
        url: "/your/url/"
    });

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