WEBDEV 15 - Google maps V3

Pour afficher une carte Google maps v3 dans un site WEBDEV, je me suis inspiré de l'exemple WW_Cartes de la LST 72.

Pour passer en v3 des APIs google maps, il faut bien évidement consulter la doc :

http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/introduction.html

A partir de cette introduction et de la doc des API (http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/reference.html) on peut commencer dans WEBDEV.

Dans l'onglet avancé de la description de la page mettre :

Dans cette page, mettre un champ libellé HTML et dans le code d'initialisation de ce dernier mettre le code suivant :

Ce code permet d'afficher la carte sur tous les navigateurs. Sans ce code sous chrome la carte prends tout le navigateur.

Ensuite dans le code Onload de la page mettre le code :

gObjCarte est un entier

CreerCarte("CARTE", 0,180)

La variable gObjCarte est utilisée dans plusieurs fonction de manipulation de la carte elle est donc déclarer en global navigateur.

Pour une facilité d’utilisation et de réutilisation création d’une collection de procédure dans les procédures globales navigateur

Nom de la collection : pGestionCartes

La procédure est écrite en javascript. Il faut donc cliquer sur WL après création de la procédure

Création de la carte :

// Résumé : Création de la carte google map

// Syntaxe :

//CreeCarte ()

//

// Paramètres :

// sNomChampCarte : Nom du champ HTML (..alias ou id défini dans DIV)

// nlat : latitude du centre de la carte

// nlong : longitude du centre de la carte

// Valeur de retour :

// Aucune

//

function CreerCarte(sNomChampCarte,nlat,nlong)

{

if (nlat==0){

nlat = 48.856558;

};

if (nlong==0){

nlong = 2.350966;

};

// Création de la carte

var latlng = new google.maps.LatLng(nlat, nlong);

var myOptions = {

mapTypeControl: true,zoom: 5, center: latlng, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},navigationControl: true,mapTypeId: google.maps.MapTypeId.ROADMAP

}

// création de la carte

gObjCarte = new google.maps.Map(document.getElementById(sNomChampCarte),myOptions);

}