carte google maps dans un site

Pratique de plus en plus répandue: afficher une carte issue de Google Maps dans une page d'un site web, offre maintenant de nouvelles possibilités et une foule d'options.

Pour la géolocalisation, ou l'affichage de votre adresse grâce à Google Maps sur votre site internet, il existent actuellement deux moyens très faciles d'utilisation.

- Google Web Elements qui va vous donner de suite un code à insérer. Cliquez sur ce lien, prenez les temps de le personnaliser :

google maps

- Size : taille souhaitée
- Map type : le genre de carte voulu, routière, satellite, hybride ...
- Marker address : l'adresse du lieu (la précision possible dépend des données déjà collectées par Google)
- Marker title : Le nom que prendra le marqueur
- Preview : la carte générée

nota : vous n'êtes pas obligez de vous identifier pour réussir cette manipulation.

Vous obtenez en-dessous un code comme celui-ci :

"
"

qui va vous permettre en le plaçant dans le code source de votre page, d'afficher ceci:

Vous pouvez alors zoomer sur la carte, cliquer sur le marqueur, etc ...

Attention à bien les CGU auparavant ...

- Deuxième possibilité : Maps Google en français .

Entrez de la même manière dans la barre de recherches l'adresse voulue, chosissez votre option de visualisation, etc ... (ici : le toit du monde à 8848 mètres ...)

google maps : l'everest toit du monde

Vous avez également les choix possibles entre plan, satellite, relief et autres zoom. Lorsque vous jugez que votre carte est "valable" et va donc permettre de vous trouver facilement, cliquez, en haut à droite sur "lien" et choisissez l'option " Collez le code HTML pour l’intégrer sur un site Web", copiez alors ce code et collez-le dans votre page, côté code source pour obtenir ceci :

Agrandir le plan

A noter que vous pouvez également personnaliser d'une foule de manière votre 'carte' en cliquant sur "Personnaliser et prévisualiser la carte intégrée" qui vous ouvrira une fenêtre similaire à celle citée au début de l'article (mais en français ... )

carte google maps

autres liens pour la personnalisation de votre carte : simple et avancée (flash, JavaXscript, Api google, etc ...)

Dernier exemple, puisque je ne puis l'afficher ici (cliquez sur le lien), des options avec les photos, les webcams, SUPERBE ! (laissez le temps au navigateur de tout charger ... :) )

Tous les articles de blog, ainsi que leur contenu, comme indiqué en page index du site principal, sont mis à disposition sous les termes de la licence Creative Commons. Vous pouvez le copier, distribuer et modifier tant que cette note apparaît clairement. " source: longuetraine.fr - Paternité - Pas d'Utilisation Commerciale - Partage des Conditions Initiales à l'Identique 3.0 France ", ainsi qu'un lien vers la source .

4 commentaires

#1 jeudi 11 mars 2010 - 18:11 - unesourisetmoi a dit :

dans street view, autre option, les images concernant les données personnelles, par exemple immatriculation des véhicules sont même souvent 'floutées', certainement une demande du respect de la vie privée et personnelle:
http://maps.google.fr/maps/mm?t=h&lci=com.panoramio.all,com.youtube.all,com.google.webcams,transit&ie=UTF8&hl=fr&ll=50.612602,3.070207&spn=0.028104,0.084543&z=14

