Google Maps - Tecgraf JIRA / Confluence - PUC-Rio

Google Maps
Javascript api
Google Maps – Javascript api
• Referência:
– https://developers.google.com/maps/documentation/javascript/tutorial
• Biblioteca javascript para renderizar mapas em páginas web
• Para adicionar a biblioteca na página:
– <script src="http://maps.googleapis.com/maps/api/js"></script>
• Para uso comercial precisa de uma API_KEY!
Google Maps – Mapa
• Criando o Mapa:
//1 aonde renderiza o mapa
var divMapa = document.getElementById('mapa');
//2 configuracao inicial do mapa
var optsMap = {
center: {lng: -43, lat: -22},
zoom: 8
}
map = new google.maps.Map(divMapa, optsMap);
Google Maps – Marker
• Criando o Marker:
// configuracoes do marker
var optsMarker = {
position: {lng: -43, lat: -22},
map: map,
title: 'Hello World!’
};
marker = new google.maps.Marker(optsMarker);
• Removendo um Marker
marker.setMap(null)
Google Maps – InfoWindow
• Criando a InfoWindow:
var optsInfo = {
content: 'Abacaxi'
};
caixaInformacoes = new google.maps.InfoWindow(optsInfo);
• Adicionando evento ao marcador para exibir a InfoWindow
google.maps.event.addListener(marker, 'click', function(){
caixaInformacoes.open(map, marker);
});
Google Maps – Onload
• Para criar o mapa quando a tela acabar de carregar
onload = criaMapa;
// ou
google.maps.event.addDomListener(window, 'load', criaMapa);
Google Maps – Exemplo
• Exemplo Completo no site do material do curso
– https://jira.tecgraf.puc-rio.br/confluence/pages/viewpage.action?pageId=66128299
– exemploMapa.html