Voici une manière rapide de créer des cartes Google Maps dans Blogger. Plus généralement, j'ai écris ces quelques lignes pour les Webmasters en herbe qui, comme moi, ne comprennent rien à la programmation mais aimeraient bien, tout de même, insérer des cartes Google Maps sur leur site.
L'API Google Maps supporte maintenant l'utilisation des Mapplets (Maps + Gadgets). Par rapport à l'utilisation classique des "Google Maps", leur fonctionnement est souvent plus intuitif. Une documentation complète est visible à cette adresse : http://www.google.com/apis/maps/documentation/index.html#Mapplets. Notez que l'API utilisée est la version 2.
Il y a, à chaque fois, un lien vers un exemple au format HTML. Il suffit de l'ouvrir dans une nouvelle fenêtre ou un nouvel onglet puis d'afficher la source. Vous n'avez plus ensuite qu'à adapter le code en fonction de ce que vous voulez obtenir.
Afin d'intégrer une carte Google Maps dans votre Blog sur Blogger, la solution, à mon sens, la plus simple est d'appeler la page HTML que vous avez créée dans un iFrame. Afin d'héberger la page HTML de départ, vous pouvez utiliser un service comme Google Page Creator. Il suffit de copier les lignes de code dans le Bloc-notes Windows puis d'enregistrer le fichier avec une extension HTML.
Dans Google Page Creator, chargez simplement votre fichier qui aura alors ce type d'adresse URL : http://jeannoel.anderruthy.googlepages.com/GoogleMaps1.html :
Signalons qu'il n'apparaîtra pas dans votre espace de travail ("Site Manager").
Le code à insérer dans votre Blog sera donc celui-ci :
<iframe src=" http://jeannoel.anderruthy.googlepages.com/GoogleMaps1.html " frameborder="0" scrolling="no" width="400" height="200"> </iframe>
Cela nous donne ceci :
Il y a quatre paramètres principaux :
Prenons l'exemple d'un lieu possédant ces coordonnées géographiques : 48.825288 et 2.349701 (le 87 rue Bobillot à Paris).
Voici un exemple de départ. Si vous disposez d'une page HTML déjà existante, vous n'avez pas à modifier les déclarations d'en-têtes. Par ailleurs et afin de tester les différents scripts, il suffit simplement de remplacer à chaque fois les lignes de codes placées entre var= et les deux dernières accolades (que vous ne devez pas supprimer puisqu'elles ferment celles qui ont été initiées par ces deux déclarations : function load(){if (GBrowserIsCompatible()) {).
Dans cet exemple, nous nous sommes contentés de définir un centre en indiquant la latitude et la longitude suivies du niveau de zoom (13).
Par ailleurs, la carte apparaît dans un cadre défini de 400 pixels de large sur 200 pixels de hauteur.
Vous provoquez l'affichage de votre carte en utilisant la déclaration onload=…
Imprimer un mouvement à votre carte :
L'exemple suivant affiche une carte, attend deux secondes puis se déplace vers un nouveau point. Voici un exemple.
Ajouter un contrôle à votre carte :
Utilisez ce type de syntaxe afin d'afficher :
Définir un événement :
Dans cet exemple, la latitude et la longitude s'afficheront automatiquement dans votre carte Google Maps. Notez que cette ligne de code a aussi été ajoutée :
<div id="message"> </div>
La liste des événements que vous pouvez définir est visible ici :
http://www.google.com/apis/maps/documentation/reference.html#Events_GMap Il y en a une masse !
Créer une info-bulle :
Voici un exemple permettant d'ajouter une info-bulle à votre carte Google Maps.
Créer des marqueurs :
Nous prenons l'exemple des icônes de Google Ride Finder… Voici un exemple ajoutant de manière aléatoire des marqueurs à votre carte Google Maps.
Créer des événements :
Un internaute pourra placer des marqueurs sur votre carte. Voici une carte Google Maps permettant aux internautes de les personnaliser. Il y a plus d'informations sur les événements sur cette page : http://www.google.com/apis/maps/documentation/index.html#Events_overview.
Utiliser des classes d'icônes :
En voici un exemple.
Ajouter des onglets à une fenêtre d'information :
Voici une carte Google Maps affichant une fenêtre composée de plusieurs onglets.
Utiliser un fichier XML dans une carte :
Le principe consiste à créer un fichier XML avec les différentes coordonnées. Il ressemblera à celui-ci :
<markers>
<marker lat="48.825288" lng="2.349701" />
<marker lat="48.835288" lng="2.349701" />
<marker lat="48.845288" lng="2.349701" />
<marker lat="48.855288" lng="2.349701" />
</markers>
Nommez-le, dans cet exemple, base.xml. Nous allons maintenant créer un code qui va récupérer le fichier et afficher les marqueurs dans une carte Google Maps. N'oubliez pas d'adapter le chemin vers le fichier base.xml en fonction de votre configuration.
Créer des contrôles personnalisés :
Un exemple est disponible à cette adresse : http://www.google.com/apis/maps/documentation/customcontrol.html.
Ajouter une forme sur la carte :
Un exemple est disponible à cette adresse : http://www.google.com/apis/maps/documentation/customoverlay.html.
Superposer un fichier KML sur une carte Google Maps :
Les fichiers KML et GeoRSS XML sont supportés. Un exemple est visible à cette adresse : http://www.google.com/apis/maps/documentation/kmlOverlay.html ou ici : http://www.google.com/apis/maps/documentation/geoRSSOverlay.html.
Ajouter les informations de trafic :
Un exemple est visible à cette adresse : http://www.google.com/apis/maps/documentation/trafficOverlay.html.
Créer une page structurée d'adresses :
Un exemple complet est visible à cette adresse : http://www.google.com/apis/maps/documentation/geocoder2.html.
L'API Google Maps supporte maintenant l'utilisation des Mapplets (Maps + Gadgets). Par rapport à l'utilisation classique des "Google Maps", leur fonctionnement est souvent plus intuitif. Une documentation complète est visible à cette adresse : http://www.google.com/apis/maps/documentation/index.html#Mapplets. Notez que l'API utilisée est la version 2.
Il y a, à chaque fois, un lien vers un exemple au format HTML. Il suffit de l'ouvrir dans une nouvelle fenêtre ou un nouvel onglet puis d'afficher la source. Vous n'avez plus ensuite qu'à adapter le code en fonction de ce que vous voulez obtenir.
Afin d'intégrer une carte Google Maps dans votre Blog sur Blogger, la solution, à mon sens, la plus simple est d'appeler la page HTML que vous avez créée dans un iFrame. Afin d'héberger la page HTML de départ, vous pouvez utiliser un service comme Google Page Creator. Il suffit de copier les lignes de code dans le Bloc-notes Windows puis d'enregistrer le fichier avec une extension HTML.
Dans Google Page Creator, chargez simplement votre fichier qui aura alors ce type d'adresse URL : http://jeannoel.anderruthy.googlepages.com/GoogleMaps1.html :
- Dans la rubrique Upload stuff, cliquez sur le bouton Parcourir…
- Sélectionnez votre fichier HTML puis cliquez sur le bouton Ouvrir…
Signalons qu'il n'apparaîtra pas dans votre espace de travail ("Site Manager").
Le code à insérer dans votre Blog sera donc celui-ci :
<iframe src=" http://jeannoel.anderruthy.googlepages.com/GoogleMaps1.html " frameborder="0" scrolling="no" width="400" height="200"> </iframe>
Cela nous donne ceci :
Il y a quatre paramètres principaux :
- Width : définit la largeur de la fenêtre ;
- Height : définit la hauteur de la fenêtre ;
- Scrolling : supprime les barres d'ascenseur ;
- Frameborder : permet d'afficher ou non la bordure du volet.
Prenons l'exemple d'un lieu possédant ces coordonnées géographiques : 48.825288 et 2.349701 (le 87 rue Bobillot à Paris).
Voici un exemple de départ. Si vous disposez d'une page HTML déjà existante, vous n'avez pas à modifier les déclarations d'en-têtes. Par ailleurs et afin de tester les différents scripts, il suffit simplement de remplacer à chaque fois les lignes de codes placées entre var= et les deux dernières accolades (que vous ne devez pas supprimer puisqu'elles ferment celles qui ont été initiées par ces deux déclarations : function load(){if (GBrowserIsCompatible()) {).
Dans cet exemple, nous nous sommes contentés de définir un centre en indiquant la latitude et la longitude suivies du niveau de zoom (13).
Par ailleurs, la carte apparaît dans un cadre défini de 400 pixels de large sur 200 pixels de hauteur.
Vous provoquez l'affichage de votre carte en utilisant la déclaration onload=…
Imprimer un mouvement à votre carte :
L'exemple suivant affiche une carte, attend deux secondes puis se déplace vers un nouveau point. Voici un exemple.
Ajouter un contrôle à votre carte :
Utilisez ce type de syntaxe afin d'afficher :
- La barre de navigation (GSmallMapControl) ;
- Les boutons Plan, Satellite et Mixte (GMapTypeControl).
Définir un événement :
Dans cet exemple, la latitude et la longitude s'afficheront automatiquement dans votre carte Google Maps. Notez que cette ligne de code a aussi été ajoutée :
<div id="message"> </div>
La liste des événements que vous pouvez définir est visible ici :
http://www.google.com/apis/maps/documentation/reference.html#Events_GMap Il y en a une masse !
Créer une info-bulle :
Voici un exemple permettant d'ajouter une info-bulle à votre carte Google Maps.
Créer des marqueurs :
Nous prenons l'exemple des icônes de Google Ride Finder… Voici un exemple ajoutant de manière aléatoire des marqueurs à votre carte Google Maps.
Créer des événements :
Un internaute pourra placer des marqueurs sur votre carte. Voici une carte Google Maps permettant aux internautes de les personnaliser. Il y a plus d'informations sur les événements sur cette page : http://www.google.com/apis/maps/documentation/index.html#Events_overview.
Utiliser des classes d'icônes :
En voici un exemple.
Ajouter des onglets à une fenêtre d'information :
Voici une carte Google Maps affichant une fenêtre composée de plusieurs onglets.
Utiliser un fichier XML dans une carte :
Le principe consiste à créer un fichier XML avec les différentes coordonnées. Il ressemblera à celui-ci :
<markers>
<marker lat="48.825288" lng="2.349701" />
<marker lat="48.835288" lng="2.349701" />
<marker lat="48.845288" lng="2.349701" />
<marker lat="48.855288" lng="2.349701" />
</markers>
Nommez-le, dans cet exemple, base.xml. Nous allons maintenant créer un code qui va récupérer le fichier et afficher les marqueurs dans une carte Google Maps. N'oubliez pas d'adapter le chemin vers le fichier base.xml en fonction de votre configuration.
Créer des contrôles personnalisés :
Un exemple est disponible à cette adresse : http://www.google.com/apis/maps/documentation/customcontrol.html.
Ajouter une forme sur la carte :
Un exemple est disponible à cette adresse : http://www.google.com/apis/maps/documentation/customoverlay.html.
Superposer un fichier KML sur une carte Google Maps :
Les fichiers KML et GeoRSS XML sont supportés. Un exemple est visible à cette adresse : http://www.google.com/apis/maps/documentation/kmlOverlay.html ou ici : http://www.google.com/apis/maps/documentation/geoRSSOverlay.html.
Ajouter les informations de trafic :
Un exemple est visible à cette adresse : http://www.google.com/apis/maps/documentation/trafficOverlay.html.
Créer une page structurée d'adresses :
Un exemple complet est visible à cette adresse : http://www.google.com/apis/maps/documentation/geocoder2.html.
3 commentaires:
31 juillet 2007 à 18:04
31 juillet 2007 à 18:08
Page très interressante. Reste plus qu'à comprendre comment fusionner :
"Utiliser un fichier XML dans une carte" dans lequel il y aurait les informations de texte des infobulles et des types de markers.
Merci en tout cas
31 juillet 2007 à 19:34
C'est vrai que la synthèse entre les différents méthodes nécessite pas mal d'attention et de logique ! Mais avec un peu de temps devant soi, ce n'est pas monstrueux... Faites des essais en vous servant des différents codes sources !
Enregistrer un commentaire