http://maps.google.fr/maps/mm?t=h&lci=com.panoramio.all,com.youtube.all,com.google.webcams,transit&ie=UTF8&hl=fr&ll=50.612602,3.070207&spn=0.028104,0.084543&z=14
quand c'est flou d'origine :
http://maps.google.fr/maps/mm?t=h&lci=com.panoramio.all,com.youtube.all,com.google.webcams,transit&ie=UTF8&hl=fr&ll=50.612602,3.070207&spn=0.028104,0.084543&z=14
et si c'est net :
http://maps.google.fr/maps/mm?t=h&lci=com.panoramio.all,com.youtube.all,com.google.webcams,transit&ie=UTF8&hl=fr&ll=50.612602,3.070207&spn=0.028104,0.084543&z=14
et au bois de boulogne à paris :
http://maps.google.fr/maps/mm?t=h&lci=com.panoramio.all,com.youtube.all,com.google.webcams,transit&ie=UTF8&hl=fr&ll=50.612602,3.070207&spn=0.028104,0.084543&z=14
si cela passe pour certaines pubs:
http://maps.google.fr/maps?ll=44.722222,-1.258621&spn=0,359.765511&t=h&z=13&lci=com.panoramio.all,com.youtube.all,com.google.webcams&layer=c&cbll=44.703094,-1.227637&panoid=6D08DWkONuXC97cJrqgMkA&cbp=12,0,,0,5
pour les immatriculations de voitures, là c'est 'programmé':
http://maps.google.fr/maps?ll=44.722222,-1.258621&spn=0,359.777012&t=h&z=13&lci=com.panoramio.all,com.youtube.all,com.google.webcams&layer=c&cbll=44.703094,-1.227637&panoid=6D08DWkONuXC97cJrqgMkA&cbp=12,89.97,,1,10.92

Répondre

#2 samedi 20 mars 2010 - 16:47 - sai a dit :

Très intéressant. Merci pour l'effort.

Répondre

#3 samedi 29 mai 2010 - 08:35 - unesourisetmoi a dit :

autres liens forts intéressants pour des options de codage encore plus avancées:
http://www.touraineverte.com/aide-documentation-exemple-tutoriel-didacticiel/api-google-maps/info-bulle/fenetre-info-bulle-infowindow-data-codeReponse/maxContent-maxTitle-openInfoWindowHtml-DownloadUrl/retrecir-diminuer-petite-grande-agrandir-ouvrir-fermer-format.htm
et
http://blog.pascal-martin.fr/post/4-Google-Maps-Marqueurs-fenetres-informations

Répondre

#4 samedi 29 mai 2010 - 08:40 - unesourisetmoi a dit :

Demander un Api chez googles maps et le mettre dans dans ton <head> ainsi que le js suivant:
<script>
function createMarker(point,text) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(text); });
return marker; //fonction qui affiche l'info bulle légende sur le marqueur
}
function load() {
if (GBrowserIsCompatible()) {
var Lat=43.303606 // rentrez ici votre longitude
var Lng=3.484243 // rentrez ici votre lattitude
var Zoom=16 // rentrez ici le zoom désiré entre 1 et 16
var TextAffiche="le texte a afficher"; // rentrez ici votre texte qui sera affiche sur le point marqueur
var map = new GMap2(document.getElementById("map")); // affiche le module
map.setCenter(new GLatLng(Lat,Lng ),Zoom ); //affiche la carte au lieu précisé
map.addControl(new GSmallMapControl()); // affiche le curseur de zoom
map.addControl(new GMapTypeControl()); // affiche le curseur de déplacement
map.setMapType(G_SATELLITE_MAP);
var point = new GLatLng(Lat,Lng);
var marker = createMarker(point,TextAffiche);
map.addOverlay(marker); // ces 3 lignes définissent le point et sa légende
}
}
</script>
Pour le Body :
<body onload="load()" onunload="GUnload()">
pour précharger la carte.
et une 'div' avec les dimensions de la carte :
<div id="map" style="width:700px;height:550px"></div>

Répondre

Fil RSS des commentaires de cet article

Écrire un commentaire

Pour laisser un petit avis au passage, nul besoin d'avoir un site ou une adresse Internet, juste se donner un 'pseudo' ...
Les commentaires sont en 'dofollow', mais modérés à priori. Ils ne seront publiés qu'après vérification de votre message.
Si vous pensez ou désirez obtenir un backlink, votre commentaire doit être construit de manière cohérente, rédigé correctement ET avoir un minimum de contenu et de pertinence.