Inserir uma marca em um mapa de Google
Vejamos rapidamente como inserir uma marca em um mapa de Google, que nos serve para assinalar um ponto preciso em um mapa. É um passo muito simples, porém muito importante no manejo do API de Google Maps.
Este artigo está englobado dentro do
manual de manejo do API dos mapas de Google, por isso saltaremos algumas explicações porque já foram apresentadas em artigos anteriores.
Para inserir marcas temos um método, também da classe GMap2, que serve para inserir um elemento sobre o mapa. O método em concreto se chama addOverlay() e recebe como parâmetro a marca que se quer inserir.
map.addOverlay(marker);
No código anterior o objeto map seria uma instancia da classe GMap2. A variável marker conterá a marca que se quer inserir no mapa.
Agora vejamos como criar a marca. Explicaremos em dois passos:
1) Criamos um ponto
A marca deve se situar em um ponto concreto do mapa, que se define por uma longitude e uma latitude (coordenadas x, y no plano terrestre). Para criar um ponto tem que se utilizar a classe GPoint, que recebe no construtor a longitude e latitude desse ponto.
var point = new GPoint (-3.7034815549850464, 40.41689826118782);
2) Criamos a marca
Para criar a marca simplesmente utilizamos a classe GMarker, que em seu construtor deve receber vários valores. Por enquanto colocaremos somente o único valor que é obrigado indicar, que é o ponto sobre o que colocar a marca, criado no passo anterior.
var marker = new GMarker(point);
Exemplo completo
Isso é tudo que necessitamos saber por enquanto. Embora logo veremos outro detalhes interessantes que se podem personalizar nas marcas.
Vejamos o código completo de um mapa de Google com uma marca na praça "Puerta del Sol" de Madri.
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Exemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-SUA-CHAVE-GOOGLE-MAPS" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.41689826118782,-3.7034815549850464), 17);
map.addControl(new GLargeMapControl());
map.setMapType(G_SATELLITE_MAP);
var point = new GPoint (-3.7034815549850464, 40.41689826118782);
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>
Mudar o ícone a uma marca
A marca se cria com um ícone padrão, como uma espécie de tachinha vermelha, porém podemos mudá-la para personalizar o estilo de nossos mapas.
Vamos ver aqui como associar um ícone a uma marca, quando a instanciamos a partir de seu construtor.
O construtor da marca recebe dois parâmetros, o primeiro obrigado é o ponto geográfico e o outro é o ícone, que é opcional. No caso em que não se especifique um ícone se utiliza o G_DEFAULT_ICON, que é uma constante do API que contém o ícone padrão.
var marker = new GMarker(point, meuIcone);
a variável meuIcone neste caso é um objeto da classe GIcon, que pode criar assim:
var meuIcone = new GIcon(G_DEFAULT_ICON);
meuIcone.image = "http://www.meudominio.org/mapas-google/arrow_down.png";
Neste caso, com a primeira instrução se cria um novo ícone, a partir de G_DEFAULT_ICON. Ou seja, um ícone novo, porém com todas as características carregadas do G_DEFAULT_ICON.
Na seguinte linha se modifica a imagem do ícone, atribuindo um novo valor a seu atributo image.
Teríamos que falar mais sobre a criação e modificação de ícones, porque é um tema que requer maior detalhamento para dominá-lo, porém deixaremos para mais adiante.
