Carte Google Maps avec marqueur et infobulle (2/5)
Après avoir affiché une infobulle par simple clic sur un marqueur, on va la faire apparaître N secondes. Pour cette exemple j'ai paramétré l'affichage à 5 secondes.
Exemple de code javascript pour cette carte avec marqueur et infobulle
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
//***Plan d'accès ***//
latlng_c=[48.855141,2.341303] //"Point de centrage de la carte"//
var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("carte"),myOptions);
//************************************les markers******************************************************//
//marker1 : Paris
var marker1 = new google.maps.Marker();
marker1.setPosition(new google.maps.LatLng(48.855141,2.341303));
//marker1.setIcon("http://www...image.png");
//marker1.setShadow("http://www....shadow.png");
marker1.setIcon('http://webinfotuto.free.fr/rubriques/siteweb/GoogleMaps/images/markers/vert.png');
marker1.setShadow('http://webinfotuto.free.fr/rubriques/siteweb/GoogleMaps/images/markers/ombre.png');
marker1.setTitle("Paris");
marker1.setMap(map);
//***********************************infobulle par marker********************************************//
// On crée une infobulle
var infowindow1 = new google.maps.InfoWindow({ maxWidth: 300,
//On définit la position d'origine de l'infoWindow (la position du marqueur)
position: new google.maps.LatLng(48.855141,2.341303),
//On définit le texte à afficher dans l'infoWindow
content: " INSERER ICI DU CODE HTML POUR CETTE INFOBULLE " });
//On ajoute un listener d'événement : on écoute le clic sur le marqueur
google.maps.event.addListener(marker1, 'click', function() {
// Ouverture de l'infobulle
infowindow1.open(map, marker1);
setTimeout(function() { infowindow1.close(); }, 5000); // Infobulle affichée 5 secondes
});
//**************************************************************************************************//
}
</script>
|
|
Téléchargez le fichier de cette démonstration et adaptez le à votre convenance en modifiant les coordonnées de latitude et longitude ainsi que le code html pour l'infobulle.
Lire la suite »