Intégrer l'API Google Maps

Navigation: Pages Webmaster > Programmation


Présentation des éléments permettant de réaliser une intégration de l'API GoogleMaps sur un site web.



Google developer
Le service de cartographie présenté dans l'article Cartographie et Google Maps peut être intégré sur un site web.

Pour se faire il est nécessaire d'obtenir une licence d'utilisation de l'API auprès de google et de l'utiliser pour le répertoire du site web ainsi déclaré. Cette licence se matérialise par une clé.

Le code source de la page qui utilisera l'API devra ainsi contenir votre clé

L'ensemble de la programmation est réalisé en javascript, avec possibilité d'utiliser les balises XML. Le tout peut être intégré dans du php pour pouvoir utiliser les variables. L'ensemble peut également faire l'objet d'url rewriting pour obtenir des url propres.

Au niveau du rendu de la carte google, il est possible de jouer avec les contrôles pour permettre ou interdire, afficher ou non certaines options.
Dans les principaux contrôles, nous trouvons :
- un zoom simple ou avec échelle


map.addControl(new GLargeMapControl());


- le choix dans le type de carte plan, satellite ou mixte



map.setMapType(G_SATELLITE_MAP); // Vue satelite
map.setMapType(G_NORMAL_MAP); // Vue carte
map.setMapType(G_HYBRID_MAP); // Vue mixte


- l'affichage ou non de l'échelle des distances



map.addControl(new GScaleControl()) ;


Dans les autres possibilités
GSmallMapControl() Navigation dans les 4 directions et zoom (+) zoom (-)
GLargeMapControl() Navigation dans les 4 directions et zoom (+) zoom (-) avec echelle
GSmallZoomControl() Les zoom (+) zoom (-) .


L'API permet de modifier des valeurs, mais également de pouvoir les interroger pour récupérer leur statut.

Les principales possibilités unitaires de l'API google maps sont ainsi :
- Affichage de la carte en un point donné
Il s'agit à partir des coordonnées en latitude longitude de centrer la carte sur ce point avec un certain niveau de zoom.



map.setMapType(G_SATELLITE_MAP);
map.setCenter(new GLatLng(2.2944259643554688, 48.85817876694892), 3); //Position sur la Tour Eiffel



- Matérialisation de points sur la carte sous forme d'icônes
Il s'agit d'afficher des icônes sur la carte, avec différentes coordonnées. Les icônes peuvent être distinguées par forme, par couleur.



// Création de mini icones
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

// Fonction de création de points et utilisation des icones
function createMarker(point) {
var marker = new GMarker(point, icon);
return marker;
}

var eiffel = new GPoint(2.2944259643554688, 48.85817876694892);
var marker = createMarker(eiffel);
map.addOverlay(marker);


- Affichage de légende sous forme de bulle de bande dessinée et dont le contenu peut être du texte, ou du code HTML.
Il s'agit d'afficher une bulle d'information lorsque une balise est cliquée (par exemple). Un des plus étant de permettre du HTML et donc d'illustrer le lieu par une image.



// Fonction de création de point avec légende et utilisation des icones
function createMarker(point, legende) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(legende);
});
return marker;
}

var eiffel = new GPoint(2.2944259643554688, 48.85817876694892);
var marker = createMarker(eiffel, "<img src='tour-eiffel.jpg'>
La Tour Eiffel");
map.addOverlay(marker);


- Tracage de traits.
Il s'agit de relier par un trait deux points distincts. La couleur, l'épaisseur et l'opacité du trait sont modifiables.
La liste des points pouvant être encodée, c'est un réel service de tracé d'itinéraire qu'il est possible de mettre en oeuvre.



var polyline = new GPolyline([
new GLatLng(48.8581, 2.2944),
new GLatLng(48.8681, 2.2844)
], "#FF6600", 10);
map.addOverlay(polyline);


A partir de ces différents éléments et contrôles que l'on peut intégrer avec l'API Google Maps, il est possible de réaliser des fonctions très intéressantes voire de réels services web.


Article écrit par Webmaster le 18/01/2006
(Hits 83108
- Catégorie : Programmation)

Faites passer - Imprimer
Partagez cette page :


Commentaires

Enfin une explication
Envoyé par crow le 23/01/2006 22:59

Merci pour ces explication qui permettent de décoder un peu..

coordonnées
Envoyé par corto le 13/06/2006 09:00

lorsque j'utilise " new GPoint(48.378145469762444, -4.371185302734375)" pour créer une ligne, avec la fonction "new GPolyline" la carte ne restitue pas la bonne localisation, il me faut indiquer long/lat pour obtenir quelque chose de correcte. Quel est mon probleme ?

==> Avec cette localisation là, vous êtes du coté de Brest, exactement à Plougastel-Daoulas (ou son voisinage).
Pour faire un new GPolyline à partir de ce point, il faut centrer la carte sur le Gpoint.

GPolyline
Envoyé par corto le 14/06/2006 09:32

merci pour ce rapide retour,
j'ai trouvé une solution, si j'utilise "new GPoint" le trait se retrouve sur l'afrique,

var trait1 = new GPolyline([
new GPoint(48.45835188280866, -1.7578125),
new GPoint(30.751277776257812, 24.609375)]," #FF0033",5, 0.5);
map.addOverlay(trait1);

par contre, si j'utilise "GLatLng" c'est correct !
var trait1 = new GPolyline([
new GLatLng(48.45835188280866, -1.7578125),
new GLatLng(30.751277776257812, 24.609375)]," #FF0033",5, 0.5);
map.addOverlay(trait1);

pourquoi lors de l'utilisation de "GPoint" dans "new GPolyline" les coordonées sont elles utilisées Longitude/Latitude ?

encore merci pour vos explications sur l'api de google maps.

reponse
Envoyé par corto le 17/06/2006 12:07

je viens de trouver ma réponse sur : http://www.econym.demon.co.uk/googlemaps/index.htm

"Le principal changement de la version 2 est que GPoint () n'est plus employé pour identifier un endroit géographique. GPoint () existe toujours, mais il est seulement employé pour indiquer des positions en Pixel sur l'écran. Les endroits géographiques sont indiqués avec le nouvel objet GLatLng (). Les paramètres pour GLatLng () sont dans l'ordre : latitude , longitude. C'est plus exact pour tracer, mais c'est opposée aux paramètres de GPoint (). Tout qui employait GPoint () pour indiquer un endroit géographique maintenant emploie un objet de GLatLng () à la place".

si cela peut servir :)

