Google Maps - Guia rápido

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 manter 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, zoom, e 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 do local necessário 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 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 -

No capítulo anterior, discutimos como carregar um mapa básico. Aqui, veremos como selecionar um tipo de mapa necessário.

Tipos de mapas

O Google Maps oferece quatro tipos de mapas. Eles são -

  • ROADMAP- Este é o tipo padrão. Se você não escolheu nenhum dos tipos, isso será exibido. Mostra a vista da rua da região selecionada.

  • SATELLITE - Este é o tipo de mapa que mostra as imagens de satélite da região selecionada.

  • HYBRID - Este tipo de mapa mostra as principais ruas em imagens de satélite.

  • TERRAIN - Este é o tipo de mapa que mostra o terreno e a vegetação

Sintaxe

Para selecionar um desses tipos de mapa, você deve mencionar o respectivo id do tipo de mapa nas opções de mapa, conforme mostrado abaixo -

var mapOptions = {
   mapTypeId:google.maps.MapTypeId.Id of the required map type
};

Roteiro

O exemplo a seguir mostra como selecionar um mapa do tipo ROADMAP -

<!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:9,
               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 produzirá a seguinte saída -

Satélite

O exemplo a seguir mostra como selecionar um mapa do tipo SATÉLITE -

<!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:9,
                  mapTypeId:google.maps.MapTypeId.SATELLITE
            };
				
            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 produzirá a seguinte saída -

Híbrido

O exemplo a seguir mostra como selecionar um mapa do tipo HÍBRIDO -

<!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:9,
               mapTypeId:google.maps.MapTypeId.Hybrid
            };
				
            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 produzirá a seguinte saída -

Terreno

O exemplo a seguir mostra como selecionar um mapa do tipo TERRAIN -

<!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:9,
               mapTypeId:google.maps.MapTypeId.TERRAIN
            };
				
            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 produzirá a seguinte saída -

Aumentar / diminuir o valor do zoom

Você pode aumentar ou diminuir o valor do zoom de um mapa, modificando o valor do zoom atributo nas opções do mapa.

Sintaxe

Podemos aumentar ou diminuir o valor de zoom do mapa usando a opção de zoom. Dada a seguir é a sintaxe para alterar o valor de zoom do mapa atual.

var mapOptions = {
   zoom:required zoom value
};

Exemplo: Zoom 6

O código a seguir exibirá o roteiro da cidade Vishakhapatnam com um valor de zoom de 6.

<!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:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

Ele produzirá a seguinte saída -

Exemplo: Zoom 10

O código a seguir exibirá o roteiro da cidade Vishakhapatnam com um valor de zoom de 10.

<!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:10,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

Ele produzirá a seguinte saída -

Por padrão, os nomes das cidades e opções fornecidos no mapa estarão em inglês. Se necessário, podemos exibir essas informações também em outros idiomas. Este processo é conhecido comolocalization. Neste capítulo, aprenderemos como localizar um mapa.

Localizando um mapa

Você pode personalizar (localizar) o idioma do mapa, especificando a opção de idioma no URL conforme mostrado abaixo.

<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>

Exemplo

Aqui está um exemplo que mostra como localizar GoogleMaps. Aqui você pode ver um roteiro da China traduzido para o idioma chinês.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(32.870360, 101.645508),
               zoom:9, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Resultado

Ele produzirá a seguinte saída -

O Google Maps fornece uma interface de usuário com vários controles para permitir que o usuário interaja com o mapa. Podemos adicionar, personalizar e desativar esses controles.

Controles padrão

Aqui está uma lista dos controles padrão fornecidos pelo Google Maps -

  • Zoom- Para aumentar e diminuir o nível de zoom do mapa, teremos um controle deslizante com os botões + e -, por padrão. Este controle deslizante estará localizado no canto esquerdo do mapa.

  • Pan - Logo acima do controle deslizante de zoom, haverá um controle panorâmico para movimentar o mapa.

  • Map Type- Você pode localizar este controle no canto superior direito do mapa. Ele fornece opções de tipo de mapa, como satélite, mapa rodoviário e terreno. Os usuários podem escolher qualquer um desses mapas.

  • Street view- Entre o ícone panorâmico e o controle deslizante de zoom, temos um ícone do Pegman. Os usuários podem arrastar este ícone e colocá-lo em um local específico para obter a vista da rua.

