Google Maps API v3 - Criando Um Mapa Personalizado - Google APIs - Programação - Blog Princi Agência Web

10/10/2014
Google Maps API v3: Criando um mapa personalizado - Google APIs - Programao - Blog Princi Agncia Web
GOOGLEAPIS
GoogleMapsAPIv3:Criandoum
mapapersonalizado
Por Rodolfo Pereira | 23 de maio, 2013 | 773 comentrios
Fala pessoal, tudo certo?

Depois de termos visto como fazer uma busca de endereo personalizada no Google Maps,
agora hora de aprendermos a pegar todos esses endereos marcados no mapa e exib-los
em uma mapa personalizado, utilizando a API do prprio Google Maps.
Nesse tutorial, mostrarei como carregar um mapa que contenha vrios pontos prdefinidos, bem como personaliz-los para tornar a experincia do usurio mais agradvel.
Vamos nessa?
DEMO
DOWNLOAD
API Key
Para comearmos, siga esse tutorial do prprio Google para pegarmos a API key, que nos
permitir monitorar a nossa aplicao e tambm til ao Google, caso ele tenha que
entrar em contato conosco para falar a respeito da nossa aplicao.
O uso da API key no obrigatrio se a sua aplicao no exceder o limite de consultas
dirio. Caso voc exceda o limite dirio, voc precisar da API key para aumentar o limite
de consultas ou para comprar uma quota de consulta maior.
Exibindo o mapa
Para exibirmos o mapa padro do Google Maps, vamos criar um simples documento HTML,
onde teremos um elemento com altura e largura definidos, uma chamada para o Maps API
Javascript, que a API do Google Maps, e uma chamada para o mapa.js que contm a
inicializao padro do nosso mapa.
1 <!DOCTYPE html>
2 <html lang="pt-br">
3
<head>
http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-um-mapa-personalizado.html
4
<meta charset="utf-8"
5
<title>Google Maps API v3: Criando um mapa personalizado</
1/8
10/10/2014
6
7
8
9
10
11
12
13
14
15
16
17
18
</head>
<body>
<div id="mapa" style
</div>


<script src="http://maps.googleapis.com/maps/api/js?key=ColoqueASua

<script src="js/mapa.js"
</body>
</html>
No nosso arquivo mapa.js, ns temos a chamada padro para inicializar o mapa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var map;
function initialize() {
var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);
var options = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
map = new google.maps.Map(document.getElementById(
initialize();
Agora que exibimos o mapa, hora de inserirmos nossos pontos personalizados dentro do
mapa.
Inserindo os pontos no mapa

Para podermos inserir os pontos no mapa, precisamos de no mnimo a latitude e a
longitude desses pontos. No meu caso, irei criar um arquivo JSON que ir conter esses
pontos, mas voc pode armazen-los onde achar melhor. De incio, o nosso mapa ter 3
pontos: Um no estado de Minas Gerais, outro em So Paulo e outro no Rio de Janeiro. A
latitude e longitude desses pontos eu peguei na demo de busca de endereo no Google
Maps.
Depois de criado, o nosso arquivo pontos.json ficar assim:
1 [
2
{
3
"Latitude": -19.212355602107472,
4
"Longitude": -44.20234468749999
5
},
6
{
7
"Latitude": -22.618827234831404,
8
"Longitude": -42.57636812499999
9
},
10
{
11
"Latitude": -22.57825604463875,
12
"Longitude": -48.68476656249999
2/8
10/10/2014
13
14
Em seguida, criaremos uma funo para colocar esses trs pontos no mapa:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function carregarPontos() {
$.getJSON('js/pontos.json'
$.each(pontos,
var marker =
position:
title:
map: map
});
});
});
}
carregarPontos();
Notem que estou usando jQuery para obter o arquivo JSON e devido a isso ns temos que
incluir a biblioteca jQuery na nossa pgina.
O cdigo acima simples:
1. Uso o $.getJSON para pegar todos os pontos;
2. Usando o $.each, pego cada ponto e vou colocando-os no mapa, definindo sua posio
(position), ttulo (title) e qual mapa (map) ele pertence.
O prximo passo personalizar esses pontos, trocando o marcador padro do Google Maps
e exibir uma caixa de informao personalizada ao clicar em cada marcador do mapa.
Personalizando os marcadores
Primeiro de tudo, vamos alterar o cone do marcador, colocando um personalizado. Aqui
voc tem, basicamente, duas opes: Criar um cone prprio ou pegar um pronto. Caso
queira pegar um pronto, recomendo o siteIcon Finder. No meu caso,usarei esse marcador.
Depois que voc escolher o marcador, nos parmetros dogoogle.maps.Marker, passe o
parmetro icon com o valor do endereo do seu marcador. Ficar assim:
1 ...
2
3 var marker = new google.maps.Marker({
4
position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
5
title: "Meu ponto personalizado! :-D"
6
map: map,
7
icon: 'img/marcador.png'
8
}
)
;
3/8
9
10/10/2014
10
...
Est comeando a ficar bonito! Agora vamos criar o balo de informao de cada ponto,
que ser exibido ao clicar nos marcadores dentro do mapa.
Personalizando a caixa de informao

