Télécharger le code : Marqueurs et Clusters pour Google Maps
Cet exemple permet de géolocaliser une liste de magasins situés en France, en utilisant la technique du clustering.
Cette liste est stockée dans un tableau nommé 'macDoList' dans ce fichier: mcdo.js.
Si vous ouvrez ce fichier, vous constaterez que chaque ligne comporte des données destinées à être affichées dans une infobulle personnalisée liée au marqueur.
Pour afficher les clusters, différentes catégories sont définies dans le fichier CSS (cluster, cluster-1, groupe-2, cluster-3).
Double-cliquez sur les clusters ou passez votre souris sur un marqueur pour voir s'afficher une info-bulle personnalisée.
Carte
Code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8"/>
<title>Votre titre de page</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#maCarte{ height: 350px; width: 100%; }
/* cluster */
.cluster{
color: #FFFFFF;
text-align:center;
font-family: Verdana;
font-size:14px;
font-weight:bold;
text-shadow: 0 0 2px #000;
-moz-text-shadow: 0 0 2px #000;
-webkit-text-shadow: 0 0 2px #000;
}
.cluster-1{
background: url(http://www.votredomaine.fr/images/m1.png) no-repeat;
line-height:50px;
width: 50px;
height: 40px;
}
.cluster-2{
background: url(http://www.votredomaine.fr/images/m2.png) no-repeat;
line-height:53px;
width: 60px;
height: 48px;
}
.cluster-3{
background: url(http://www.votredomaine.fr/images/m3.png) no-repeat;
line-height:66px;
width: 70px;
height: 56px;
}
/* infobulle */
.infobulle{
overflow: hidden;
cursor: default;
clear: both;
position: relative;
height: 34px;
padding: 0pt;
background-color: rgb(57, 57, 57);
border-radius: 4px 4px;
-moz-border-radius: 4px 4px;
-webkit-border-radius: 4px 4px;
border: 1px solid #2C2C2C;
}
.infobulle .bg{
font-size:1px;
height:16px;
border:0px;
width:100%;
padding: 0px;
margin:0px;
background-color: #5E5E5E;
}
.infobulle .text{
color:#FFFFFF;
font-family: Verdana;
font-size:11px;
font-weight:bold;
line-height:25px;
padding:4px 20px;
text-shadow:0 -1px 0 #000000;
white-space: nowrap;
margin-top: -17px;
}
.infobulle.drive .text{
background: url(http://www.votredomaine.fr/images/drive.png) no-repeat 2px center;
padding:4px 20px 4px 36px;
}
.arrow{
position: absolute;
left: 45px;
height: 0pt;
width: 0pt;
margin-left: 0pt;
border-width: 10px 10px 0pt 0pt;
border-color: #2C2C2C transparent transparent;
border-style: solid;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
<script type="text/javascript" src="http://www.votredomaine.fr/js/mcdo.js"></script>
<script type="text/javascript">
$(function(){
$('#maCarte').gmap3(
{
action: 'init',
options:{
center:[46.578498,2.457275],
zoom: 5,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
},
{
action: 'addMarkers',
radius:100,
markers: macDoList,
clusters:{
// Ce style sera utilisé pour les clusters comportant plus de 0 marqueur
0: {
content: '<div class="cluster cluster-1">CLUSTER_COUNT</div>',
width: 53,
height: 52
},
// Ce style sera utilisé pour les clusters comportant plus de 20 marqueur
20: {
content: '<div class="cluster cluster-2">CLUSTER_COUNT</div>',
width: 56,
height: 55
},
// Ce style sera utilisé pour les clusters comportant plus de 50 marqueur
50: {
content: '<div class="cluster cluster-3">CLUSTER_COUNT</div>',
width: 66,
height: 65
}
},
marker: {
options: {
icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/icon_green.png')
},
events:{
mouseover: function(marker, event, data){
$(this).gmap3(
{
action:'clear', name:'overlay'
},
{
action:'addOverlay',
latLng: marker.getPosition(),
content:'<div class="infobulle'+(data.drive ? ' drive' : '')+'">' +
'<div class="bg"></div>' +
'<div class="text">' + data.city + ' (' + data.zip + ')</div>' +
'</div>' +
'<div class="arrow"></div>',
offset: {
x:-46,
y:-73
}
}
);
},
mouseout: function(){
$(this).gmap3({action:'clear', name:'overlay'});
}
}
}
}
);
});
</script>
</head>
<body>
<div id="maCarte"></div>
</body>
</html>