API Google Maps JavaScript version 3 exemples et tutoriels en Français

Cartographie et webmapping

Partager ce tutoriel sur les réseaux sociaux
Signaler une erreur dans cet article

Référence Google Maps API V3

Retrouvez les 3 versions de l'API Google Maps JavaScript V3 traduites en Français :

Carte Map Google Maps API V3

L'API Google Maps JavaScript version 3 vous permet de créer, modifier et personnaliser des cartes géographiques à l'aide de la classe google.maps.Map. Plusieurs types de cartes existent : Plan, Satellite, Mixte, Relief.

Grâce aux caractéristiques de l'objet google.maps.MapOptions vous pouvez définir les propriétés d'une carte selon vos besoins : centrer la carte, définir le type de carte, activer ou désactiver le contrôle panoramique, etc.

Ces cartes sont interactives. Vous pouvez zoomer ou les déplacer à volonté. Il est également possible d'ajouter des observateurs d'évenements afin de faire réagir la carte à certains événements.

Enfin, différents types d'informations peuvent venir s'afficher sur la carte Google, comme par exemple un itinéraire, une image, un polygone, une polyline, une info bulle, un Street view, un fichier KML KMZ.

Accéder à la liste de nos exemples et tutoriels : Carte Map

Contrôle Control Google Maps API V3

Les cartes Google Maps disposent de boutons, encore appelés contrôles, permettant à l'utilisateur d'interagir avec la carte (déplacement, zoom, échelle).

Ces contrôles peuvent être ajoutés, supprimés, déplacés à l'aide des classes google.maps.Map et google.maps.ControlPosition.

L'API Google Maps version 3 propose plusieurs types de contrôles que vous pouvez facilement intégrer dans votre carte : mapTypeControl, overviewMapControl, panControl, rotateControl, scaleControl, streetViewControl, zoomControl

L'aspect visuel de ces contrôles varie en fonction de la taille de la carte (grande, petite, IPhone, Android). Il est également possible d'ajouter des contrôles personnalisés.

Accéder à la liste de nos exemples et tutoriels : Bouton contrôle

Marqueur Marker Google Maps API V3

Le marqueur, créé via la classe google.maps.Marker, permet de géolocaliser sur une carte un point particulier. Celui-ci est identifié à partir de ses coordonnées GPS :

  • latitude,
  • longitude

grâce à la classe google.maps.LatLng.

Les marqueurs sont représentés à l'aide de deux images ( icône et ombre ) et sont personnalisables à l'aide de la classe google.maps.MarkerOptions.

Enfin, les marqueurs sont interactifs. Ils peuvent être utilisés, via des observateurs d'événements, pour réagir à certaines actions et déclencher, par exemple, l'ouverture d'une info-bulle.

Accéder à la liste de nos exemples et tutoriels : Marqueur Marker

Polyline Google Maps API V3

Les polylines sont des lignes constituées de portions de droites, assemblées les unes aux autres. La construction d'une polyline, via la classe google.maps.Polyline, se fait grâce à un à un tableau de LatLng ou d'un MVCArray.

L'opacité la couleur et l'épaisseur de la polyline peuvent être personnalisées.

Pour créer des polylines, l'API Google Maps V3 utilise VML, SVG ou canvas. Une polyline est en fait une ligne sous forme d'image, qui vient se superposer à la carte.

Enfin, les polylines sont interactives. Elles peuvent être utilisées, via des observateurs d'événements, pour réagir à certaines actions et déclencher par exemple l'affichage d'une info-bulle.

Accéder à la liste de nos exemples et tutoriels : Polyline Ligne

Polygone Polygon Google Maps API V3

Un polygone est constitué d'une série de points ordonnés. Ces points, sous forme de LatLng, sont placés dans un tableau de type Array ou MVCArray.

Chaque point étant relié au suivant à l'aide d'un segment de droite. Le premier et le dernier point sont également reliés. Un polygone est créé grâce à la classe google.maps.Polygon et à un objet google.maps.PolygonOptions.

La couleur, l'épaisseur et l'opacité du contour peuvent être personnalisées. Il en est de même pour la couleur et l'opacité de la zone de remplissage.

Le polygone utilise les capacités de dessin vectoriel du navigateur qui l'affiche.

Enfin, les polygones sont interactifs. Ils peuvent être utilisés, via des observateurs d'événements, pour réagir à certaines actions et déclencher par exemple l'affichage d'une info-bulle.

