Eso es todo.

Para comenzar a desarrollar, consulta nuestra documentación para desarrolladores.

Activar la Google Maps JavaScript API

Para que puedas comenzar, te proporcionaremos orientación en la Google Developers Console a fin de que hagas primero algunas acciones:

  1. Crear o seleccionar un proyecto
  2. Activar la Google Maps JavaScript API y servicios relacionados
  3. Crear claves correspondientes
Continuar

Capa de tráfico, transporte y circulación en bicicleta

Las capas de tráfico, transporte y circulación en bicicleta modifican la capa del mapa básico para que se muestren las condiciones de tráfico actuales o datos sobre recorridos de transporte y bicicleta locales. Estas capas están disponibles en regiones seleccionadas.

  1. Capa de tráfico
  2. Capa de tránsito
  3. Capa de circulación en bicicleta

Capa de tráfico

La Google Maps JavaScript API te permite agregar a tus mapas información en tiempo real sobre el tráfico (cuando se admite) a través del objeto TrafficLayer. Se proporciona información sobre el tráfico relacionada con el momento en el que se realiza la solicitud.

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

Ver el ejemplo de tráfico

Capa de tránsito

La Google Maps JavaScript API te permite mostrar la red de transporte público de una ciudad en tu mapa mediante el objeto TransitLayer. Cuando esté habilitada la capa de transporte, y el mapa se encuentre centrado sobre una ciudad para la que se admita información sobre transporte, en el mapa se mostrarán las líneas de transporte público principales con trazo grueso y color. El color de las líneas se configura conforme a información del operador de líneas de transporte. La habilitación de la capa de transporte modificará el estilo del mapa básico para enfatizar recorridos de transporte.

Solo hay disponible información sobre transportes en ubicaciones seleccionadas. Para ver una lista de ciudades en las que haya disponible información sobre transportes públicos actualmente, consulta esta lista.

Si representas a una agencia pública encargada de supervisar transportes públicos en tu ciudad y deseas que se incluyan tus datos, visita el sitio del Programa para socios de Google Transit para obtener más información.

En el ejemplo siguiente se muestra la capa de transporte habilitado en un mapa de Londres, RU:

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

Ver el ejemplo de transporte

Capa de circulación en bicicleta

La Google Maps JavaScript API te permite agregar a tus mapas información en tiempo real sobre circulación en bicicleta a través del objeto BicyclingLayer. El objeto BicyclingLayer representa, sobre el mapa en cuestión, una capa de sendas y recorridos sugeridos para bicicletas, y otras superposiciones relacionadas específicamente con el uso de bicicletas. A su vez, la capa modifica el estilo del mapa básico para resaltar las calles que admitan recorridos para bicicletas y marginar las que no sean adecuadas para este medio de transporte.

En el ejemplo siguiente se muestra la capa de circulación en bicicleta habilitada en un mapa de Cambridge, MA:

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

Ver el ejemplo de circulación en bicicleta

El color verde indican recorridos dedicados a la circulación en bicicleta. El color verde claro indica calles con “carriles para bicicletas” dedicados. Las líneas punteadas indican calles o trazados recomendados para el uso de bicicletas en otros casos.

Enviar comentarios sobre...

Google Maps JavaScript API
Google Maps JavaScript API
Si necesitas ayuda, visita nuestra página de asistencia.