web-dev-qa-db-de.com

Hinzufügen eines Onclick-Ereignisses zur google.map-Markierung

Ich versuche, ein wenig von JS herauszufinden :( Ich habe eine Google-Karte

var myCenter=new google.maps.LatLng(53, -1.33);

function initialize()
{
var mapProp = {
    center:myCenter,
    zoom: 14,
    draggable: false,
    scrollwheel: false,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);

var marker=new google.maps.Marker({
    position:myCenter,
    icon:'images/pin.png',
    url: 'http://www.google.com/',
    animation:google.maps.Animation.DROP
});
marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

Ich kann jedoch das Onclick-Ereignis für die Marker-URL nicht verbinden.

Ich weiß, es hat etwas mit dem Hinzufügen zu tun

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

Aber wo immer ich das platziere, wird die Karte nicht angezeigt oder die Markierung wird nicht angezeigt.

javascriptapigoogle-maps
21
Mark

Stellen Sie sicher, dass marker außerhalb von initialize () definiert ist. Andernfalls ist es undefined, wenn Sie versuchen, den Klicklistener außerhalb von initialize () zuzuweisen.

Möglicherweise treten auch SAME-Origin-Probleme auf, wenn Sie versuchen, die URL www.google.com zu laden, dies sollte jedoch mit einer lokalen URL problemlos funktionieren.

Aktualisierter Code

var myCenter=new google.maps.LatLng(53, -1.33);

var marker=new google.maps.Marker({
    position:myCenter,
    url: '/',
    animation:google.maps.Animation.DROP
});

function initialize()
{
var mapProp = {
    center:myCenter,
    zoom: 14,
    draggable: false,
    scrollwheel: false,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);

marker.setMap(map);
}

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

Arbeitsdemo auf Bootply

17
Zim

Das ist was ich benutze:

var latLng = new google.maps.LatLng(53, -1.33);

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: latLng,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    scrollwheel: false,
    zoom: 14
});

var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    icon: 'images/pin.png',
    map: map,
    position: latLng
});

google.maps.event.addDomListener(marker, 'click', function() {
    window.location.href = 'http://www.google.co.uk/';
});

Ich bin nicht sicher, ob Sie eine url -Eigenschaft mit einem Marker-Objekt speichern können.

Wenn Sie mehrere Marken anzeigen müssen (d. H. Von einem API-Aufruf), können Sie eine for-Schleife wie folgt verwenden:

for (var i = 0; i < markers.length; i++) {
    (function(marker) {
        var marker = new google.maps.Marker({
            animation: google.maps.Animation.DROP,
            icon: 'images/pin.png',
            map: map,
            position: market.latLng
        });

        google.maps.event.addDomListener(marker, 'click', function() {
            window.location.href = marker.url;
        });
    })(markers[i]);
}
5
Martin Bean

Sie sind sich nicht sicher, wo sich Ihre Inhalte befinden, aber Sie müssten Folgendes tun ...

var yourContent = new google.maps.InfoWindow({
    content: 'blah blah'
});

google.maps.event.addListener(marker, 'click', function() {
  yourContent.open(map,marker);
});
0
Alex Gill

Hier ist was ich in der Vergangenheit gemacht habe. Der einzige Unterschied, den ich zwischen meinem und Ihrem Code sehe, ist, dass ich die Markierungskarte in den Markierungsoptionen einstelle und Sie sie mit marker.setMap (Map) einstellen.

var marker = new window.google.maps.Marker({
        position: markerPosition,
        map: map,
        draggable: false,
        zIndex: zIndex,
        icon: getNewIcon(markerType != "archive", isBig)
        , animation: markerAnimation
    });


    window.google.maps.event.addListener(marker, 'click', function () {
        // do stuff
    });
0
Smeegs
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Hello World!',
    url: 'http://www.google.com'
});
google.maps.event.addListener(marker, 'click', function () {
    window.location = marker.url;
});

Wenn Sie diese Seite besuchen: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/marker-simple

und fügen Sie den obigen Code in die Konsole ein. Sie werden sehen, dass er funktioniert.

Ich denke, das Problem, das Sie haben, ist folgendes: Sie müssen diese Zeile eingeben:

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

innerhalb Ihrer Initialisierungsfunktion.

0
aledujke