web-dev-qa-db-fra.com

Ajout d'un événement onclick au marqueur google.map

Je suis coincé à essayer de comprendre un peu de JS :( j'ai une carte de Google

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);

Mais je n'arrive pas à connecter l'événement onclick à l'URL du marqueur?

Je sais que cela a quelque chose à voir avec l'ajout

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

Mais où que je sois placé, la carte ne s'affiche pas ou le marqueur ne s'affiche pas.

javascriptapigoogle-maps
21
Mark

Assurez-vous que la marker est définie en dehors de initialize (). Sinon, ce sera undefined si vous essayez d'affecter le programme d'écoute de clic en dehors de initialize ().

Vous pouvez également rencontrer des problèmes SAME-Origin si vous essayez de charger l'URL www.google.com, mais cela devrait fonctionner correctement avec une URL locale.

Code mis à jour

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;});

Démo de travail sur Bootply

17
Zim

C’est ce que j’utiliserais:

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/';
});

Je ne sais pas si vous pouvez stocker une propriété url avec un objet Marker.

Si vous devez afficher plusieurs marqueurs (à partir d’un appel d’API), vous pouvez utiliser une boucle for comme ceci:

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

Vous ne savez pas exactement où se trouve votre contenu, mais vous devrez procéder comme suit ...

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

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

Voici ce que j'ai fait dans le passé. La seule différence que je vois entre mon code et le vôtre est que je mets la carte des marqueurs dans les options des marqueurs et que vous configurez avec marker.setMap (Map);

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;
});

Si vous allez sur cette page: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/marker-simple

et collez le code ci-dessus dans la console, vous verrez que cela fonctionne.

Je pense que le problème que vous avez est le suivant, vous devez mettre cette ligne:

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

à l'intérieur de votre fonction d'initialisation.

0
aledujke