Télécharger le code : Utilisation des tags avec Google Maps
Cet exemple vous montre comment utiliser les tags avec les overlays de Google Maps.
Ici, les marqueurs sont ajoutés à l'aide des données contenues dans ce fichier : villes.js
Chaque marqueur utilise une région comme tag.
Cliquez dans les cases à cocher ou sur leurs intitulés pour afficher / masquer les marqueurs en fonction de leur région d'appartenance.
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: 50%;}
#dpts{height: 48%;}
</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/villes.js"></script>
<script type="text/javascript">
$(function(){
var data = [],
tmp = {},
regions = [],
$dpts = $("#dpts");
$.each(villes, function(i, ville){
data.push({
lat: ville.lat,
lng: ville.lng,
tag: ville.region,
data: ville
});
tmp[ ville.region ] = true;
});
for(var r in tmp){
regions.push(r);
}
regions = regions.sort();
for(var k in regions){
$dpts.append('<input id="chk'+k+'" type="checkbox" checked><label for="chk'+k+'">'+regions[k]+'</label><br />');
}
$('input', $dpts).change(function(){
var region = $('label[for='+$(this).attr('id')+']', $dpts).html(),
checked = $(this).is(':checked'),
map = $('#maCarte').gmap3('get'),
markers;
markers = $('#maCarte').gmap3({
action:'get',
name:'marker',
all: true,
tag:region
});
$.each(markers, function(i, marker){
marker.setMap( checked ? map : null);
});
});
$('#maCarte').gmap3(
{
action:'init',
options:{
center:[46.578498,2.457275],
zoom: 5
}
},
{
action:'addMarkers',
markers: data
}
);
});
</script>
</head>
<body>
<div id="maCarte"></div>
<div id="dpts"></div>
</body>
</html>