Google Maps Javascript api. Google Maps – Javascript api Referência: –https://developers.google.com/maps/documentation/javascript/tutorialhttps://developers.google.com/maps/documentation/javascript/tutorial.

Apresentação em tema: "Google Maps Javascript api. Google Maps – Javascript api Referência: –https://developers.google.com/maps/documentation/javascript/tutorialhttps://developers.google.com/maps/documentation/javascript/tutorial."— Transcrição da apresentação:

1 Google Maps Javascript api

2 Google Maps – Javascript api Referência: –https://developers.google.com/maps/documentation/javascript/tutorialhttps://developers.google.com/maps/documentation/javascript/tutorial Biblioteca javascript para renderizar mapas em páginas web Para adicionar a biblioteca na página: – Para uso comercial precisa de uma API_KEY!

3 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);

4 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)

5 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); });

6 Google Maps – Onload Para criar o mapa quando a tela acabar de carregar onload = criaMapa; // ou google.maps.event.addDomListener(window, 'load', criaMapa);

7 Google Maps – Exemplo Exemplo Completo no site do material do curso –https://jira.tecgraf.puc-rio.br/confluence/pages/viewpage.action?pageId=66128299https://jira.tecgraf.puc-rio.br/confluence/pages/viewpage.action?pageId=66128299 –exemploMapa.html