Accéder à la liste de nos exemples et tutoriels : Polygon Polygone

Infobulle Infowindow Google Maps API V3

L'API Google Maps JavaScript version 3 permet d'afficher sur la carte une Info-bulle ou Infowindow, créee à l'aide de la classe google.maps.InfoWindow.

L'Info-bulle est une fenêtre flottante venant se superposer à la carte. Celle-ci est ancrée à un point géographique précis sur la carte, et son contenu peut afficher divers types d'informations (texte, images, vidéos, etc.).

Les propriétés de l'objet google.maps.infoWindowOptions permettent de personnaliser une Info-bulle.

Enfin, les InfoWindow sont interactives. Elles peuvent être utilisées, via des observateurs d'événements, pour réagir à certaines actions et déclencher par exemple l'affichage d'un message lors de leur fermeture.

Accéder à la liste de nos exemples et tutoriels : Infobulle Infowindow

Itinéraire Direction Google Maps API V3

L'API Google Maps version 3, via la classe DirectionsService, vous offre la possibilité de calculer des itinéraires à vélo, pour piétons ou routiers, avec ou sans autoroutes.

L'itinéraire peut être calculé à partir d'adresses postales ou de coordonnées géographiques (latitude, longitude).

Le résultat du calcul de l'itinéraire peut s'afficher sous la forme d'une carte et/ou d'une description textuelle.

Par défaut, le niveau de zoom ainsi que le centre de la carte sont calculés de façon à ce que la totalité de l'itinéraire tienne dans la carte affichée.

Accéder à la liste de nos exemples et tutoriels : Itinéraire Direction

Géocodeur Geocoder Google Maps API V3

La nouvelle version (v3) du géocodeur remplace la précédente (v2). Elle utilise la classe google.maps.Geocoder.

Les développeurs sont invités à mettre à jour leur code.

Le géocodeur permet d'effectuer du géocodage.

Le géocodage permet de transformer une adresse postale en ses coordonnées géographiques (latitude, longitude).

L'opération inverse, également possible, porte le nom de géocodage inversé.

La réponse, issue d'une requête de géocodage, est faite, selon votre choix, au format JSON ou XML.

Accéder à la liste de nos exemples et tutoriels : Géocodeur Geocoder

KML KMZ Google Maps API V3

Les fichiers KML et KMZ renferment des informations géographiques pouvant être interprétées et affichées à l'aide de l'API Google Maps V3. Ces fichiers ont un format identique au format XML.

A l'aide de la classe google.maps.KmlLayer vous allez pouvoir afficher le contenu d'un fichier KML, KMZ ou GeoRSS sur une carte Google, à condition que celui-ci soit placé sur un serveur public et libre d'accès.

Le fichier KMZ est la version compressée d'un fichier KML. Il suffit donc de le dézipper pour accéder à ses données.

Accéder à la liste de nos exemples et tutoriels : KML KMZ

Liens Links Google Maps API V3

Série de liens vers des articles consacrés à l'API Google Maps Javascript V3.

Accéder à la liste de nos : Liens

Articles Google Maps API V3

Série d'articles consacré à l'API Google Maps Javascript Version 3.

Tout au long de ces articles, le code est détaillé et expliqué de façon à vous en faciliter la compréhension.

Accéder à la liste de nos : Articles

Vidéos Google Maps API V3

Série de vidéos consacrées à l'API Google Maps Javascript V3.

Accéder à la liste de nos : Vidéos Youtube

StreetView Google Maps API V3

Google Street View vous permet d'afficher, à partir d'un point donné , une vue panoramique à 360°, à condition que ce point soit situé dans une zone couverte par Google Street View.

Ce service, initialement réservé aux routes, est aujourd'hui disponible pour visualiser des pistes de ski, des lignes de chemin de fer, des fleuves, des lieux touristiques, etc. De plus, l'arrivée de MapsGL permet de tirer parti de la puissance de calcul des cartes graphiques compatibles, pour augmenter la fluidité/qualité des panoramiques Street View.

Grâce à l'API Google Maps version 3, vous pouvez paramétrer entiérement Google Street View : emplacement (latitude, longitude), angle de vue (horizontal, vertical), affichage ou non des photos d'utilisateurs.

Accéder à la liste de nos exemples et tutoriels : StreetView