Télécharger le code : Marqueurs animés
Cet exemple reprend la démonstration disponible sur http://www.svennerberg.com
Vous pouvez ajouter des marqueurs puis les animer ou les arrêter.
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>
#maCarte{
width: 75%;
height: 350px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
<script type="text/javascript">
$(function(){
$('#maCarte').gmap3({
action: 'init',
options:{
center:[57.8, 14.0],
zoom: 6
},
callback: function(){
$('#dropMarkers').click(dropMarkers);
$('#startDance').click(startDance);
$('#stopDance').click(stopDance);
}
});
});
function dropMarkers(){
var map = $('#maCarte').gmap3('get'),
sw = map.getBounds().getSouthWest(),
ne = map.getBounds().getNorthEast(),
i;
for (i = 0; i < 10; i++) {
setTimeout(function() {
var lat = Math.random() * (ne.lat() - sw.lat()) + sw.lat(),
lng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
$('#maCarte').gmap3({
action: 'addMarker',
latLng:[lat, lng],
options:{
draggable: true,
animation: google.maps.Animation.DROP
}
});
}, i * 200);
}
}
function startDance() {
var i, markers = $("#maCarte").gmap3({action:'get', name:'marker', all:true});
for (i in markers) {
(function(m, i){
setTimeout(function() {
m.setAnimation(google.maps.Animation.BOUNCE);
}, i * 200);
})(markers[i], i);
}
}
function stopDance() {
var i, markers = $("#maCarte").gmap3({action:'get', name:'marker', all:true});
for (i in markers) {
if (markers[i].getAnimation() != null) {
markers[i].setAnimation(null);
}
}
}
</script>
</head>
<body>
<input type="button" id="dropMarkers" value="Faire chuter les marqueurs" />
<input type="button" id="startDance" value="Faire sauter les marqueurs" />
<input type="button" id="stopDance" value="Stopper l'animation !" />
<div id="maCarte"></div>
</body>
</html>