Carte Google Maps avec marqueur et infobulle (3/5)
Autre exemple mais avec un affichage de l'infobulle au passage de la souris au dessus du marqueur. L'infobulle s'affiche au survol de la souris sur le marqueur vert.
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, 'mouseover', function() {
// Ouverture de l'infobulle
infowindow1.open(map, marker1);
});
//**************************************************************************************************//
}
</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 »