Carte Google Maps et marqueur cliquable
La carte est maintenant balisée par un marqueur centré sur la ville de Paris. Nous allons pouvoir cliquer dessus et faire apparaître une infobulle fixe que l'on fermera en recliquant sur la petite croix dans le coin supérieur droit.
On verra ensuite comment faire apparaître cette infobulle seulement quelques secondes ou la faire apparaître uniquement au survol de la souris au dessus du marqueur.
Exemple de code javascript pour cette carte avec marqueur
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
//***Coordonnées***//
latlng=[48.855141,2.341303] //"Point de centrage de la carte"//
var latlng = new google.maps.LatLng(latlng[0],latlng[1]);
var parametres = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("carte"),parametres);
//************************************le marqueur******************************************************//
//marker1 : Paris
var marker1 = new google.maps.Marker();
marker1.setPosition(new google.maps.LatLng(48.855141,2.341303));
marker1.setIcon('http://webinfotuto.free.fr/rubriques/siteweb/GoogleMaps/images/markers/vert.png');
// marker1.setShadow('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() {
google.maps.event.addListener(marker1, 'click', function() {
// Ouverture de l'infobulle en cliquant
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 »