Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps JavaScript API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou sélectionner un projet
  2. Activer Google Maps JavaScript API et les services connexes
  3. Créer les clés appropriées
Continuer

Calques Traffic, Transit et Bicycling

Les calques Traffic, Transit et Bicycling modifient le calque de la carte de base pour afficher les conditions de circulation en temps réel ou des informations sur les itinéraires en transports en commun et à vélo. Ces calques sont disponibles dans certaines régions seulement.

  1. Calque Traffic
  2. Calque Transit
  3. Calque Bicycling

Calque Traffic

Google Maps JavaScript API vous permet d'ajouter à vos cartes des informations en temps réel sur les conditions de circulation (dans certaines régions seulement) au moyen de l'objet TrafficLayer. Les informations sur la circulation routière sont fournie pour le moment où la requête est effectuée.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031}
  });

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031}
  });

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}

Voir l'exemple de calque Traffic

Calque Transit

Google Maps JavaScript API vous permet d'afficher sur votre carte le réseau de transport en commun d'une ville au moyen de l'objet TransitLayer. Lorsque le calque Transit est activé et que la carte est centrée sur une ville qui prend en charge les informations sur les transports en commun, la carte affiche les principales lignes de transport en commun sous la forme de lignes de couleur au trait épais. La couleur de la ligne est définie en fonction des informations fournies par la régie des transports concernée. Activer le calque Transit modifie le style de la carte de base pour mieux mettre en évidence les itinéraires de transport en commun.

Les informations sur les transports en commun sont disponibles pour certains lieux seulement. Pour afficher une liste des villes pour lesquelles des informations sur les transports en commun sont actuellement disponibles, consultez cette liste.

Si vous représentez un organisme public de gestion des transports en commun pour votre ville et souhaitez nous communiquer vos données, consultez le site Google Transit Partner Program pour en savoir plus.

L'exemple suivant montre le calque Transit activé sur une carte de Londres, au Royaume-Uni.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 51.501904, lng: -0.115871}
  });

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 51.501904, lng: -0.115871}
  });

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);
}

Voir l'exemple de calque Transit

Calque Bicycling

Google Maps JavaScript API vous permet d'ajouter à vos cartes des informations sur les itinéraires à vélo au moyen de l'objet BicyclingLayer. L'objet BicyclingLayer affiche au-dessus d'une carte donnée un calque représentant des pistes cyclables, des suggestions d'itinéraires à vélo et autres superpositions spécifiques à l'usage du vélo. Ce calque modifie par ailleurs le style de la carte de base pour mettre en avant les rues dotées de pistes cyclables et au contraire atténuer les rues déconseillées pour le vélo.

L'exemple suivant montre le calque Bicycle activé sur une carte de Cambridge, dans le Massachusetts :

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 42.3726399, lng: -71.1096528}
  });

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 42.3726399, lng: -71.1096528}
  });

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);
}

Voir l'exemple de calque Bicycling

Les itinéraires en vert foncé indiquent des voies réservées aux vélos. Les itinéraires en vert clair indiquent des rues avec des pistes cyclables. Les itinéraires en pointillés indiquent des rues ou des chemins recommandés pour le vélo.

Envoyer des commentaires concernant…

Google Maps JavaScript API
Google Maps JavaScript API
Besoin d'aide ? Consultez notre page d'assistance.