Adicionar um marcador com Google Maps JavaScript API v3 Neste artigo vou explicar como adicionar um marcador e como utilizar um ícone personalizado substituindo o marcador característico do Google Maps.

Adicionar um marcador com Google Maps JavaScript API v3

por terça-feira, 24 de setembro de 2013

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 DOWNLOAD

Para adicionar um marcador no mapa temos de fazer uso do construtor google.maps.Marker e definir as opções específicas do marcador.

JavaScript /map.jsmarnoto.com
 // 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.

JavaScript /map.jsmarnoto.com
 ...

 // 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.

Ver exemplo do mapa.

Ícones gratuitos para utilizar no Google Maps em http://mapicons.nicolasmollet.com

CURIOSIDADE
O 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.


Download dos ficheiros necessários para este exemplo

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.

1 comentário para ''Adicionar um marcador com Google Maps JavaScript API v3"

COMENTAR
  1. 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