Google Maps - Primeiros passos

O que são Google Maps?

O Google Maps é um serviço gratuito de mapeamento da web do Google que fornece vários tipos de informações geográficas. Usando o Google Maps, pode-se.

Pesquise locais ou obtenha direções de um local para outro.
Visualize e navegue por imagens panorâmicas horizontais e verticais de ruas de várias cidades ao redor do mundo.
Obtenha informações específicas, como o tráfego em um determinado ponto.

O Google Maps fornece uma API com a qual você pode personalizar os mapas e as informações exibidas neles. Este capítulo explica como carregar um mapa do Google simples em sua página da web usando HTML e JavaScript.

Etapas para carregar o mapa em uma página da web

Siga as etapas abaixo para carregar um mapa em sua página da web -

Etapa 1: Crie uma página HTML

Crie uma página HTML básica com tags de cabeçalho e corpo, conforme mostrado abaixo -

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Etapa 2: carregar a API

Carregue ou inclua a API do Google Maps usando a tag de script conforme mostrado abaixo -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Etapa 3: criar o contêiner

Para conter o mapa, temos que criar um elemento de contêiner, geralmente a tag <div> (um contêiner genérico) é usada para este propósito. Crie um elemento de contêiner e defina suas dimensões conforme mostrado abaixo -

<div id = "sample" style = "width:900px; height:580px;"></div>

Etapa 4: opções de mapa

Antes de inicializar o mapa, temos que criar um mapOptionsobjeto (ele é criado como um literal) e valores definidos para as variáveis de inicialização do mapa. Um mapa tem três opções principais, a saber,centre, zoome maptypeid.

centre- Nesta propriedade, temos que especificar o local onde queremos centralizar o mapa. Para passar o local, temos que criar umLatLng objeto passando a latitude e longitudes da localização necessária para o construtor.
zoom - Nesta propriedade, temos que especificar o nível de zoom do mapa.
maptypeid- Nesta propriedade, temos que especificar o tipo de mapa que desejamos. A seguir estão os tipos de mapas fornecidos pelo Google -
- ROADMAP (normal, mapa 2D padrão)
- SATÉLITE (mapa fotográfico)
- HÍBRIDO (combinação de dois ou mais outros tipos)
- TERRENO (mapa com montanhas, rios, etc.)

Dentro de uma função, digamos, loadMap(), crie o objeto mapOptions e defina os valores necessários para center, zoom e mapTypeId conforme mostrado abaixo.

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

Etapa 5: Criar um objeto de mapa

Você pode criar um mapa instanciando a classe JavaScript chamada Map. Ao instanciar essa classe, você deve passar um contêiner HTML para conter o mapa e as opções de mapa para o mapa necessário. Crie um objeto de mapa conforme mostrado abaixo.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

Etapa 6: carregar o mapa

Por fim, carregue o mapa chamando o método loadMap () ou adicionando o ouvinte DOM.

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

Exemplo

O exemplo a seguir mostra como carregar o roteiro da cidade chamada Vishakhapatnam com um valor de zoom de 12.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produz a seguinte saída -