Accueil > [old] Information > Archives > Technologies > Archives > Veille & Expérimentations > Géolocalisation > Google Maps - présentation

Google Maps - présentation

mardi 16 mai 2006, par Patrick Vincent

St Laurent de Chamousset et sa région

Présentation

GoogleMaps est une application Web recouvrant un outil d’annuaire et des données cartographiques mondiales : http://maps.google.fr/.

La base de données de Google Map peut être interrogée comme un service de renseignement classique pour localiser un emplacement, une entreprise, calculer ou itinéraire, ou à l’inverse pour rechercher visuellement des lieux préalablement indexés sur une carte.

La valeur ajoutée de l’outil réside dans le recouvrement carte / annuaire permettant de multiplier les points de vue, la souplesse d’un moteur de recherche à la google (le mot "pizza" entré en lien avec un nom de ville indique immédiatement l’emplacement des restaurateurs de pizza sur une carte) et l’intégration de la technologie ajax rendant rééllement efficace les raffraîchissements de pages. Ces caractéristiques n’en font pourtant pas une exception alors que la plupart des services équivalents (PagesJaunes.fr + Mappy) développent des outils allant dans cette direction.

La réelle nouveauté de Google Map réside dans les possibilités de personnalisation et d’intégration de l’outil dans des pages de son propre site Web.

Comme le montre l’exemple ci-dessus, une carte dynamique utilisant AJAX peut être intégrée à un corps de page HTML via un simple appel à une API distante. L’affichage de la carte est ensuite gérée par l’appel à des fonctions javascript la rendant paramétrable pour différents points :
– coordonnées initiale de la carte affichée
– gestion des barres d’outil
– réponse aux actions utilisateurs
– affichage des marqueurs locaux textuels
– déplacements de la carte sur des points distincts à intervalles réguliers

Méthode

1. Afin d’intégrer une carte Google Maps à votre page Web, il faut se procurer une clef d’accès aux fonctions API pour l’adresse de votre site Web : http://www.google.fr/apis/maps/sign...

2. Créer une page Web comportant le "Hello World" de Google Maps : l’affichage d’une carte centrée sur les coordonnées de votre ville (disponibles ici). Mettre la page Web en ligne sur votre serveur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(45.7384,4.4643), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

La fonction map.setCenter(new GLatLng(45.7384,4.4643), 13) ; indique les coordonnées de la fenêtre accompagnées du niveau de zoom (le chiffre est proportionnel à votre éloignement du sol).

3. Vous pouvez ensuite consulter la documentation jointe, ainsi que le code source de l’exemple que j’ai développé.
Un peu de technique et d’imagination devrait permettre de créer aisément des cartes enrichies en contenu local ou des animations de présentation d’une région.
Une fonction non intégrée ici mais présentée dans l’API v2 de Google Maps permets à l’utilisateur d’ajouter ses propres marqueurs à la carte : http://www.google.fr/apis/maps/docu....

Liens

Manuel du développeur Google Map
– Manuel de Référence de l’API Gmap2
– Concepts et Exemples
– Excellent tutorial
– Le Wiki Mapki

Trouver les coordonnées d’une ville
– http://www.multimap.com/

Howto’s
– Faire des tracés sur mesure
– Ajouter votre carte propre

Exemple commenté

Code source commenté de la carte ci-dessus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title> <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=xxx"></script>
    <script type="text/javascript">
   //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) 
      {

/*Crèe une carte aux coordonnées indiquées avec comme troisième paramètre le niveau de zoom*/
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(45.7384,4.4643), 12);

/*Ajoute les barres d'outil de contrôle du Zoom et du Type d'affichage Plan ou Satellite*/
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

/*Affiche les coordonnées de la carte à chaque recentrage dans un div nommé message situé sous la carte*/
GEvent.addListener(map, "moveend", function() {
  var center = map.getCenter();
  document.getElementById("message").innerHTML = center.toString();
});

/*Ouvre une fenêtre d'information texte au centre du plan au chargement*/
map.openInfoWindow(map.getCenter(),
document.createTextNode("St Laurent de Chamousset, une région aux activités riches et variées"));

/*Ajoute des marqueurs sur la carte aux coordonnés passées en paramètre*/
var point = new GLatLng(46.7526, 4.4236);
map.addOverlay(new GMarker(point));

/*Ajoute des marqueurs avec texte s'ouvrant lors des clics. La fonction createMarker est à déclarer une fois*/
function createMarker(point, texte)
{
  var marker = new GMarker(point);
  map.addOverlay(marker);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(texte);
  });
}
/*Déclaration d'un marqueur*/
var point = new GLatLng(45.76201437142477, 4.4968414306640625);
createMarker(point, "Bruliolles et ses beaux paturages");

/*Ajoute des marqueurs avec texte s'ouvrant au bout d'un certain temps. Permets de faire une visite automatique. La fonction CreateMarkerErasme est à déclarer une fois*/
function createMarkerErasme(point, texte, delais) 
{
  var marker = new GMarker(point);
  map.addOverlay(marker);
  GEvent.addListener(marker, "click", function() 
  { marker.openInfoWindowHtml(texte);  });
  window.setTimeout(function() 
  { marker.openInfoWindowHtml(texte); }, delais);  
}
/*Déclaration des marqueurs*/
var point = new GLatLng(45.7526, 4.4236);
createMarkerErasme(point, "Le centre Erasme est la Mission Technologies de l'Information du Conseil Général du Rhône",5000);

var point = new GLatLng(45.7157, 4.396);
createMarkerErasme(point, "Ici on mange du bon cochon",10000);

