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

Como adicionar um mapa Google com marcador ao seu site

Introdução

Este tutorial mostra como adicionar um mapa Google simples com marcador a uma página da Web. Foi desenvolvido para pessoas com conhecimento básico ou intermediário de HTML e CSS e básico de JavaScript. Caso queira acessar um guia avançado para criar mapas, leia o guia do desenvolvedor.

Veja abaixo o mapa que você criará ao longo deste tutorial.

A seção abaixo mostra todo o código necessário para criar o mapa neste tutorial.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- 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>

Sua vez de tentar

Passe o cursor na parte superior direita do bloco de código para copiar o código ou abri-lo no JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Primeiros passos

Há três etapas para se criar um mapa Google com marcador e inseri-lo em uma página da Web:

  1. Criar uma página HTML
  2. Adicionar um mapa com marcador
  3. Obter uma chave de API

Você vai precisar de um navegador da Web. Escolha um amplamente conhecido, como Google Chrome (recomendado), Firefox, Safari ou Internet Explorer, de acordo com a sua plataforma.

Etapa 1: Criar uma página HTML

Veja o código de uma página HTML básica da Web:

<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
  </body>
</html>

Observe que essa é uma página bem básica, com um cabeçalho de três níveis (h3), um único elemento div e um elemento style que são explicados na tabela abaixo. Você pode adicionar o conteúdo que quiser à página da Web.

Sua vez de tentar

Há dois botões no canto direito superior do exemplo de código. Clique no botão na extrema esquerda para abrir o exemplo no JSFiddle.

Entendendo o código

Esta tabela explica cada seção do código acima.

Código e descrição
<html>
 <head>
 </head>
 <body>
 </body>
</html>

Cria uma página HTML composta de cabeçalho e corpo.
<h3>My Google Maps Demo</h3>

Adiciona um cabeçalho de três níveis acima do mapa.
<div id="map"></div>

Designa uma área da página para o mapa Google.
Nesta etapa do tutorial, a div aparece apenas como um bloco cinza porque ainda não há um mapa adicionado. A cor é cinza por causa do CSS que você aplicou. Veja abaixo.
<style>
 #map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

O elemento style em head define o tamanho da div do seu mapa.
Defina a largura e a altura da div como superior a 0px para que mapa fique visível.
Nesse caso, a div terá 500 pixels de altura e comprimento de 100% para ajustar a exibição a largura da sua página da Web. Aplique background-color: grey à div para visualizar a área da página da Web designada para o mapa.

Etapa 2: adicionar um mapa com marcador

Esta seção mostra como carregar a Google Maps JavaScript API em uma página da Web e como gravar o JavaScript que usa a API para adicionar um mapa com marcador.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- 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>
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Sua vez de tentar

Há dois botões no canto direito superior do exemplo de código. Clique no botão na extrema esquerda para abrir o exemplo no JSFiddle.

Entendendo o código

Observe que o exemplo acima não contém mais o CSS que colore a div de cinza. Isso porque agora a div contém um mapa.

Esta tabela explica cada seção do código acima.

Código e descrição
<script>
async defer
src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
</script>

O script carrega a API pelo URL especificado.
O parâmetro callback executa a função initMap depois que a API é totalmente carregada.
O atributo async permite que o navegador continue renderizando o resto da sua página enquanto a API carrega.
O parâmetro key contém a sua chave de API. Você não precisa da sua própria chave de API ao experimentar este tutorial no JSFiddle. Veja a Etapa 3: obter uma chave de API para receber instruções sobre como obter a sua própria chave de API.
<script>
  function initMap() {
  }
</script>

A função initMap inicializa e adiciona o mapa quando a página da Web carrega. Use uma tag script para incluir seu próprio JavaScript que contém a função initMap.
getElementById

Adicione esta função para encontrar a div do mapa na página da Web.
new google.maps.Map()

Adicione este novo objeto do Google Maps para construir um mapa no elemento div.
{
  var uluru = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

}

Adicione propriedades ao mapa, incluindo o ponto central e o nível do zoom. Acesse a documentação para ver outras opções de propriedade.
A propriedade center informa a API a localização do ponto central do mapa. As coordenadas do mapa são definidas na seguinte ordem: latitude, longitude.
A propriedade zoom especifica o nível do zoom do mapa. Zoom: 0 é o menor zoom e exibe toda a Terra. Aumente o valor do zoom para aproximar a visualização da Terra em resoluções maiores.
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});

Adicione este código para inserir um marcador no mapa. A position propriedade define a posição do marcador.

Etapa 3: obter uma chave de API

Esta seção explica como autenticar o aplicativo junto à Google Maps JavaScript API usando a sua chave de API.

Faça o seguinte para obter uma chave de API:

  1. Acesse Google API Console.
  2. Crie ou selecione um projeto.
  3. Clique em Continue para ativar a API e serviços relacionados.
  4. Na página Credentials, obtenha uma chave de API (e defina as restrições dela).

    Observação: Se você já tem uma chave de API irrestrita ou uma com restrições de navegador, use-a.

  5. Para evitar roubo de cota, proteja a chave de API aplicando estas práticas recomendadas.

  6. (Opcional) Ative a cobrança. Consulte os Limites de uso para saber mais.

  7. Copie todo o código desta página do tutorial para o editor de textos. Se você ainda não tem um editor de texto, recomendamos alguns. Você pode usar: Notepad++ (para Windows); TextEdit (para macOS); gedit, KWrite e outros (para máquinas Linux).
  8. Substitua o valor do parâmetro key no URL pela sua chave de API (essa é a chave de API que você acabou de obter).

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
      async defer>
    </script>
    
  9. Salve o arquivo com um nome que termine com .html, como google-maps.html.

  10. Carregue o arquivo HTML em um navegador da Web arrastando-o da área de trabalho para o navegador. Na maioria dos sistemas operacionais, você também pode dar clique duplo no arquivo.

Dicas e solução de problemas

  • Use a interface do JSFiddle para exibir código HTML, CSS e JavaScript em painéis separados. Você pode executar o código e exibir o resultado no painel Results.
  • É possível modificar as opções, como estilo e propriedades, para personalizar o mapa. Para saber mais sobre como personalizar mapas, leia Maps JavaScript API.
  • Use o Console de ferramentas ao desenvolvedor do navegador da Web para testar e executar o código, ler relatórios de erro e resolver problemas de código.

    Atalhos de teclado para abrir o console no Chrome: Command + Option + J (no Mac) ou Control + Shift + J (no Windows).

Enviar comentários sobre…

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