BlogBang

Ajouter Google Maps à votre site en moins de 10 min !

Par Korben

Et voilà, c’est officiel, Google Maps couvre maintenant toute l’Europe !! Et en plus, Google a mis à jour ses images satellite, ce qui commence à devenir interressant…
Si vous ne connaissez pas Google Maps, je vous conseille d’aller faire un tour sur ce site: Google Maps
Très bien tout ça !! Mais saviez vous que Google donne gratuitement une API qui permet de rajouter Google Map à votre site… Magique non ?

Et bien moi je vais vous donner gratuitement (comme Google) la technique pour rajouter rapidement ce service à votre site ! Vous allez voir, ce n’est pas si compliqué que ça !

Allez en route !!

Avant toute chose, vous avez besoin d’une clé API pour Google Maps. Allez sur ce site http://www.google.com/apis/maps/ puis cliquez sur "Sign up for a google API key". Vous aurez besoin de vous identifier avec votre compte Gmail et d’entrer le nom de domaine de votre site. La clé API ne sera valable que pour les pages hebergées sous ce domaine. Si vous utilisez un serveur de test ou une machine de developpement, vous devez enregistrer une seconde clée sinon, ça ne marchera pas.

Google vous donnera en même temps que cette clée, un petit bout de code à inserer dans votre page.
Zappez le pour le moment, nous allons nous concentrer uniquement sur du code compatible avec la version 2 de l’API Google Maps. A titre d’info, la documentation pour la v2 est dispo ici
http://maps.google.com/apis/maps/documentation/.

Une fois que vous avez copié la clée Google Map, inserez le code suivant dans une balise HEAD:
(Attention au retour a la ligne. La ligne )

