Pronto!

Para começar a desenvolver, acesse nossa documentação do desenvolvedor.

Ativar a Google Maps JavaScript API

Para começar, orientaremos você pelo Console do Desenvolvedor do Google para realizar algumas atividades:

  1. Criar ou selecionar um projeto
  2. Ativar a Google Maps JavaScript API e serviços relacionados
  3. Criar chaves apropriadas
Continuar

Camada de trânsito, transporte público e bicicleta

As camadas de trânsito, transporte público e bicicleta modificam a camada do mapa básico para exibir as condições atuais do trânsito ou informações sobre rotas locais de transporte público e bicicleta. Essas camadas estão disponíveis em algumas regiões.

  1. Camada de trânsito
  2. Camada de transporte público
  3. Camada de bicicleta

Camada de trânsito

A Google Maps JavaScript API permite adicionar informações de trânsito em tempo real (quando permitido) aos mapas usando o objeto TrafficLayer. As informações de trânsito são fornecidas para o momento em que a solicitação foi feita.

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 o exemplo de trânsito

Camada de transporte público

A Google Maps JavaScript API permite exibir a rede de transporte público de uma cidade no mapa usando o objeto TransitLayer. Quando a camada de transporte público é ativada e o mapa está centralizado em uma cidade que oferece informações sobre o transporte público, o mapa mostra as principais linhas como linhas grossas coloridas. A cor da linha é definida com base nas informações do operador da linha de transporte público. A ativação da camada de transporte público altera o estilo do mapa básico para destacar melhor as rotas de transporte público.

As informações de transporte público somente estão disponíveis em algumas localizações. Para ver uma lista das cidades em que há informações de transporte público disponíveis, consulte esta lista.

Se você for um órgão público que supervisiona o transporte público na sua cidade e quer incluir seus dados, acesse o site do programa de parceiros de transporte público da Google para saber mais.

O exemplo abaixo mostra uma camada de transporte público ativada em um mapa de Londres, Reino Unido:

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 o exemplo de transporte público

Camada de bicicleta

A Google Maps JavaScript API permite adicionar informações de bicicleta aos mapas usando o objeto BicyclingLayer. A BicyclingLayer renderiza uma camada de ciclovias, rotas sugeridas de bicicleta e outras sobreposições específicas para o uso de bicicletas sobre o mapa fornecido. Além disso, a camada altera o estilo do mapa básico para destacar as ruas que permitem rotas de bicicleta e esmaecer as ruas inadequadas para bicicletas.

O exemplo abaixo mostra uma camada de bicicleta ativada em um mapa de Cambridge, MA, EUA:

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 o exemplo de bicicleta

As rotas em verde escuro indicam rotas de bicicleta dedicadas. As rotas em verde claro indicam ruas com ciclovias dedicadas. As rotas tracejadas indicam outras ruas ou caminhos recomendados para uso por bicicletas.

Enviar comentários sobre…

Google Maps JavaScript API
Google Maps JavaScript API
Precisa de ajuda? Acesse nossa página de suporte.