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

Téléchargement du dossier qui me sert d'exemple : famille.tar.gz

Classé dans : Xhtml - Mots clés : xhtml, googlemaps - 46 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 ».

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

Ce blog est sous licence Creative Commons. Vous pouvez utiliser les publications, les modifier et même les publier à nouveau sous une licence identique à celle-ci. Vous ne pouvez pas utiliser ces écrits à des fins commerciales.

Patrice Blondel 
			alias Govez ou le Pingouin des @lpes

J'ai 56 ans, je suis retraité de l'Éducation Nationale.
Passionné d'informatique, je suis autodidacte en la matière.
J'utilise GNU/Linux exclusivement depuis plus de 10 ans. J'ai choisi Debian (après avoir testé beaucoup d'autres distributions). La meilleure distribution est, à mon avis, celle que l'on maîtrise.

Pour vous y retrouver :

Je vous conseille d'utiliser d'abord le bouton « recherche » en tapant un mot clé. Vous pouvez également naviguer en affichant les articles par catégorie.

Les commentaires :

En indiquant votre adresse mail, vous ferez afficher votre avatar au début du commentaire.
Je me réserve le droit de supprimer les commentaires désobligeants, commerciaux ou sans intérêt.

Catégories

Archives

Mots clés

Derniers articles

Derniers commentaires

L'actualité Debian

LinuxFr.org