Existe t-il un service complet en Français ?
Envoyé par alain le 24/08/2006 16:13

Bonjour, et merci pour ces infos précises. Elles complètent un article sur le même sujet trouvé sur resau.erasme.org.

Question complémentaire : connaîtriez-vous un service "prêt à l'emploi" et en français qui permettrait d'utiliser Google map associé à une base. J'en ai seulement trouvé qu'en anglais (gmapez sur bluweb.com ; frappr.com)

Afficher les marqueurs automatiquement
Envoyé par Claude le 20/11/2006 16:44

Bonjour,

j'aimerais intégrer Google Maps à mon site.
J'aimerais voir tous les casinos en france, comme si j'avais fait une recherche "caisno france" et que je voulais zommer sur certaines régions pour voir où ils se trouvent.
Vos astuces sont très intéressantes merci !


Autres publications Programmation

Améliorer Adsense via les annonces texte ou images
Google Adsense propose pour les pages web deux formats d'annonces et incite à utiliser le format image, quelles sont les améliorations à apporter.
(écrit le 11/03/2012 - 3.888 lectures)

Url en bit.ly sous ajax
Autre manière de calculer une url courte de type bit.ly et de profiter des traitements asynchrones possibles avec ajax
(écrit le 15/03/2010 - 4.022 lectures)

Optimiser l'API bit.ly pour un affichage plus rapide des pages
Bit.ly est le site permettant de raccourcir une url, et dont l'API permet de raccourcir à la volée. Hélas cette api peut ralentir l'affichage des pages, voyons comment intégrer l'API et afficher ses pages aussi vite qu'avant.
(écrit le 08/03/2010 - 4.062 lectures)

Intégrer l'API bit.ly pour twitter
Twitter, le réseau social, peut être alimenté par des articles de site web et efficacement lorsque les url ont été raccourcies. Voyons alors comment générer à la volée des url avec bit.ly et ce grâce à l'API proposée.
(écrit le 06/03/2010 - 6.511 lectures)

Dessiner dans une image avec PHP
Après avoir vu comment écrire dans une image, voyons comment dessiner dans une image puis écrire avec d'une part des polices de caractère et des couleurs, mais également des paramètres passés en variable.
(écrit le 23/02/2010 - 4.689 lectures)

Ecrire dans une image à la volée
Le langage PHP permet d'écrire dans une image à la volée afin par exemple d'y ajouter un texte en superposition. Cette fonction permet également de masquer l'url de l'image puisque crée par le serveur.
(écrit le 22/02/2010 - 4.962 lectures)

Redimensionner photo pour le web mobile
Le web mobile ne peut permettre de charger des images de grande résolution. Il convient de les redimensionner. Pour ce faire utilisons PHP avec la bibliothèque GD, script en ligne.
(écrit le 15/02/2009 - 5.920 lectures)

Passer au web version mobile
Comment procéder pour écrire son site en version mobile pour smartphone, pda ou téléphone mobile avec wap. Voyons comment appliquer un template dédié pour le web sur mobile.
(écrit le 09/02/2009 - 8.508 lectures)

Structure pour web mobile
Les pages web pour téléphone mobile ou pour smartphone ne se construisent pas de la même manière que pour un site web avec navigateur classique. Quelques limitations sont à prendre en compte, voyons ces points.
(écrit le 09/02/2009 - 7.054 lectures)