Exemplo

Aqui está um exemplo onde você pode observar os controles de IU padrão fornecidos pelo Google Maps -

Desativando os controles padrão da IU

Podemos desativar os controles padrão da IU fornecidos pelo Google Maps simplesmente tornando o disableDefaultUI valor verdadeiro nas opções do mapa.

Exemplo

O exemplo a seguir mostra como desativar os controles de IU padrão fornecidos pelo Google Maps.

<!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:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Ele produzirá a seguinte saída -

Ativando / desativando todos os controles

Além desses controles padrão, o Google Maps também fornece mais três controles, conforme listado abaixo.

  • Scale- O controle Escala exibe um elemento de escala do mapa. Este controle não é habilitado por padrão.

  • Rotate- O controle Girar contém um pequeno ícone circular que permite girar os mapas que contêm imagens oblíquas. Este controle aparece por padrão no canto superior esquerdo do mapa. (Consulte as imagens de 45 ° para obter mais informações.)

  • Overview- Para aumentar e diminuir o nível de zoom do mapa, temos um controle deslizante com os botões + e -, por padrão. Este controle deslizante está localizado no canto esquerdo do mapa.

Nas opções do mapa, podemos ativar e desativar qualquer um dos controles fornecidos pelo Google Maps conforme mostrado abaixo -

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

Exemplo

O código a seguir mostra como habilitar todos os controles -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Ele produzirá a seguinte saída -

Opções de controle

Podemos alterar a aparência dos controles do Google Maps usando suas opções de controle. Por exemplo, o controle de zoom pode ser reduzido ou ampliado. A aparência do controle MapType pode variar para uma barra horizontal ou um menu suspenso. Abaixo está uma lista de opções de controle para controles de zoom e MapType.

Sr. Não. Nome do Controle Opções de controle
1 Controle de zoom
  • google.maps.ZoomControlStyle.SMALL
  • google.maps.ZoomControlStyle.LARGE
  • google.maps.ZoomControlStyle.DEFAULT
2 Controle de MapType
  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU
  • google.maps.MapTypeControlStyle.DEFAULT

Exemplo

O exemplo a seguir demonstra como usar as opções de controle -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produz a seguinte saída -

Posicionamento de controle

Você pode alterar a posição dos controles adicionando a seguinte linha nas opções de controle.

position:google.maps.ControlPosition.Desired_Position,

Aqui está a lista de posições disponíveis onde um controle pode ser colocado em um mapa -

  • TOP_CENTER
  • TOP_LEFT
  • TOP_RIGHT
  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_CENTER
  • RIGHT_CENTER
  • LEFT_BOTTOM
  • RIGHT_BOTTOM
  • BOTTOM_CENTER
  • BOTTOM_LEFT
  • BOTTOM_RIGHT

Exemplo

O exemplo a seguir mostra como colocar o controle MapTypeid na parte superior central do mapa e como colocar o controle de zoom na parte inferior central do mapa.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produz a seguinte saída -

Podemos desenhar objetos no mapa e vinculá-los a uma latitude e longitude desejadas. Eles são chamados de sobreposições. O Google Maps fornece várias sobreposições, conforme mostrado abaixo.

  • Markers
  • Polylines
  • Polygons
  • Círculo e retângulo
  • Janela de informações
  • Symbols

Para marcar um único local no mapa, o Google Maps fornece markers. Esses marcadores usam um símbolo padrão e esses símbolos podem ser personalizados. Este capítulo explica como adicionar marcadores e como personalizá-los, animá-los e removê-los.

Adicionando um Marcador Simples

Você pode adicionar um marcador simples ao mapa em um local desejado instanciando a classe do marcador e especificando a posição a ser marcada usando latlng, conforme mostrado abaixo.

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

Exemplo

O código a seguir define o marcador na cidade Hyderabad (Índia).

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produz a seguinte saída -

Animando o Marcador

Depois de adicionar um marcador ao mapa, você pode ir mais longe e adicionar animações a ele, como bounce e drop. O fragmento de código a seguir mostra como adicionar animações de salto e soltar a um marcador.

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 

//To make the marker drop
animation:google.maps.Animation.Drop

Exemplo

O código a seguir define o marcador na cidade Hyderabad com um efeito de animação adicionado -

