Html Google Maps

Criando um Google Map Mashup: Um Guia Passo a Passo

Se você já quis visualizar vários locais em um único mapa, você está com sorte! Criar um mashup do Google Maps é mais fácil do que você pode pensar. Neste post do blog, vamos percorrer o jeito mais simples de plotar múltiplos locais com alfinetes em um Mapa do Google. Ao final, você será capaz de criar seu próprio mapa interativo em apenas alguns passos simples.

O Problema: Como Mapear Múltiplos Locais

Imagine que você tem uma lista de locais como esta:

  • El Cerrito, CA
  • Corvallis, OR
  • Morganton, NC
  • Nova Iorque, NY
  • San Diego, CA

O desafio é criar um Mapa do Google com alfinetes marcando cada um desses lugares. Vamos mergulhar em como alcançar isso facilmente.

Começando

Antes de começarmos a codificar, certifique-se de que você tenha os básicos do Google Maps integrados ao seu projeto e que possua sua Chave da API do Google Maps. Esta chave é essencial para acessar os recursos do Google Maps.

Estrutura HTML Exemplo

Aqui está uma estrutura básica para começar:

<head>
  <script 
   type="text/javascript"
   src="http://maps.google.com/maps?file=api&v=1&key=SUA_CHAVE_API">
  </script>
</head>
<body onload="createMap()" onunload="GUnload()">
  <div id="map" style="width: 600px; height: 400px;"></div>
</body>

Passo 1: Configurando o Mapa

Primeiro, precisamos inicializar o mapa. Aqui está uma função simples para começar:

function createMap() {
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.44, -122.14), 14);
}

Explicação

  • GMap2: Isso inicializa um novo mapa.
  • setCenter: Centraliza o mapa na latitude e longitude especificadas.

Passo 2: Criar Marcadores para Cada Local

Para exibir os locais no mapa, precisamos criar marcadores usando as coordenadas de latitude e longitude. Aqui está como:

var where = new GLatLng(37.925243, -122.307358); // El Cerrito, CA
var marker = new GMarker(where); // Criar marcador
map.setCenter(where); // Centralizar mapa no marcador
map.addOverlay(marker); // Adicionar marcador ao mapa

Adicionando Mais Locais

Você precisaria definir manualmente as coordenadas para cada cidade, o que pode ser trabalhoso. Em vez disso, considere usar o serviço Geocoder do Google para recuperar automaticamente latitude e longitude para cada endereço.

Passo 3: Usando o Geocoder

Em vez de procurar latitude e longitude manualmente, use este trecho:

var address = "El Cerrito, CA";
var geocoder = new GClientGeocoder();
geocoder.getLatLng(address, function(point) {
  if (point) {
    map.clearOverlays(); // Limpar marcadores anteriores
    map.addOverlay(new GMarker(point)); // Adicionar novo marcador
    map.setCenter(point, 10); // Centralizar e ampliar o mapa
  }
});

Explicação

  • GClientGeocoder: Este serviço ajuda a converter endereços em coordenadas geográficas.
  • getLatLng: Recupera a latitude e a longitude com base no endereço.

Passo 4: Percorrer Todos os Locais

Finalmente, se você estiver mapeando muitos locais, armazene-os em um array e execute um loop para criar cada marcador:

var locations = ["El Cerrito, CA", "Corvallis, OR", "Morganton, NC", "Nova Iorque, NY", "San Diego, CA"];
locations.forEach(function(location) {
  geocoder.getLatLng(location, function(point) {
    if (point) {
      map.addOverlay(new GMarker(point));
    }
  });
});

Conclusão

Criar um mashup do Google Maps com alfinetes para vários locais não é apenas fácil, mas também uma ótima maneira de visualizar dados. Com a configuração correta e um pouco de codificação, você pode transformar qualquer lista de locais em uma experiência interativa.

Recapitulação Rápida:

  • Configure sua API do Google Maps.
  • Inicialize o mapa.
  • Crie marcadores usando geocodificação para precisão.
  • Percorra facilmente múltiplos locais.

Agora é a sua vez de criar seu próprio mashup de mapas! Boa codificação!