Os marcadores são simples ícones que indicam a posição de um determinado local num mapa.
Já vimos anteriormente como adicionar um mapa a uma página de um web site. Neste tutorial vou explicar como adicionar um marcador e como utilizar um ícone personalizado substituindo o marcador característico do Google Maps.
Poderás estar interessado em Rápido e simples partilhar um local com o Google Maps
Antes de iniciar o tutorial vê uma demonstração do mapa ou faz o download do código necessário para seguir este exemplo.
DEMO DOWNLOADPara adicionar um marcador no mapa temos de fazer uso do construtor google.maps.Marker e definir as opções específicas do marcador.
// variável que indica as coordenadas do centro do mapa
var praiaBarra = new google.maps.LatLng(40.640416,-8.749541);
// variável que indica as coordenadas do marcador
var farolAveiro = new google.maps.LatLng(40.642851,-8.747596);
function initialize() {
var mapOptions = {
center: praiaBarra, // variável com as coordenadas Lat e Lng
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
// variável que define as opções do marcador
var marker = new google.maps.Marker({
position: farolAveiro, // variável com as coordenadas Lat e Lng
map: map,
title:"Farol de Aveiro"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Adicionar um simples marcador no mapa requer a adição de uma nova variável à função initialize() que vamos designar de marker. A variável marker faz uma chamada ao construtor google.maps.Marker e passa os parâmetros position, map e title.
- position - valores de latitude e longitude do marcador. Fora da função initialize() é criada a variável farolAveiro que define as coordenadas de Latitude e Longitude para o marcador a inserir no mapa. Os valores das coordenadas LatLng enviados para a API têm sempre de ser passados através do construtor google.maps.LatLng().
- map - neste caso o marcador é adicionado ao único mapa existente definido pela variável map.
- title - O título do marcador é visível quando o cursor do rato é colocado sobre o marcador.
Alterar a imagem do marcador do Google Maps
O exemplo anterior adiciona um marcador no mapa com a imagem característica do Google Maps. Mas existe uma opção que permite a utilização de imagens personalizadas nos marcadores.
A opção icon permite definir um URL para a imagem pretendida.
...
// variável que define o URL para a nova imagem do marcador
var minhaImagem = 'images/farol.png';
// variável que define as opções do marcador
var marker = new google.maps.Marker({
position: farolAveiro,
map: map,
title:"Farol de Aveiro",
icon: minhaImagem // define a nova imagem do marcador
});
}
google.maps.event.addDomListener(window, 'load', initialize);
A API redimensiona automaticamente a imagem a utilizar como marcador. No entanto é aconselhável a utilização de imagens com uma largura de 20px e altura de 32px. Para utilizar o icon normal do Google Maps basta remover a opção icon: minhaImagem.
Ícones gratuitos para utilizar no Google Maps em http://mapicons.nicolasmollet.com
CURIOSIDADEO Farol de Aveiro fica situado na praia da Barra, concelho de Ílhavo, com 62m de altura, é o farol mais alto de Portugal e o segundo maior da Península Ibérica.
Todas as dúvidas ou comentários são bem-vindos. Por favor, utilizar a secção de comentários para que todos partilhem da informação.
Miguel Marnoto
A minha especialização no Google Maps e na sua API JavaScript v3 é uma consequência do gosto pelos mapas e o reconhecimento da importância que o serviço Google Maps tem hoje no dia-a-dia das pessoas.
Amigo sou novo em programação, gostaria de saber como faço para cadastrar um endereço e altomaticamente ele criar um marcador no mapa, se posivel teria algum exemplo ?
ResponderEliminar