<!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.377631, 78.478603),
               zoom:5
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produz a seguinte saída -

Personalizando o Marcador

Você pode usar seus próprios ícones em vez do ícone padrão fornecido pelo Google Maps. Basta definir o ícone comoicon:'ICON PATH'. E você pode tornar este ícone arrastável definindodraggable:true.

Exemplo

O exemplo a seguir mostra como personalizar o marcador para um ícone desejado -

<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
				
            marker.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produz a seguinte saída -

Removendo o Marcador

Você pode remover um marcador existente configurando o marcador para nulo usando o marker.setMap() método.

Exemplo

O exemplo a seguir mostra como remover o marcador de um mapa -

<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
				
            marker.setMap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produz a seguinte saída -

No capítulo anterior, aprendemos como usar marcadores no Google Maps. Junto com os marcadores, também podemos adicionar várias formas, como círculos, polígonos, retângulos, polilinhas, etc. Este capítulo explica como usar as formas fornecidas pelo Google Maps.

Polilinhas

Polilinhas, fornecidas pelo Google Maps, são úteis para rastrear caminhos diferentes. Você pode adicionar polilinhas a um mapa instanciando a classegoogle.maps.Polyline. Ao instanciar essa classe, temos que especificar os valores necessários das propriedades de uma polilinha, como StrokeColor, StokeOpacity e strokeWeight.

Podemos adicionar uma polilinha a um mapa passando seu objeto para o método setMap(MapObject). Podemos excluir a polilinha passando um valor nulo para o método SetMap ().

Exemplo

O exemplo a seguir mostra uma polilinha destacando o caminho entre as cidades Delhi, Londres, Nova York e Pequim.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(51.508742,-0.120850),
               zoom:3,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var tourplan = new google.maps.Polyline({
               path:[
                  new google.maps.LatLng(28.613939, 77.209021),
                  new google.maps.LatLng(51.507351, -0.127758),
                  new google.maps.LatLng(40.712784, -74.005941),
                  new google.maps.LatLng(28.213545, 94.868713) 
               ],
               
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2
            });
            
            tourplan.setMap(map);
            //to remove plylines
            //tourplan.setmap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produzirá a seguinte saída -

Polígonos

Os polígonos são usados ​​para destacar uma área geográfica específica de um estado ou país. Você pode criar um polígono desejado instanciando a classegoogle.maps.Polygon. Enquanto instanciamos, temos que especificar os valores desejados para as propriedades do Polygon, como path, strokeColor, strokeOapacity, fillColor, fillOapacity, etc.

Exemplo

O exemplo a seguir mostra como desenhar um polígono para destacar as cidades Hyderabad, Nagpur e Aurangabad.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:4,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myTrip = [
               new google.maps.LatLng(17.385044, 78.486671),
               new google.maps.LatLng(19.696888, 75.322451), 
               new google.maps.LatLng(21.056296, 79.057803), 
               new google.maps.LatLng(17.385044, 78.486671)
            ];
            
            var flightPath = new google.maps.Polygon({
               path:myTrip,
               strokeColor:"#0000FF",
               strokeOpacity:0.8,
               strokeWeight:2,
               fillColor:"#0000FF",
               fillOpacity:0.4
            });
            
            flightPath.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produzirá a seguinte saída -

Retângulos

Podemos usar retângulos para destacar a área geográfica de uma determinada região ou estado usando uma caixa retangular. Podemos ter um retângulo em um mapa instanciando a classegoogle.maps.Rectangle. Durante a instanciação, temos que especificar os valores desejados para as propriedades do retângulo, como path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds, etc.

Exemplo

