La méthode addListener de l'API Google Maps ne fonctionne pas

Question

J'utilise l'API Javascript de Google Maps, et je veux que lorsque vous cliquez sur un bouton sur une carte, une alerte JS apparaisse.

Voici mon code JS jusqu'à présent:

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

// Setting up and adding the boundary-changing buttons             
var boundaryChangeArr = [ 
    '<h3 id="boundary-change-title">Change boundaries</h3>', 
    '<div id="boundary-change-buttons-container">', 
     '<input id="boundaries-states" class="boundary-change-button" type="button" name="StatesBoundaries" value="States" />', 
     '<input id="boundaries-counties" class="boundary-change-button" type="button" name="CountiesBoundaries" value="Counties" />', 
     '<input id="boundaries-tracts" class="boundary-change-button" type="button" name="TractsBoundaries" value="Tracts" />', 
    '</div>' 
]; 

// If there is no div with the id 'boundary-change-container', make one 
var boundaryChange = $('div#boundary-change-container'); 
if(boundaryChange.length===0){ 
    var boundaryChange = document.createElement('div'); 
    boundaryChange.id = 'boundary-change-container'; 
    boundaryChange.innerHTML = boundaryChangeArr.join(''); 
    gmap.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(boundaryChange); 
}; // DONE: if(boundaryChange.length===0) 

google.maps.event.addListener(document.getElementById('boundaries-states'), 
    'click', 
    function(){ 
     alert('clicked'); 
    }); 

Mais quand je clique sur le bouton boundaries-states, rien ne se passe, et je ne même pas voir des erreurs dans Firebug, le plug-in Firefox qui peut vérifier JS erreurs.

Qu'est-ce que je fais mal?

Answer 1

Basé sur les commentaires et relisant la question, vous souhaitez effectuer un travail en cliquant sur le bouton pas sur la carte Google. Dans ce cas, vous ne voulez pas utiliser google.maps.event.addListener car cela permettra d'écouter les événements (comme le clic) sur la carte elle-même. Pour le bouton, vous pouvez utiliser l'événement jQuery click ou, si vous utilisez un framework javascript différent, il y aura probablement un événement click. Pour jQuery, vous procédez comme suit:

$('#boundaries-states').click(function() { 
    //Do something 
}); 

---

Il ressemble à la méthode addListener prend l'objet Carte google, pas l'élément HTML pour la carte. Jetez un oeil au premier exemple here.

Donc, si vous n'êtes pas déjà, vous devez conserver la référence à votre carte qui est retournée lorsque vous instancier la carte:

var map = new google.maps.Map(document.getElementById('boundaries-states'), 
    mapOptions); 

Une fois que vous avez votre carte de référence, vous pouvez ajouter un écouteur utilisant l'objet map, plutôt que l'élément HTML.

google.maps.event.addListener(map, 'click', function() { 
    alert('clicked'); 
});