var point = new GLatLng(45.73781803408217, 4.464569091796875);
createMarkerErasme(point, "Et tous les lundis matins, le marché aux bestiaux",15000);

      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 550px; height: 500px"></div>
    Coordonnées : <div id="message"></div>
<br>
  </body>
</html>

Messages

1. > Google Maps, 9 mai 2006, 19:31, par Thomas de Pomeys

en effet, cette appli est excellente... On

s’en sert déja pour faire la cartographie

des réseaux wifi associatifs a l’échelle

nationale ...
voir http://carte.wireless-fr.org/ qui a été

faite sur proposition de Pomeys sans fil

voir aussi

http://www.montpellier-wireless.com/googlema

ps/ avec des infos dynamiques...

les usages vont pas mal décoller a mon avis

pour toutes les assoc qui ont des membres un

peu partout, les familles ou entreprises,

etc..

des hacks pour spip ont été aussi

développés, de mon coté, je place les points

grace a une base mysql (en ayant la base de

correpondance ville coordonée)

Voir en ligne : site perso
2. > Google Maps, 11 mai 2006, 11:36, par Yves Armel MARTIN

Je vous signale un exemple d’implémentation de Google Map qui permet de placer dynamiquement des points sur la carte : http://www.thompsonbd.com/guestmap.php

En tant que tel, il s’agit d’une application pour localiser les visiteurs-commentateurs d’un site, mais on peut utiliser le code pour pas mal d’autres choses...
- 1. > > Google Maps, 11 mai 2006, 22:08, par thomas
  
  Sans aller si loin, jetez un oeil sur http://villeneuve-tolosane.net/~marc/gmap/test2.php Cela permet de placer dynamiquement des liens wifi avec des couleurs de traits différents pour le réseau mesh d’un collègue de la RAN.
  
  On a aussi un projet autre ou l’on va s’en servir pour :
  
  – placer les membres d’un groupe sur une carte afin de gèrer les priorités de convocations
  
  – le recrutement afin que chacun sache ou est l’unité la plus proche de chez lui
  
  – voir les unités sur le terrain
  
  tout cela a partir d’un base de données ou sont plusieurs milliers de personnes, une centaine de lieux... Ca promet donc ;)
3. > Google Maps, 12 mai 2006, 19:44, par yann

Comment avez vous intégré le code google maps dans un site en spip ? Est-ce qu’il faut passer par une integration du code htlm dans un article ou bien faire deux fichiers php3 et html particulier pour cet article ? Je me casse les dents dessus depuis heures ?
- 1. > Google Maps, 16 mai 2006, 15:23, par Patrick VINCENT
  Il n’est pas recommandé de faire des modifications du noyau de SPIP, mais celà reste néanmoins possible pour contourner les exceptions de traitement php et javascript (voir notamment la fonction interdire_scripts contenue dans /ecrire/inc_texte.php3).
  
  Si les codes vous intéressent, je peux vous les fournir pour la version 1.8.2g de SPIP mais je
  vous conseille plutôt de créer un fichier html à part et de l’inclure dans votre page SPIP
  par le biais d’une iframe :
  <iframe src="../squelette/google_maps.html" frameborder=0 height=600px width=550px scrolling=no> </iframe>
4. De Google Maps à Google Mars, 17 mai 2006, 17:27, par pvincent

De nouveaux horizons pour l’application phare de Google présentée ci-dessus :
– Google Mars (le plan de Mars sur la base des données Nasa) : http://www.google.com/mars/
– Sketchup (modélisation 3D interfaçable avec Google Maps) : http://www.skechtup.com
- 1. De Google Maps à Google Mars, 31 août 2006, 12:46, par Securipole
  
  Bonjour Patrick,
  
  Il n’y a pas de retour à la ligne pour l’info-bulle, ce qui peut poser un soucis.
  
  Il faut inscrire ceci :
  map.openInfoWindow(map.getCenter(), "Localisation de Agenais .fr" + ’
  ’ + "site pour la recherche des professionnels" + ’
  ’ + "dans le Lot et Garonne - Agen (47000)") ;
  
  voir sur http://www.agenais.fr/google.thm
  
  Au lieu d’utiliser createTextNode :
  
  document.createTextNode("Agenais.fr - site d’informations et de recherches des professionnels du Lot et GAronne - evennement autour de la ville d’Agen")) ;
  
  A+
  Phil WIG
  
  Voir en ligne : astuce Google Maps
5. Google Maps, 26 février 2007, 14:13, par telecofr

Salut,

Tout d’abord, bravo pour ces explications très détaillées !!!

je voudrais savoir comment faire pour effacer la dernière info-bulle après la fin de la visite automatique ?
Je préférerais qu’il n’y ai plus d’info-bulles d’afficher après cette visite automatique.

Merci de votre aide !
6. Google Maps - présentation, 29 mai 2008, 16:10, par negoce

Bonjour,

je me permet de vous contacter car j’ai trouvé votre code de création de site map google fort bien et clair.

d’ailleurs votre code est sur un site de test.

Merci pour ce très bon script !!

une petite question,

j’ai vu q’il est possible de remplacer les icone fleche google par nos propres icones, avez vous une idée ??

lien d’un site où j’ai vu le basard :

http://www.residencespicardes.com

à bientôt...

Voir en ligne : google map

Un message, un commentaire ?

Forum sur abonnement

Pour participer à ce forum, vous devez vous enregistrer au préalable. Merci d’indiquer ci-dessous l’identifiant personnel qui vous a été fourni. Si vous n’êtes pas enregistré, vous devez vous inscrire.

Connexion | S’inscrire | mot de passe oublié ?