interessante para o usurio poder clicar nos marcadores do mapa e ver alguma
informao relacionada ao marcador em questo. Para exibir essas informaes de cada
marcador, temos duas opes:
Utilizar a caixa de informao padro

Nesse tutorial no irei utilizar a caixa padro do Google Maps, mas se caso ela atenda as
suas necessidades, deixo abaixo o cdigo para implement-la.
1
2
3
4
5
6
7
8
9
10
var marker = new google.maps.Marker({...

var infowindow = new google.maps.InfoWindow(), marker;
google.maps.event.addListener(marker,
return function() {
infowindow.setContent(
infowindow.open(map, marker);
}
})(marker))
Utilizar uma caixa de informao personalizada

4/8
Para criar uma caixa de informao totalmente personalizada, irei utilizar oInfoBox, o qual
10/10/2014
faz parte doGoogle Maps Utility Library v3.

Vamos baixar o InfoBox e referenci-lo na nossa pgina HTML. Em seguida, escreveremos
um pouco de cdigo para exibir o InfoBox ao clicar nos marcadores do nosso mapa.
1. Identificadores nicos em cada ponto

Iremos garantir que no nosso mapa ns teremos apenas um ponto aberto por vez, ou seja,
ao clicar em um marcador, se houver algum InfoBox aberto, iremos fech-lo e abrir o
InfoBox do marcador clicado. Para isso, vamos editar o arquivo pontos.json e colocar um
identificador nico em cada ponto, pois ser com ele que faremos essa verificao.
1
2
3
4
5
6
7
8
}
...
"Id": 1,
"Latitude": -19.212355602107472,
"Longitude": -44.20234468749999
2. Relacionando cada marcador com o InfoBox

Para cada marcador que colocamos no mapa, temos que fazer uma referncia ao InfoBox,
criando um objeto do tipo InfoBox, referenciando qual o seu marcador e um listener para
garantir a abertura do InfoBox no evento clique do marcador.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
...
var idInfoBoxAberto;
var infoBox = [];
function abrirInfoBox(id, marker) {
if (typeof(idInfoBoxAberto) ==
infoBox[idInfoBoxAberto].close();
}
infoBox[id].open(map, marker);
idInfoBoxAberto = id;
...
var myOptions = {
content: "<p>Contedo do InfoBox</p>"
pixelOffset: new
};
infoBox[ponto.Id] =
infoBox[ponto.Id].marker = marker;
infoBox[ponto.Id].listener = google.maps.event.addListener(marker,
abrirInfoBox(ponto.Id, marker);
});
3. Definindo o visual do InfoBox
5/8
10/10/2014
Por ltimo, vamos personalizar o visual do nosso InfoBox atravs da CSS:

