Télécharger le code : Liste de marqueurs
Cet exemple ajoute des marqueurs ainsi qu'une liste de boutons permettant de sélectionner chaque marqueur.
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%; }
</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">
$(function(){
$('#maCarte').gmap3(
{
action: 'init',
center:[44.797916,-93.278046],
onces: {
bounds_changed: function(){
$(this).gmap3({
action:'getBounds',
callback: function (bounds){
if (!bounds) return;
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
add($(this), i, southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
}
}
});
}
}
}
);
function add($this, i, lat, lng){
$this.gmap3(
{
action : 'addMarker',
lat: lat,
lng: lng,
callback: function(marker){
var $button = $('<span> [ '+i+' ] </span>');
$button
.click(function(){
$this.gmap3({
action:'panTo',
args:[marker.position]
});
})
.css('cursor','pointer');
$('#panTo').append($button);
}
}
);
}
});
</script>
</head>
<body>
<div id="panTo"></div>
<div id="maCarte"></div>
</body>
</html>