wake-up-neo.net

Google Maps API: Öffnen Sie die URL, indem Sie auf die Markierung klicken

Ich möchte ein neues Fenster öffnen, indem ich mit Google Maps API 3 auf eine Markierung klicke.

Leider gibt es nicht viele Beispiele für das Google Maps API und ich habe diesen Code herausgefunden:

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

Wie verwende ich es, wenn ich Marker mit einer Schleife erstelle? Ich habe es auf viele Arten versucht, ohne es mir leisten zu können.

Das ist mein Code - ich habe es einfach und kurz gemacht:

<!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>

Wie öffne ich die URL, indem ich auf die Markierung mit dem obigen Code klicke?

46
idobr

Sie können jedem Punkt eine bestimmte URL hinzufügen, z.

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']
];

Fügen Sie die URL zu den Markierungswerten in der for-Schleife hinzu:

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

Dann können Sie kurz vor dem Ende Ihrer for-Schleife hinzufügen:

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

Siehe auch dieses Beispiel .

98
scessor

url ist kein Objekt in der Marker-Klasse. Aber nichts hindert Sie daran, diese Eigenschaft zu dieser Klasse hinzuzufügen. Ich vermute, welches Beispiel auch immer Sie sich angesehen haben. Möchten Sie für jeden Marker eine andere URL? Was passiert, wenn Sie:

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