web-dev-qa-db-fra.com

API Google Maps v3: Marqueurs de groupe?

J'utilise Google Maps avec API v3. J'ajouterai de nombreux marqueurs, maintenant la question est posée: est-il possible de regrouper les marqueurs? Par exemple, par ville? J'utilise un petit extrait pour créer une barre latérale avec des boutons de marqueurs.

Voici le code:

/**
 * map
 */
var mapOpts = {
  mapOpts: new google.maps.LatLng(60.28527,24.84864),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scaleControl: true,
  scrollwheel: false
}
var map = new google.maps.Map(document.getElementById("map"), mapOpts);
//  We set zoom and center later by fitBounds()



/**
 * makeMarker() ver 0.2
 * creates Marker and InfoWindow on a Map() named 'map'
 * creates sidebar row in a DIV 'sidebar'
 * saves marker to markerArray and markerBounds
 * @param options object for Marker, InfoWindow and SidebarItem
 * @author Esa 2009
 */
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];

function makeMarker(options){
  var pushPin = new google.maps.Marker({map:map});
  pushPin.setOptions(options);
  google.maps.event.addListener(pushPin, "click", function(){
    infoWindow.setOptions(options);
    infoWindow.open(map, pushPin);
    if(this.sidebarButton)this.sidebarButton.button.focus();
  });
  var idleIcon = pushPin.getIcon();
  if(options.sidebarItem){
    pushPin.sidebarButton = new SidebarItem(pushPin, options);
    pushPin.sidebarButton.addIn("sidebar");
  }
  markerBounds.extend(options.position);
  markerArray.Push(pushPin);
  return pushPin;
}

google.maps.event.addListener(map, "click", function(){
  infoWindow.close();
});


/**
 * Creates a sidebar item 
 * @constructor
 * @author Esa 2009
 * @param marker
 * @param options object Supported properties: sidebarItem, sidebarItemClassName, sidebarItemWidth,
 */
function SidebarItem(marker, opts){
  var tag = opts.sidebarItemType || "button";
  var row = document.createElement(tag);
  row.innerHTML = opts.sidebarItem;
  row.className = opts.sidebarItemClassName || "sidebar_item";  
  row.style.display = "block";
  row.style.width = opts.sidebarItemWidth || "120px";
  row.onclick = function(){
    google.maps.event.trigger(marker, 'click');
  }
  row.onmouseover = function(){
    google.maps.event.trigger(marker, 'mouseover');
  }
  row.onmouseout = function(){
    google.maps.event.trigger(marker, 'mouseout');
  }
  this.button = row;
}
// adds a sidebar item to a <div>
SidebarItem.prototype.addIn = function(block){
  if(block && block.nodeType == 1)this.div = block;
  else
    this.div = document.getElementById(block)
    || document.getElementById("sidebar")
    || document.getElementsByTagName("body")[0];
  this.div.appendChild(this.button);
}
// deletes a sidebar item
SidebarItem.prototype.remove = function(){
  if(!this.div) return false;
  this.div.removeChild(this.button);
  return true;
}

/**
 * markers and info window contents
 */
makeMarker({
  position: new google.maps.LatLng(60.28527,24.84864),
  title: "Vantaankoski",
  sidebarItem: "Vantaankoski",
  content: "Vantaankoski"
});   
makeMarker({
  position: new google.maps.LatLng(60.27805,24.85281),
  title: "Martinlaakso",
  sidebarItem: "Martinlaakso",
  content: "Martinlaakso"
});  
makeMarker({
  position: new google.maps.LatLng(60.27049,24.85366),
  title: "Louhela",
  sidebarItem: "Louhela",
  content: "Louhela"
}); 
makeMarker({
  position: new google.maps.LatLng(60.26139,24.85478),
  title: "Myyrmäki",
  sidebarItem: "Myyrmäki",
  content: "Myyrmäki"
});   
makeMarker({
  position: new google.maps.LatLng(60.24929,24.86128),
  title: "Malminkartano",
  sidebarItem: "Malminkartano",
  content: "Malminkartano"
});  
makeMarker({
  position: new google.maps.LatLng(60.23963,24.87694),
  title: "Kannelmäki",
  sidebarItem: "Kannelmäki",
  content: "Kannelmäki"
}); 
makeMarker({
  position: new google.maps.LatLng(60.23031,24.88353),
  title: "Pohjois-Haaga",
  sidebarItem: "Pohjois<br>Haaga",
  content: "Pohjois-Haaga"
});   
makeMarker({
  position: new google.maps.LatLng(60.21831,24.89354),
  title: "Huopalahti",
  sidebarItem: "Huopalahti",
  content: "Huopalahti"
});   
makeMarker({
  position: new google.maps.LatLng(60.20803,24.92039),
  title: "Ilmala",
  sidebarItem: "Ilmala",
  content: "Ilmala"
});    
makeMarker({
  position: new google.maps.LatLng(60.19899,24.93269),
  title: "Pasila",
  sidebarItem: "Pasila",
  content: "Pasila"
});  
makeMarker({
  position: new google.maps.LatLng(60.17295,24.93981),
  title: "Helsinki",
  sidebarItem: "Helsinki",
  content: "Helsinki"
});    