Faut il externaliser ses scripts
Pour obtenir des temps de réponses corrects et si possible optimum, tout webmaster doit se poser la question de savoir si il faut externaliser les scripts d'un site web.
(écrit le 09/12/2008 - 5.168 lectures)

Reseau Social Friend connect
Google ouvre son réseau social Friend Connect aux autres plateforme et permet d'installer cet outil très facilement sur un site web.
(écrit le 05/12/2008 - 4.601 lectures)

Feuilles de styles statiques
Les feuilles de style dynamiques ne sont pas une bonne solution du coté de l'optimisation des pages web
(écrit le 09/11/2008 - 3.732 lectures)

Optimiser ses scripts
YSLOW propose de positionner ses scripts correctement dans ses pages web pour améliorer la vitesse de chargement.
(écrit le 05/10/2008 - 3.571 lectures)

Optimiser la lecture des feuilles de style
Cinquième règle YSLOW pour optimiser son site web : positionner les feuilles de styles correctement dans la page web.
(écrit le 01/10/2008 - 2.907 lectures)

YSLOW : composant compressé
Règle quatre pour optimiser les temps de réponse du serveur : compresser les composants de la page coté serveur.
(écrit le 20/09/2008 - 3.689 lectures)

Yslow : les pages dynamiques ou statiques sont persitantes
Règle numéro trois pour optimiser les temps de réponse du serveur : rendre persistantes ses pages web, qu'elles soient statiques ou dynamiques.
(écrit le 12/09/2008 - 3.243 lectures)

YSLOW : Réduire le nombre de requêtes
Règle numéro un pour optimiser les temps de réponse du serveur : minimiser le nombre de requêtes.
(écrit le 31/08/2008 - 4.797 lectures)

Améliorer la vitesse d'un site coté serveur
Après avoir optimisé le code des pages coté client, il reste à voir ce que l'on peut faire coté serveur, Yslow nous aide en ce sens
(écrit le 30/08/2008 - 4.291 lectures)

GoogleEarth kml et flux rss
Les flux rss permettant de lire de diffuser le contenu d'une page web sur un site, peuvent être utilisés pour lire un fichier Google Earth dont le contenu évolue.
(écrit le 20/06/2008 - 4.395 lectures)

Annuaire thématique cartographié
Carte des sites web de l'annuaire thématique avec géolocalisation et plan des villes.
(écrit le 05/12/2007 - 11.239 lectures)

Adapter son site à la résolution d'écran
Comment rendre son site lisible en 800 x 600 comme dans les grandes résolutions avec utilisation des balises div
(écrit le 23/11/2007 - 16.049 lectures)

L'API Google Maps Xml et Ajax sont sur un site web
Utiliser un flux xml pour afficher des données sur une carte Googlemaps
(écrit le 19/11/2007 - 12.550 lectures)

Software 2.0 - Programmation en Java
Le sujet principal de Software 2.0 4/2005 (6) : Programmation en Java
(écrit le 04/04/2005 - 8.127 lectures)



Tutoriels Webmaster

Scripts :

Internet a deux caractéristiques principales : Cela bouge beaucoup et cela bouge vite. Le webmaster se doit d'être actif, voire réactif, et de disposer de l'information rapidement. Un simple script en python peut l'aider.


Scripts :

Comment contrôler visuellement que l'affichage de différentes pages web se fait correctement avec les différentes configurations de navigateur, et résolution d'affichage. Le Webdriver de Sélénium permet via un script d'automatiser la captures de telles pages, pour contrôler en un coup d'oeil le résultat.


Conception :

Optimiser un site web avec du responsive design est un pas de plus fait vers l'utilisateur final
Pour autant, si une page du site a un poids de plusieurs méga, l'utilisateur risque, si il est sur un téléphone mobile, de partir avant que la page ne soit complétement chargée.


Outils :

Comment gérer les erreurs 404 not found sur le fichier browserconfig.xml, alors que celui ci est demandé par le navigateur.


Scripts :

Les feuilles de style d'un site web permettent d'adapter l'affichage à la taille de l'écran. Voyons comment faire pour un site qui s'affiche aussi bien sur un ordinateur, une tablette qu'un téléphone intelligent (smartphone).


Scripts :

L'attribut Placeholder, permettant en HTML5 de renseigner le label d'un champs input, ne fonctionne pas sous Internet Explorer. Voici un script JavaScript simple et efficace à insérer pour contourner ce manque de fonctionnalité.


Sécurité :

Poster un spam sur un forum est pour certains acteurs du web un exercice amusant. Pour d'autres c'est un moment de réflexion obligatoire pour éviter de se faire spammer.
Voyons quelles sont les solutions pour éliminer les posts des spameurs tout en gardant ceux des internautes.


Qualité :

Si il est préférable de faire un tweet lisible, voyons comment faire pour le générer de manière automatique à partir d'un article.


Pages webmaster Ajoutez à votre page Google

Annuaire


Thèmes Phortail