Ajouter un événement onclick au marqueur google.map

Je suis coincé à essayer de comprendre un petit peu de JS 🙁 j'ai une carte 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 à brancher l'événement onclick pour le marqueur url?

Je sais qu'il a quelque chose à voir avec l'ajout de

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

Mais où j'ai jamais mis les causes de la carte ne s'affiche pas ou le marqueur s'affiche pas.

source d'informationauteur Mark

Assurez-vous que le marker est définie en dehors de l'initialiser(). Sinon, il sera undefined si vous tentez d'affecter l'écouteur de clics à l'extérieur de l'initialiser().

Aussi, vous pouvez avoir la MÊME ORIGINE des problèmes si vous essayez de charger l'url www.google.commais il devrait fonctionner correctement avec une url locale.

Mise à jour du 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;});

Travail de Démonstration sur Bootply

C'est ce que j'utilise:

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 suis pas sûr si vous pouvez stocker un url propriété avec un Marker objet.

Si vous avez besoin d'afficher plusieurs marqueurs (c'est à dire à partir d'un appel d'API), alors vous pouvez utiliser un for boucle 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]);
}

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 j'ai mis le marqueur de carte dans les options de marqueur, et vous vous préparez à l'aide d'un marqueur.setMap(Carte);

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

Vous ne savez pas où votre contenu, mais vous devez faire ce qui suit...

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

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

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 à cette page: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/marker-simple

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

Je pense que le problème que vous avez est la suivante, vous devez ajouter cette ligne:

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

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

Vous devez vous connecter pour publier un commentaire.