mercredi, juillet 21, 2010

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 :

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);

}

7 commentaires:

Anonyme a dit…

Bonjour,

Votre tutoriel est très complet ! Bravo !

Cependant, sauriez-vous comment géolocaliser une adresse et centrer la carte avec la V3 et Webdev? Je n'arrives à rien.

Merci.

google earth a dit…

merci pour l info

dams74 a dit…

Bonjour,
Je n'arrive pas à afficher la carte. Pourriez vous m'aider.
J'ai un texte qui s'affiche à la place de la carte. "Affichage de la carte"
Pourriez vous m'aider ?
Merci

progwdm a dit…

Il semblerait que le code d'initialisation du libellé HTML ne soit pas renseigner. A vérifier.

volledoen a dit…

Bonjour,

Merci pour votre tutoriel qui est très clair.
Cependant, j'aimerais marquer un lieu sur la carte... Savez-vous comment faire?

D'avance merci,

Cédric

Anonyme a dit…

Bonjour,

Super tutoriel !

Ce code marche tres bien en version 15, maos avec la 16 comme dams74. J'ai un texte qui s'affiche à la place de la carte. "Affichage de la carte".
L'initialisation du libellé est faite.

Merci pour votre aide.

Anonyme a dit…

Merci ce tuto m'a beaucoup aidé pour commencer