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 mapavar divMapa = document.getElementById('mapa');//2 configuracao inicial do mapavar 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 Markermarker.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 InfoWindowgoogle.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;// ougoogle.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