Post on 16-May-2020
• Introdução;
• Geolocalização;
• HelloWorld;
• Tipos de mapas;
• Eventos;
• Controles;
• Superposições;
• Outros serviços;
Roteiro
• Desenvolvida para Javascript;
• A versão 3 (V3) da API é semelhante a versão 2 (V2);
• A V3 foi desenvolvida para agilizar o carregamento de conteúdo nos celulares;
• Ela ainda tem conjunto de funcionalidades menor que a V2;
• Recursos ainda estão sendo migrados para V3;
Google Maps API Javascipt V3 - Introdução
• É a identificação do local geográfico do usuário ou dispositivo;
• Alguns navegadores suportam; Pode não funcionar corretamente;
• Navegadores mais recentes suportam o padrão de geolocalização do W3C, faz parte do HTML 5;
• Alguns navegadores utilizam o endereço IP para detectar o local; valor aproximado;
• Dispositivos que possuem GPS devem utilizar parâmetro do sensor ao carregar a API;
Google Maps API Javascipt V3 - Geolocalização
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">function initialize() {var latlng = new google.maps.LatLng(-34.397, 150.644);var myOptions = {zoom: 8,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP
};var map = new google.maps.Map(
document.getElementById("map_canvas"), myOptions);}
</script>
Google Maps API Javascipt V3 – HelloWorld
<html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
/* scripts do slide anterior */
</head><body onload="initialize()"><div id="map_canvas" style="width:100%; height:100%"></div>
</body></html>
Google Maps API Javascipt V3 – HelloWorld
Google Maps API Javascipt V3 – Tipos de Mapas
• Tipos de mapas:
• ROADMAP - exibe a visualização de mapa padrão;• SATELLITE - exibe imagens de satélite do Google Earth;• HYBRID - exibe uma mistura entre as visualizações normal e de satélite;• TERRAIN - exibe um mapa físico com base nas informações do terreno.
• Alterar o tipo de um mapa “setMapTypeId()”;
Google Maps API Javascipt V3 – Eventos
• Eventos:
• Eventos de usuário (click, dbclick, mouseup);
• As notificações de mudança de estado da API (ex. zoom);
• Registro de escuta para eventos. Exemplo: google.maps.event.addListener();
• Obter informações de argumentos do evento. Exemplo: event.latLng
Google Maps API Javascipt V3 – Eventos
google.maps.event.addListener(map, 'click', function(event) {placeMarker(event.latLng);
});google.maps.event.addListener(map, 'zoom_changed', function() {
setTimeout(moveToDarwin, 3000);});
function placeMarker(location) {var clickedLocation = new google.maps.LatLng(location);map.setCenter(location);
}function moveToDarwin() {var darwin = new google.maps.LatLng(-12.461334, 130.841904);map.setCenter(darwin);
}
Google Maps API Javascipt V3 – Controles
• Controles:
• Navegação - exibe um controle de panorâmica/zoom;
• Escala - exibe um elemento de escala do mapa;
• MapType - permite alternar entre tipos de mapa (como ROADMAP e SATELLITE);
• Por default, Navegação e MapType são carregados sempre;
Google Maps API Javascipt V3 – Controles
function initialize() {var myOptions = {zoom: 4,center: new google.maps.LatLng(-33, 151),disableDefaultUI: true,mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);}
Google Maps API Javascipt V3 – Controles
• Definir os controles um a um:
• navigationControl: boolean;• mapTypeControl: boolean;• scaleControl: boolean;
• Posicionamento dos controles. Ex: LEFT_CENTER, BOTTOM_LEFT;
• Adicionar controles personalizados;
Google Maps API Javascipt V3 – Superposições
• Superposições:
• São objetos no mapa ligados a coordenadas;
• Tipos de superposições:
• Marcadores – Representam locais, pontos;• Polilinhas – Representam uma sequência ordenada de locais;• Polígonos – Representam uma região;• Janela de informações – Exibir conteúdo, imagens em pop-up;• Superposições personalizadas – Criar suas próprias superposições;
Google Maps API Javascipt V3 – Superposições
Marcadores Polilinha Polígono
Janela de Informações Personalizada
Google Maps API Javascipt V3 – Outros serviços
• Geocoding API
• Processo de conversão de endereços (Ex. Av. Unisinos, 911) para coordenadas;
• Processo inverso;
• Directions API
• Calcular as rotas entre dois locais conhecidos;
Google Maps API Javascipt V3 – Outros serviços
• Elevation API
• Fornece informações sobre a elevação de uma determinada localização;
• Places API
• Retorna informações sobre um determinado local ou ponto de interesse;
Google Maps API Javascipt V3 – Referências
• http://code.google.com/intl/pt-BR/apis/maps/
• http://code.google.com/intl/pt-
BR/apis/maps/documentation/javascript/tutorial.html
• http://code.google.com/intl/pt-
BR/apis/maps/documentation/javascript/reference.html