» Criando InfoBox personalizado no Google Maps
09/09/2015    Javascript

Olá!
Nesse artigo vou mostrar como criar um um InfoBox.

Mas o que exatamente é um InfoBox?
Se você for no Google Maps, e digitar algum local por exemplo 'Palácio do Planalto', ele encontrará esse ponto e mostrará um marcador. Ao você clicar nesse marcador, aparecerá uma InfoWindow, ou seja, uma caixinha com as informações sobre esse local, mas será as informações que o Google possui.

Há uma biblioteca em Javascript chamada InfoBox, você pode utilizar em sua página que mostra um mapa e criar uma InfoWindow personalizada onde você pode colocar as informações e aparência que quiser.
Veja em funcionamento: InfoBox personalizado

Então vamos começar...

Precisaremos incluir na página 2 bibliotecas Javascript: a do Google Maps e a do InfoBox.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

Vamos criar a div que se tornará o mapa.

<div id="div_mapa" style="height: 400px; width: 500px;"></div>

Também precisamos criar uma div que aparecerá para o usuário como InfoBox.

<div style="display: none;">
	<div id="div_infobox" class="div_infobox">
		<span class="negrito">Cidade de Barra Mansa</span>
Próxima às duas maiores metrópoles<br/>brasileiras: Rio de Janeiro e São Paulo.
O clima é mesotérmico, com verões quentes<br/>e chuvosos e inverno seco.<br />
Este é um exemplo de InfoBox personalizado :) </div> </div>

Agora o código HTML já está todo pronto, vamos inserir o CSS para deixar a InfoBox bonitinha.

.div_infobox {
	background-color: white;
	font-family: Verdana;
	font-size: 12px;
	border: 2px solid #3D9599;
	border-radius: 3px;
	padding: 10px;
	color: #4A4848;
	}
.negrito { font-weight: bold; }

Agora temos que criar o Javascript.
Vamos criar 2 variáveis, uma será o nosso mapa e a outra será o local que queremos exibir.

var mapa;
var local = new google.maps.LatLng(-22.538074, -44.175262);

Criamos a variável mapa e em seguida a variável com a latitude e longitude do local.

Agora vamos criar as configurações do mapa e em seguida jogá-lo na div_mapa.

// Configuracao do mapa
var opcoes = {
	zoom: 14,
	center: local,
	mapTypeId: google.maps.MapTypeId.HYBRID
};
mapa = new google.maps.Map(document.getElementById("div_mapa"), opcoes);

Informamos o zoom inicial, o centro do mapa(variavel local) e o estilo do mapa(HYBRID).
Ver todos os estilos de mapa
Ver todas as opcoes de configuração

Agora precisamos criar um marcador e joga-lo no mapa.

// Marcador
var marker = new google.maps.Marker({
    position: local,
    title: "Ponto Exemplo",
    map: mapa
});

Os parãmetros passados foram: Onde o marcador vai aparecer(variavel local); O title, ou seja, o que aparecerá quando o mouse ficar em cima do marcador e em qual mapa ele será adicionado(variavel mapa).

Agora nos resta o último passo, criar, configurar e jogar o InfoBox no mapa.

// Infobox
var meu_infobox = document.getElementById('div_infobox');

// Configuracao do InfoBox
var ibOpcoes = {
    content: meu_infobox,
	disableAutoPan: true,
	pixelOffset: new google.maps.Size(-120, 0),
	zIndex: null,
	infoBoxClearance: new google.maps.Size(1, 1),
    closeBoxMargin: "5px 5px 0px 0px",
	isHidden: false,
	pane: "floatPane",
	enableEventPropagation: true
};

Lembra daquela div criada no começo do artigo com outra div em modo invisível em volta? Então, jogamos ela como sendo o conteúdo da variável meu_infobox.
Em seguida criamos a configuração do InfoBox.
Eu coloquei as configurações principais, mas você pode Ver todas as opções de configuração Link e modificar as que quiser.

Já estamos terminando! Só mais algumas linhas de código.

// Joga o InfoBox no mapa
var ib = new InfoBox(ibOpcoes);
ib.open(mapa, marker);

// Abre o InfoBox no onlick
google.maps.event.addListener(marker, "click", function (e) {
    ib.open(mapa, this);
});
ib.close();

No primeiro bloco de código o InfoBox foi jogado no mapa mas quando o usuário fecha-lo, não há nada fazendo com que ele apareça de novo. Então criamos uma ação para quando o usuário clicar no marcador, e jogamos o InfoBox nessa ação.
Sendo assim, sempre que o usuário clicar no marcador o InfoBox vai aparecer novamente.
A última linha é para fechar o InfoBox, mas caso você deseje que o mapa já seja carregado com o InfoBox aberto, basta tirar essa linha.

E por último, crie uma função e pegue TODO o código Javascript que trabalhamos até agora e coloque dentro desta função.
Jogue a função no final de tudo para ser executada.

function inicia_mapa() {
    // Todo codigo Javascript aqui
}

inicia_mapa();


Veja em funcionamento: InfoBox personalizado

Dicas
A execução da função precisa ser jogada depois das divs que criamos para se tornarem o mapa e a InfoBox, porque se for antes as divs ainda não terão sido renderizadas e dará erro, o ideal é chamar a função antes do fechamento da tag body.
Caso utilize JQuery, o mais aconselhado é fazer da seguinte forma.

$(function() {
    inicia_mapa();
});

Terminado! Agora é só usar a imaginação.
Se gostou desse artigo curta e compartilhe.
Até a próxima!




Comentários