O exemplo a seguir mostra como destacar uma área específica em um mapa usando um retângulo -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myrectangle = new google.maps.Rectangle({
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2,
               
               fillColor:"#0000FF",
               fillOpacity:0.4,
               map:map,
               
               bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(17.342761, 78.552432),
                  new google.maps.LatLng(16.396553, 80.727725)
               )
					
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
</html>

Isso dá a você a seguinte saída -

Círculos

Assim como retângulos, podemos usar Círculos para destacar a área geográfica de uma determinada região ou estado usando um círculo, instanciando a classe google.maps.Circle. Durante a instanciação, temos que especificar os valores desejados para as propriedades do círculo, como path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, etc.

Exemplo

O exemplo a seguir mostra como destacar a área ao redor de Nova Delhi usando um círculo -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(28.613939,77.209021),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
         
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
         
            var myCity = new google.maps.Circle({
               center:new google.maps.LatLng(28.613939,77.209021),
               radius:150600,
            
               strokeColor:"#B40404",
               strokeOpacity:0.6,
               strokeWeight:2,
            
               fillColor:"#B40404",
               fillOpacity:0.6
            });
				
            myCity.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produzirá a seguinte saída -

Além de marcadores, polígonos, polilinhas e outras formas geométricas, também podemos desenhar uma janela de informações no mapa. Este capítulo explica como usar a janela de informações.

Adicionando uma janela

A janela de informações é usada para adicionar qualquer tipo de informação ao mapa. Por exemplo, se você deseja fornecer informações sobre um local no mapa, pode usar uma janela de informações. Normalmente, a janela de informações é anexada a um marcador. Você pode anexar uma janela de informações instanciando ogoogle.maps.InfoWindowclasse. Possui as seguintes propriedades -

  • Content - Você pode passar seu conteúdo em formato String usando esta opção.

  • position - Você pode escolher a posição da janela de informações usando esta opção.

  • maxWidth- Por padrão, a largura da janela de informações será esticada até que o texto seja quebrado. Ao especificar maxWidth, podemos restringir o tamanho da janela de informações horizontalmente.

Exemplo

O exemplo a seguir mostra como definir o marcador e especificar uma janela de informações acima dele -

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produzirá a seguinte saída -

Além de marcadores, polígonos, polilinhas e outras formas geométricas, também podemos adicionar imagens vetoriais predefinidas (símbolos) em um mapa. Este capítulo explica como usar os símbolos fornecidos pelo Google Maps.

Adicionando um Símbolo

O Google fornece várias imagens (símbolos) baseadas em vetores que podem ser usadas em um marcador ou polilinha. Assim como outras sobreposições, para desenhar esses símbolos predefinidos em um mapa, temos que instanciar suas respectivas classes. Abaixo está uma lista de símbolos predefinidos fornecidos pelo Google e seus nomes de classe -

  • Circle - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (closed) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

  • Forward Pointing arrow (closed) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW

  • Forward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

Esses símbolos têm as seguintes propriedades - path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity e strokeWeight.

Exemplo

O exemplo a seguir demonstra como desenhar símbolos predefinidos no Google Maps.

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
					
               draggable:true,
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produz a seguinte saída -

Animando o símbolo

Assim como os marcadores, você também pode adicionar animações como salto e queda aos símbolos.

Exemplo

O exemplo a seguir mostra como usar um símbolo como um marcador em um mapa e adicionar animação a ele -

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
               
               animation:google.maps.Animation.DROP,
               draggable:true,
               map: map
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produz a seguinte saída -

O programa JavaScript do Google Maps pode responder a vários eventos gerados pelo usuário. Este capítulo fornece exemplos que demonstram como realizar o tratamento de eventos ao trabalhar com o Google Maps.

Adicionar um Listener de eventos

Você pode adicionar um ouvinte de evento usando o método addListener(). Ele aceita parâmetros como o nome do objeto ao qual queremos adicionar o ouvinte, o nome do evento e o evento do manipulador.

Exemplo

O exemplo a seguir mostra como adicionar um ouvinte de evento a um objeto marcador. O programa aumenta o valor de zoom do mapa em 5 cada vez que clicamos duas vezes no marcador.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center: myCenter,
               zoom:5,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position: myCenter,
               title:'Click to zoom'
            });
            
            marker.setMap(map);
            
            //Zoom to 7 when clicked on marker
            google.maps.event.addListener(marker,'click',function() {
               map.setZoom(9);
               map.setCenter(marker.getPosition());
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produz a seguinte saída -

Abrindo uma janela de informações ao clicar

O código a seguir abre uma janela de informações ao clicar no marcador -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produz a seguinte saída -

Removendo o Listener

Você pode remover um ouvinte existente usando o método removeListener(). Este método aceita o objeto ouvinte, portanto, temos que atribuir o ouvinte a uma variável e passá-la para este método.

Exemplo

O código a seguir mostra como remover um ouvinte -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            var myListener = google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
				
            google.maps.event.removeListener(myListener);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ele produz a seguinte saída -

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved