Para utilizar este script, é necessário ter um documento HTML iniciado com a tag <!DOCTYPE html> (Mostrando que trata-se de um documento HTML 5), importar o script (versão 3) da API do GoogleMaps (<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>) e possuir um HTML DIV com a propriedade id igual à map-canvas.
var map;
var geocoder;
var directionsDisplay;
var directionsService;
function initialize() {
geocoder = new google.maps.Geocoder();
// MARCANDO PONTOS
geocoder.geocode({'address':'Cidade Nova, Rio de Janeiro'}, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
title: 'Cidade Nova',
icon: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
});
}
});
//
geocoder.geocode({'address':'Lapa, Rio de Janeiro'}, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
title: 'Lapa',
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
}
});
// INICIANDO MAPA
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Escreva um arquivo HTML com as informações apresentadas anteriormente, ao abrir o mesmo no browser teremos o conteúdo conforme apresentado na Figura 1 (sem os destaques em vermelho). |
| Figura 1 - Resultado do Código JavaScript com GoogleMaps API |
Observando o código com cuidado, vemos que uma variável do tipo google.maps.Geocoder é a responsável por solicitar ao serviço do googlemaps uma determinada coordenada de geolocalização. Isto é realizado com o método geocode que envia um endereço (no formato JSON) e ao final do processamento do endereço executa a função informada no segundo parâmetro.
A verificação de status igual à google.maps.GeocoderStatus.OK mostra que o serviço foi executado com sucesso. Note que após esta verificação é criada uma variável do tipo google.maps.Marker responsável por "pintar" uma marca no mapa. Podemos personalizar algumas características no google.maps.Marker, neste caso, foi escolhido apenas um ícone diferente do ícone vermelho padrão.
Uma vez que criamos os dois pontos no mapa, precisamos ainda informar a API para desenhar o mapa. A variável do tipo google.maps.Map é responsável por desenhar uma mapa em um objeto HTMLDivElement. Note que é possível passar algumas informações para personalizar o mapa no momento da geração do mesmo. Em nosso caso passamos zoom igual à 15 e google.maps.MapTypeId.ROADMAP para o tipo do mapa.
O tipo padrão de mapa do google é o tipo ROADMAP, temos ainda os tipos SATELLITE (utilizado no aplicativo Google Earth), HYBRID (mistura dos tipos ROAPMAP e SATELLITE) e TERRAIN (utilizado para apresentar informações de relevo). Utilize os tipos de mapas e visualize a diferença no browser.
That's all folk's!
Nenhum comentário:
Postar um comentário