Voici un premier billet pour vous expliquer simplement comment intégrer l’API Google Maps sur votre site web.

Tout d’abord, récupérez une clef google pour votre site ici.

Une fois votre clé google maps en main, vous devrez d’abord récupérer les coordonnées GPS du point que vous souhaitez afficher.
Prenons par exemple le restaurant l’Estacade à Bordeaux, ses coordonnées GPS sont :44.845524,-0.564466
Nous afficherons le texte suivant que nous mettrons en forme plus tard : « Restaurant L’Estacade BordeauxAdresse: Quai Queyries, 33100 Bordeaux ».
Pour cela, insérez le code suivant dans la page où vous souhaitez afficher la carte Google.

//< ![CDATA[
var html_resto = "

Restaurant L'Estacade Bordeaux
Adresse: Quai Queyries, 33100 Bordeaux

";
    //]]>

Les fonctions load() et unload() servent à appeler l’API google au chargement de la page.
Pensez à intégrer la clef google map que vous venez d’acquérir.

[ad#46860]

Ensuite, créez un fichier javascript dans lequel vous redéfinissez la fonction load() (qui sert à charger l’API Google). Voici un exemple de fichier :

//< ![CDATA[
/* latitude : latitude du point sur lequel vous voulez centrer la carte
longitude : longitude du point sur lequel vous voulez centrer la carte
html : code html que vous voulez afficher dans la bulle d'info du marker
*/
    function load(latitude,longitude,html_affiche) {
// test si le navigateur du client est compatible
      if (GBrowserIsCompatible()) {

        //définition d'un nouveau marker à afficher sur la carte
	var baseIcon = new GIcon();
	baseIcon.iconSize=new GSize(12,20);
	baseIcon.shadowSize=new GSize(20,22);
	baseIcon.iconAnchor=new GPoint(6,20);
	baseIcon.infoWindowAnchor=new GPoint(5,1);

	var un = new GIcon(baseIcon, 'http://labs.google.com/ridefinder/images/mm_20_red.png', null, 'http://labs.google.com/ridefinder/images/mm_20_shadow.png');

	function createMarker(point,html,icon) {
		var marker = new GMarker(point,icon);
                // on ajoute la propriété "onclick" sur le marqueur qui ouvrira une bulle d'info liée au marker
		GEvent.addListener(marker, 'click', function() {
			marker.openInfoWindowHtml(html);
		});
		return marker;
	}
        //création de l'objet carte, cet élément s'appelera ici "map"
        var map = new GMap2(document.getElementById("map"));
        // on centre la map sur le point de latitude et longitude passée en paramètre, le zoom de la carte est fixé à 15
        map.setCenter(new GLatLng(latitude, longitude), 15);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
        //creation du marker avec les coordonnées passées en paramètre
	var point = new GLatLng(latitude, longitude);
	var html = html_affiche;
	var marker = createMarker(point, html, un);
        // on ajoute le marker sur la carte
	map.addOverlay(marker);

      }
	else {
	alert("Desole, mais votre navigateur n'est pas compatible avec Google Maps");
	}
    }

    //]]>

Appelez ce fichier javascript au chargement de votre page (nous le nommons ici ggmaps.js), par exemple après l’appel de votre clef google, ce qui donne :

Maintenant il vous faut définir l’endroit où vous allez afficher votre carte. Une fois cet emplacement trouvé et les dimensions définies, pour afficher la carte, il vous suffit d’afficher un element « div » avec l’id « map » qui correspond a l’identifiant créé plus haut dans la fonction « load() ». Prenons une carte de dimensions 600px de large par 300px de haut :

Pour finir, rajoutons un peu de CSS pour que la bulle d’informations qui s’affiche lorsque l’on clique sur le marqueur soit un peu plus « stylée » Rajoutez ceci dans le header de votre page :

Voir le rendu final de la carte : Démo

[ad#46860]