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

Conceitos

Desenvolvimento para dispositivos móveis

A Google Maps JavaScript API foi projetada para carregar rapidamente e funcionar bem em dispositivos móveis. Especificamente, nós nos concentramos no desenvolvimento para dispositivos móveis avançados, como celulares Android e iOS. Os dispositivos móveis têm telas menores que os navegadores normais no desktop. Além disso, eles frequentemente têm comportamentos particulares específicos desses dispositivos (como "pinçar para zoom"). Recomendamos as ações a seguir para que o aplicativo funcione bem em dispositivos móveis:

  • Defina o <div> que contém o mapa com atributos de largura e altura de 100%. No entanto, lembre-se de que a exibição de alguns navegadores de desktop antigos não é adequada com esses valores.
  • Detecte dispositivos iPhone e Android examinando a propriedade navigator.userAgent no DOM:
    function detectBrowser() {
      var useragent = navigator.userAgent;
      var mapdiv = document.getElementById("map");
    
      if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
        mapdiv.style.width = '100%';
        mapdiv.style.height = '100%';
      } else {
        mapdiv.style.width = '600px';
        mapdiv.style.height = '800px';
      }
    }
    

    Essa ação permite alterar o layout de determinados dispositivos, como fizemos aqui para alterar o espaço de tela para cada dispositivo.

  • Dispositivos Android e iOS respeitam a seguinte tag <meta>:

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    

    Essa configuração especifica que o mapa é exibido em tela cheia e não pode ser redimensionado pelo usuário. Observe que o navegador Safari do iPhone exige que essa tag <meta> seja incluída no elemento <head> da página.

Para obter mais informações sobre o desenvolvimento para iPhone, consulte a documentação para desenvolvedores da Apple. Para obter mais informações sobre o desenvolvimento para dispositivos Android, consulte a documentação do Android.

Localização

Você pode localizar o seu aplicativo da Google Maps JavaScript API mudando as configurações padrão de idioma e especificando um código de região, que altera o comportamento do mapa com base em dado país ou território. Leia sobre como localizar o mapa.

Controle de versões

A equipe da Google Maps JavaScript API atualiza regularmente a API com novos recursos, correções de erros e melhoras de desempenho. Indique a versão de API a ser carregada no aplicativo especificando-a no parâmetro v da solicitação de bootstrap da Google Maps JavaScript API. Leia mais sobre o controle de versões.

Enviar comentários sobre…

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