code23hm Ajouter Google Maps à votre site en moins de 10 min !
(Désolé pour le copier coller, mais j'ai du mettre ce code en image car il ne passait pas bien avec mon CMS...)

Puis remplacez VOTRE_CLEE par la clée API de Google Maps que vous avez obtenu précédement.
Ce script sert à 2 choses. Tout d'abord à vous identifier chez Google avec la clée API, et crée un lien avec la map Google. Vous pouvez inserer ce script n'importe ou sur votre page web, du moment qu'il se situe avant les lignes de code qui vont suivre.

Ensuite, vous allez placer la carte sur la page en inserant le Div suivant:

(Pour les lignes de code, méfiez vous des espaces qui se rajoutent dans le code)

C'est à l'endroit où vous mettrez ce Div que la carte apparaitra. Vous pouvez changer les dimensions de la carte en modifiant les valeurs de width et de height.

Maintenant, regardons le code suivant :

code6vm Ajouter Google Maps à votre site en moins de 10 min !

(Désolé pour le copier coller, mais j'ai du mettre ce code en image car il ne passait pas bien avec mon CMS...)

C'est ce code qui dessine la carte. Il faut copier ce code n'importe où après le DIV précédent dans votre XHTML.
La premiere ligne instancie la carte et la lie au DIV "map". La deuxième ligne ajoute le panneau de controle permettant les zooms. Enfin, la troisième ligne permet de positionner la carte sur un point précis et défini le niveau de zoom.
Ensuite, n'oubliez surtout pas de rajouter les fonctions onload et onunload dans le BODY de votre page:

Et voilà, votre carte est en place !! Je l'ai fait pointer sur Paris. Regardez: 

carte11ke Ajouter Google Maps à votre site en moins de 10 min !

Pour avoir ces coordonnées, 2 solutions sont possibles.
D'abord allez sur http://maps.google.com et placez vous sur l'endroit que vous voulez avec le taux de zoom désiré. Une fois que c'est ok, faites un double clic sur l'endroit choisi et cliquez sur le lien "Link this page", et observez l'URL. J'ai choisi l'Arc de Triomphe:

link4ar Ajouter Google Maps à votre site en moins de 10 min !

http://maps.google.com/?om=1&ll=48.873833,2.294812&spn=0.016569,0.040255

carte23co Ajouter Google Maps à votre site en moins de 10 min !

Nous obtenons donc dans cette URL la latitude et la longitude (c'est à dire les geocodes).
La seconde solution consiste à obtenir directement ces geocodes en allant sur des sites comme celui-ci http://worldkit.org/geocoder/. Vous en trouverez plein sur Google (cliquez ici).

Maintenant, nous n'avons plus qu'à entrer ces codes dans le précédent script ici:

map.setCenter(new GLatLng(48.873833,2.294812), 14);

14 représente le niveau de zoom sur la carte. Maintenant votre carte va pointer sur ces nouvelles coordonnées.
Pour finir, nous pouvons ajouter un point de marquage comme celui-ci icon6wl Ajouter Google Maps à votre site en moins de 10 min !sur la carte, en ajoutant une ligne de javascript juste après la commande map.setCenter.

map.addOverlay(new GMarker(new GLatLng(48.873833 ,2.294812 )));

Nous utilisons evidement les mêmes coordonnées.

Et voilà, j'ai terminé !! Vous avez maintenant une jolie carte Google Maps sur votre site. Il existe beaucoup de possibilités pour rendre tout cela très vivant, donc je vous recommande de lire la documentation des API.

carte33dq Ajouter Google Maps à votre site en moins de 10 min !

Bon dev !

Je vous recommande aussi la lecture des sujets suivants


Faites un lien vers cette news sur votre site



7 commentaires

  1. Korben Reply to this comment


    Et si ca vous dit, voici un générateur de code pour Google maps API v2

    Vraiment pratique :-)

    Posté le 27 avril 2006 à 08:50:29

  2. Diep Truong Reply to this comment


    Ensuite, vous allez placer la carte sur la page en inserant le Div suivant: (le lecteur reconnaitra)

    (Pour les lignes de code, méfiez vous des espaces qui se rajoutent dans le code)

    Merci pour votre document qui apporte au hobbyist une precieuse « experience» . :shock:

    Posté le 16 mai 2007 à 21:54:32

  3. Zoub Reply to this comment


    Salut Korben !

    J’ai une question intéressante quant à l’API GGMaps :
    y-a-t-il un moyen de récupérer les géocodes lors du chargement d’une page dont l’espace géographique est variable ?
    C’est-à-dire :
    J’ai 2 pages contenant l’un « Paris»  et l’autre « Madrid»  ; et je voudrais que lors du chargement de chacune de ces pages, l’API pointe sur la capitale/lieu précisé.
    Est-ce tout simplement possible ?

    Posté le 15 juillet 2008 à 17:38:39

  4. ch3wi94 Reply to this comment


    Sympas le tuto je complete avec une function pour pouvoir créer vous même vos propres boutons :

    // Fonction de création de points et utilisation des icones
    function createMarker(point) {
    var icon = new GIcon();
    /* URL de l’image Source et de son Ombre */
    icon.image = « http://labs.google.com/ridefinder/images/mm_20_red.png» ;
    icon.shadow = « http://labs.google.com/ridefinder/images/mm_20_shadow.png» ;
    /* Taille de l’image et de son Ombre : GSize(width,height)*/
    icon.iconSize = new GSize(12, 20);
    icon.shadowSize = new GSize(22, 20);
    icon.iconAnchor = new GPoint(6, 20);
    icon.infoWindowAnchor = new GPoint(5, 1);
    var marker = new GMarker(point, icon);
    return marker;
    }

    Ce qui donne :
    ps : remplacé par voter API Key..

    //

    Posté le 16 septembre 2008 à 16:33:03

  5. Adding custom icons to Google Maps « cotsweb.com Reply to this comment


    [...] Google Maps was more elusive, I had real trouble finding a copy of it.  Eventually I did find one here , thank you Korben. So I include a copy of Korben’s image here so others can download it [...]

    Posté le 1 février 2009 à 17:44:06

  6. Alciweb // Agence communication Maroc Reply to this comment


    Alciweb, est une agence conseil en marketing et communication au maroc, basée à rabat, vous apporte des solutions adaptées aux besoins de communication de votre entreprise, en vous garantissant une approche globale et sur mesure

    Posté le 26 avril 2009 à 19:29:23

  7. praveen Reply to this comment


    Udaipur hôtels et tous les inclus itinéraires de inde du nord avec Rajasthan,hotels udaipur pas cher heritage hotel udaipur,» Le guide de voyage complet d’udaipur avec rajasthan tour packages,inde du nord itinéraires,voyage en inde

    Posté le 29 juin 2009 à 19:05:34

« Back to text comment