1
2
3
.infoBox { background-color
.infoBox p { padding: 0
.infoBox:before { border-left
Voil! Nosso mapa est ficando cada vez melhor!
Agrupando pontos prximos

Imagine que tenhamos muitos marcadores em uma determinada rua da cidade de
Campinas. Ao carregar o mapa com pouco zoom (como estamos fazendo atualmente),
iremos ver um ponto em cima do outro, dificultando assim o clique nos marcadores para
visualizar suas informaes.
Para resolver esse problema, iremos agrupar esses marcadores quando o mapa estiver com
pouco zoom, e conforme aumentarmos o zoom, iremos separar esses marcadores, de tal
forma que eles fiquem claramente separados. Para fazer esse processo, utilizaremos
o Marker Clusterer Plus, do Google Maps Utility Library v3.
Primeiro de tudo, baixe o Marker Clusterer Plus e referencie-o em nossa pgina HTML.
Aps isso, basta criar um array markers, o qual ir conter cada um dos marcadores, e
pass-los para o MarkerClusterer:
1
...
2 var markers = [];

3
6/8
10/10/2014
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$.each(pontos,
var marker =
position:
title:
icon: 'img/marcador.png'
});
...
});
};
});
markers.push(marker);
var markerCluster =
Agora o MarkerClusterer ir agrupar automaticamente os marcadores muito prximos um

do outro. Perceba que no lugar dos marcadores, ele exibe um cone e um nmero, que
indica a quantidade de marcadores agrupados. Clicando em cima desse nmero, o mapa
aumenta o zoom nesse ponto, e conforme os pontos vo se separando, esse nmero vai
diminuindo.
Zoom automtico para caber todos os pontos na tela

O nosso mapa agora possui marcadores personalizados, agrupamento de marcadores e
caixas de informao totalmente estilizadas por CSS. O ltimo passo , ao carregar o mapa
pela primeira vez, colocar um zoom automtico de forma com que todos os marcadores
sejam exibidos na tela do usurio, sem esconder nenhum ponto.
Para fazer isso, utilizaremos o google.maps.LatLngBounds() e fitBounds:
1 ...
2
3
4
5
var latlngbounds =
6
7
...
8
9
markers.push(marker);
7/8
10/10/2014
10
11
12
13
14
15
16
17
18
19
20
21
latlngbounds.extend(marker.position);
});
var markerCluster =
map.fitBounds(latlngbounds);
});
...
Veja que o mapa carregou com um zoom de modo a exibir todos os pontos no mapa: Os
que havamos colocados previamente no Brasil, e um outro no extremo norte do mapa, na
Colmbia.
E isso! Terminamos nosso humilde mapa ;)
O cdigo completo da criao de mapa personalizado utilizando a API v3 do Google Maps
est no meu GitHub, caso voc queira estudar melhor o cdigo ou fazer alguma alterao.
Qualquer dvida, sugesto, crtica ou doao de cerveja, deixe um comentrio :)
At a prxima!
8/8

Google Maps API v3 - Criando Um Mapa Personalizado - Google APIs - Programação - Blog Princi Agência Web

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Google Maps API v3 - Criando Um Mapa Personalizado - Google APIs - Programação - Blog Princi Agência Web

Загружено:

Авторское право:

Доступные форматы

10/10/2014

Fala pessoal, tudo certo?

No nosso arquivo mapa.js, ns temos a chamada padro para inicializar o mapa:

map = new google.maps.Map(document.getElementById(

Inserindo os pontos no mapa

Personalizando a caixa de informao

Utilizar a caixa de informao padro

var marker = new google.maps.Marker({...

Utilizar uma caixa de informao personalizada

faz parte doGoogle Maps Utility Library v3.

1. Identificadores nicos em cada ponto

2. Relacionando cada marcador com o InfoBox

3. Definindo o visual do InfoBox

Por ltimo, vamos personalizar o visual do nosso InfoBox atravs da CSS:

Voil! Nosso mapa est ficando cada vez melhor!

Agrupando pontos prximos

2 var markers = [];

Agora o MarkerClusterer ir agrupar automaticamente os marcadores muito prximos um

Zoom automtico para caber todos os pontos na tela

Вам также может понравиться