API Google Maps : ouvrez l'url en cliquant sur le marqueur

Question

API Google Maps : ouvrez l'url en cliquant sur le marqueur

Demandé el 7 de Janvier, 2012: Quand la question a-t-elle été
125850 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je souhaite ouvrir une nouvelle fenêtre en cliquant sur un marqueur à l'aide de l'API Google Maps 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, lorsque je crée des marqueurs avec une boucle ? Je l'ai essayé à bien des égards sans les moyens.

Voici 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 l'url en cliquant sur le marqueur avec le code ci-dessus ?

Demandé el 7 de Janvier, 2012 par idobr

Answer 1

5 Réponses

Answer 2

111voto

scessor Points 11699

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 cet exemple .

Répondu el 7 de Janvier, 2012 par scessor (11699 Points )

Answer 3

5voto

duncan Points 13751

url n'est pas un objet de la classe Marker. Mais rien ne vous empêche d'ajouter cela en tant que propriété à cette classe. Je suppose que quel que soit l'exemple que vous regardiez l'a fait aussi. Voulez-vous une URL différente pour chaque marqueur ? Que se passe-t-il lorsque 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;
    });
}

Répondu el 7 de Janvier, 2012 par duncan (13751 Points )

Answer 4

1voto

Andrew Zheludkov Points 5

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

Répondu el 20 de Avril, 2020 par Andrew Zheludkov (5 Points )

Answer 5

0voto

Louis Chaussé Points 107

Si quelqu'un souhaite ajouter une URL sur un seul marqueur qui ne nécessite pas de boucles for, voici comment cela se passe :

 if ($('#googleMap').length) {
    var initialize = function() {
        var mapOptions = {
            zoom: 15,
            scrollwheel: false,
            center: new google.maps.LatLng(45.725788, -73.5120818),
            styles: [{
                stylers: [{
                    saturation: -100
                }]
            }]
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
        var marker = new google.maps.Marker({
            position: map.getCenter(),
            animation: google.maps.Animation.BOUNCE,
            icon: 'example-marker.png',
            map: map,
            url: 'https://example.com'
        });

        //Add an url to the marker
    google.maps.event.addListener(marker, 'click', function() {
        window.location.href = this.url;
    });
    }
    // Add the map initialize function to the window load function
    google.maps.event.addDomListener(window, "load", initialize);
}

Répondu el 3 de Octobre, 2019 par Louis Chaussé (107 Points )

Answer 6

0voto

Stackaccount1 Points 96

    function loadMarkers(){
          {% for location in object_list %}
              var point = new google.maps.LatLng({{location.latitude}},{{location.longitude}});
              var marker = new google.maps.Marker({
              position: point,
              map: map,
              url: {{location.id}},
          });

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

          {% endfor %}

Répondu el 18 de Janvier, 2020 par Stackaccount1 (96 Points )

API Google Maps : ouvrez l'url en cliquant sur le marqueur

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

API Google Maps : ouvrez l'url en cliquant sur le marqueur

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: