web-dev-qa-db-fra.com

Google Maps API V3 - ajouter un écouteur d'événements à tous les marqueurs?

Il doit y avoir un moyen d'ajouter un auditeur à ALL MARKERS, actuellement j'ajoute un auditeur à chacun en utilisant une boucle qui semble vraiment fausse ...

Cela ne va pas:

google.maps.event.addListener(unique_marker_id, 'click', function(){
    //do something with this marker...                   
});
google-mapsgoogle-maps-api-3
30
Haroldo

Dans les deux cas Marker et MarkerWithLabel, vous pouvez également utiliser le mot cléthispour désigner l'objet auquel le gestionnaire d'événement est attaché:

google.maps.event.addListener(marker, 'click', function () {
   // do something with this marker ...
   this.setTitle('I am clicked');
});

thishere fait référence à l'objet marqueur particulier.

39
Glenn Mohammad

Vous devez ajouter l’auditeur à chaque marqueur, mais vous pouvez le rendre facile, par exemple. définir une fonction comme

function createMarker(pos, t) {
    var marker = new google.maps.Marker({       
        position: pos, 
        map: m,  // google.maps.Map 
        title: t      
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
       alert("I am marker " + marker.title); 
    }); 
    return marker;  
}

et appelez-le correctement:

var m1 = createMarker(new google.maps.LatLng(...), "m1");
var m2 = createMarker(new google.maps.LatLng(...), "m2");

ou en boucle, etc.

28
Jiri Kriz

J'ai réussi à faire cela en utilisant FusionTablesLayer. C'est un peu de travail de tout mettre en place correctement, mais une fois que vous avez terminé, c'est ultra rapide, même avec des milliers de marqueurs. 

Vous créez essentiellement une table publique dans Google Documents et l'interrogez depuis votre page Web. La carte est pré-générée sur les serveurs de Google, ce qui explique pourquoi elle fonctionne si bien.

Une page de démonstration complète:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Google Maps Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta charset="UTF-8">
  <style type="text/css">
    html, body, #map_canvas
    {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function initialize() 
    {
      var denmark = new google.maps.LatLng(56.010666, 10.936890);

      map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: denmark,
        zoom: 7,
        mapTypeId: 'roadmap'
      });

      layer = new google.maps.FusionTablesLayer({
        query: {
          select: 'Coordinates',
          from: '1234567'
        }
      });
      layer.setMap(map);

      google.maps.event.addListener(layer, 'click', function (event) { 
        alert('Hello World!'); });

    }
  </script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

Consultez cet article pour plus d'informations, "Trop de marqueurs!" de Luke Mahe et Chris Broadfoot de l'équipe Google Geo APIs. 

4
Jakob Gade

Si vous utilisez GoogleMaps v3.16 ou une version ultérieure, vous pouvez ajouter le gestionnaire d'événements à l'ensemble de la couche map.data.

var map = new google.maps.Map(document.getElementById("map-canvas"), options);
map.data.loadGeoJson('http://yourserver.com/path/to/geojson.json');
map.data.addListener('click', function(e) {
    // this - instance of the layer object, in this case - map.data
    // e.feature - instance of the feature object that initiated the event
    // e.latLng - the position of the event
});

voir: https://developers.google.com/maps/documentation/javascript/examples/layer-data-event

4
Boris Chervenkov

Pour développer Jiri, répondez purley à ceux qui souhaitent ajouter une étiquette personnalisée, etc. Dans l’esprit de Jiri post, en version abrégée:

    var m1 = createMarker({lat: -25.363, lng: 131.044}, "m1", "<div id=\"content\"><div id=\"siteNotice\"></div>  <h1 id=\"firstHeading\" class=\"firstHeading\">m1</h1> <div id=\"bodyContent\">Some info</div> </div>");

function createMarker(pos, t, d) {
    var marker = new google.maps.Marker({       
        position: pos, 
        map: map, 
        title: t      
    }); 
    google.maps.event.addListener(marker,"click", function() { 
        alert("I am marker " + marker.title); 
    new google.maps.InfoWindow({ content: d }).open(map, marker);

    }); 
    return marker;  
}

Supprimez l'alerte, juste là pour montrer l'action, etc. Comme avec l'information de Jiri, vous pouvez ajouter m2, m3, etc.

0
Pete - iCalculator

J'ai réussi à obtenir une réponse ici: Google Maps et leurs marqueurs

et une démo ici: http://jsfiddle.net/salman/bhSmf/

0
Barrie Reader

Cette façon la plus simple est la suivante:

google.maps.event.addListener(marker, 'click', function() {
var marker = this;
alert("Tite for this marker is:" + this.title);
});
0
Sandor

Ce que j'ai fait est, lorsque j'ajoute une nouvelle marker sur la carte et avant de l'insérer dans le tableau markers = [], j'ajoute simplement un écouteur marker.addListener('click', () => { // Do Something here});

Code complet:

// Adds a marker to the map and Push to the array.
    function addMarker(location) {
        var marker = new google.maps.Marker({
            position: location,
            icon: {
                url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
            },
            animation: google.maps.Animation.DROP,
            map: map
        });
        marker.addListener("click",
            () => {
                console.log("Marker Click Event Fired!");
            });
        markers.Push(marker);

    }

LIEN j'ai suivi!

Il était vraiment difficile pour moi de trouver une réponse spécifique à mon besoin. Mais celui-ci fonctionne maintenant et partout pour moi! :)

0
Arslan Ameer
/* Note: I have a set of data, and it is named by the variable data.
 * The variable data is an array
 */

//Here I get the length of the data
var dataLength = data.length;

//Then I iterate through all my pieces of data here
//NOTICE THAT THE KEYWORD let IS SO IMPORTANT HERE
for(let markerIterator = 0; markerIterator < dataLength; markerIterator++) {
    /* This creates a new google maps marker based on my data's latitude and 
     * longitude
     */
    var marker = new google.maps.Marker({
        position: { lat: data[markerIterator].latitude, lng: 
        data[markerIterator].longitude },
        map: map
    });

    google.maps.event.addListener(marker, 'click', function () {
        /* This will spit out the unique markerIterator value for each marker when 
         * clicked. It is a unique value because I defined markerIterator with the 
         * keyword let!
         */
        console.log(markerIterator); 

        // Use the keyword this to refer to each unique marker, for example:
        map.setCenter(this.getPosition());              
    });
}
0
Brandon Long