/**
 *   fit viewport to markers
 */
map.fitBounds(markerBounds);
javascriptgoogle-mapsgoogle-maps-api-3
24
Johannes

Voici la version v3 :

Marker Clusterer

... La bibliothèque crée et gère des grappes par niveau de zoom pour de grandes quantités de marqueurs. Ceci est une implémentation V3 de MarkerClusterer V2.

Parcourir Versions publiées ou Versions de développement ...

10
jeremygerrits

Mieux encore, utilisez MarkerClustererPlus. Beaucoup d'améliorations et il intègre de nombreuses corrections de bugs pour les problèmes trouvés dans le MarkerClusterer d'origine.

9
user1469420

Voir ceci: Introduction à la mise en cluster de marqueurs avec Google Maps et MarkerClusterer ici: http://code.google.com/p/gmaps-utility-library-dev/ .

7
Udi

Vous devez utiliser markerclusterer ( http://gmaps-utility-library-dev.googlecode.com/svn/trunk/markerclusterer/docs/examples.html ). Un exemple de travail:

function drop() {
  for (var i = 0; i < markere.length; i++) {
    //setTimeout(function() {//for maps with few markers works great to add them with delay
    addMarker();
    //}, i * 200);
  }

  //group markers; page loads a lot faster when you have many markers
  var mc = new MarkerClusterer(map, markers);//group with markerclusterer (don't forget to include the js file)

  //make sure they fit screen
  var bounds = new google.maps.LatLngBounds();
  for(var i=0;i<markers.length;i++){
    bounds.extend(markers[i].getPosition());
  }
  map.fitBounds(bounds); 
}


function addMarker() {
    /*before pushing we set some properties */
    var marker = new google.maps.Marker({
        position: markere[i],
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP,
        flat: false,
        icon: "./wp-content/themes/clear/images/obiectiv.png",
        title: denumire[i]
    })
    /*set infowindow*/
    var content = "<p><strong>"+denumire[i]+"</strong></p>";
    var catStr = '';
    var nrCat = categorii[i].length;
    for (var j = 0; j < nrCat; j++) {
        catStr += categorii[i][j];
    }
    content+= "<p>"+catStr+"</p>";
    nrCatStr = "";
    if (nrCat==1) nrCatStr = "categorie"
    else if (nrCat>1) nrCatStr = "categorii";
    content+= "<p>"+nrCat+" "+nrCatStr+"</p>";        
    /* //I don't use mouseover/mouseout
    google.maps.event.addListener(marker, 'mouseover', function() {
        this.infowindow.open(map, this);
    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        this.infowindow.close(map, this);
    });*/
    //google.maps.event.addListener(marker, 'click', toggleBounce);
    infowindow = null;
    google.maps.event.addListener(marker, 'click', function() {
        if (infowindow) {
            infowindow.close();
        }
        infowindow = new google.maps.InfoWindow({
            content: content
        });
        google.maps.event.addListener(infowindow, 'closeclick', function() {
            stopBounce(markers);
        });
        infowindow.open(map, this);

        toggleBounce(this);
    });

    markers.Push(marker);
    i++;
}/**/


drop();//drop the markers

function toggleBounce(obj) {
    if (obj.getAnimation() != null) {
        obj.setAnimation(null);
    } else {
        stopBounce(markers);//stop bouncing markers
        obj.setAnimation(google.maps.Animation.BOUNCE);
    }
}

function stopBounce(markers){
    for (var k = 0; k < markers.length; k++) {
        if (markers[k].getAnimation() != null) { markers[k].setAnimation(null); }
    }        
}
2
conualfy

L'extrait de code ci-dessous peut faire le travail pour vous.

function codeAddress() {
 var address = document.getElementById('address').value;
    geocoder.geocode({
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var myOptions = {
                zoom: 16,
                center: results[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            if(!map)    {
            map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);}

            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

            bounds.extend(marker.position);
            map.fitBounds(bounds);
             google.maps.event.addListener(marker,'mouseover',   ( function(marker) {
            return function() {
               var infowindow = new google.maps.InfoWindow();
              //  alert("hi");
                var content = '<div class="map-content"><h3>' + address + '</h3> </div>';
              infowindow.setContent(content);
              infowindow.open(map, marker);
            }
          })(marker));
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}
1
user3469813

Le code Google est obsolète conformément à 

http://google-opensource.blogspot.com.es/2015/03/farewell-to-google-code.html

Toutes les bibliothèques mentionnées dans les réponses précédentes ont donc migré vers GitHub. Vous pouvez les trouver à

https://github.com/googlemaps/v3-utility-library

0
xomena