Plusieurs marqueurs avec Google Maps
Rédigé par govez le 21 novembre 2010
Il est possible de définir plusieurs marqueurs sur les cartes Google Maps. Un clic sur l'un deux ouvre une « infobulle » que l'on peut personnaliser : ajouter du texte, un lien, une photo, etc.
Un exemple
Localisation des membres de ma famille
Comment faire ?
Définir les marqueurs
var locations = [
['Jérôme et Catherine Blondel', 49.898729,3.13606, 5],
['Laurent et Sabine Blondel', 50.684142,3.1360678, 4],
['Noël et Anne Marie Blondel', 49.953802, 2.360237, 3],
['Jean Luc et Catherine Blondel', 48.606369,2.886894, 2],
['Patrice et Marie Alix Blondel', 46.149513,6.410866, 1]
];
Définir l'infobulle
var infowindow = new google.maps.InfoWindow();
Demander l'affichage de l'infobulle après le clic pour chacun des marqueurs
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
Voici le code complet
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>multi-marqueurs</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 550px;"></div>
<script type="text/javascript">
<!--
var locations = [
['Jérôme et Catherine Blondel', 49.898729,3.13606, 5],
['Laurent et Sabine Blondel', 50.684142,3.1360678, 4],
['Noël et Anne Marie Blondel', 49.953802, 2.360237, 3],
['Jean Luc et Catherine Blondel', 48.606369,2.886894, 2],
['Patrice et Marie Alix Blondel', 46.149513,6.410866, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(47.4,1.6),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
-->
</script>
</body>
</html>
Et le résultat
Localisation des membres de ma famille
Classé dans : Xhtml - Mots clés : xhtml, googlemaps - 29 commentaires
Localisation des membres du club info
Rédigé par govez le 17 novembre 2010
Voici mon projet de localisation des membres du clubinfo.
Je souhaite publier une carte Google Maps qui permet de retrouver les adresses et les sites des membres du club info.
Vous trouverez maintenant un nouveau lien « Localiser les membres » qui vous donnera accès à la carte « Google Maps ».
Je souhaite publier une carte Google Maps qui permet de retrouver les adresses et les sites des membres du club info.
Vous trouverez maintenant un nouveau lien « Localiser les membres » qui vous donnera accès à la carte « Google Maps ».
Un aperçu du projet
Cliquez sur un repère (le pingouin par exemple), agrandissez la carte, déplacez-vous avec les curseurs ou la molette de la souris.
Si vous souhaitez participer à ce projet, vous devez m'envoyer quelques informations :
- vos coordonnées Google Maps (voir les explications plus bas)
- le titre de l'infobulle (en bleu sur la capture)
- le sous-titre (en orange sur la capture)
- une photo ou un logo (hauteur : 150px, largeur : 120px au format jpg ou png)
- le texte que vous souhaitez insérer (10 lignes maximum)
- l'adresse de votre site
- votre adresse mail
- le logo du marqueur (linux, windows, macos ou un de votre choix au format 32px x 32px à m'envoyer au format png ou jpg).
Vous pouvez évidemment choisir ne pas publier certaines informations ; (indiquez-moi celles que vous ne souhaitez pas publier).
Pour récupérer ses coordonnées Google Maps
- lancez dans un navigateur l'adresse : http://maps.google.fr/
- écrivez votre adresse précise dans recherche Google Maps
- avec la souris pointez sur votre maison, faites un clic droit et choisissez Centrer la carte ici (IMPORTANT)
- le nombre à récupérer s'obtient en cliquant sur lien (en haut à droite) ; il a la forme 46.157064,6.373701 et correspond à la latitude et la longitude du repère : c'est ce code qu'il faut m'envoyer.
Classé dans : Club info - Mots clés : clubinfo, googlemaps, xhtml - aucun commentaire
