Google Maps API - Javascript V3. Luiz Henrique Feltes Maio/2011

Tamanho: px

Começar a partir da página:

Download "Google Maps API - Javascript V3. Luiz Henrique Feltes Maio/2011"

João Vítor Camarinho Marinho
8 Há anos
Visualizações:

1 Google Maps API - Javascript V3 Luiz Henrique Feltes Maio/2011

2 Roteiro Introdução; Geolocalização; HelloWorld; Tipos de mapas; Eventos; Controles; Superposições; Outros serviços;

3 Google Maps API Javascipt V3 - Introdução 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;

4 Google Maps API Javascipt V3 - Geolocalizaçã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;

5 Google Maps API Javascipt V3 HelloWorld <script type="text/javascript" src=" <script type="text/javascript"> function initialize() { var latlng = new google.maps.latlng( , ); var myoptions = { zoom: 8, center: latlng, maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map( document.getelementbyid("map_canvas"), myoptions); } </script>

6 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>

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

8 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

9 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( , ); map.setcenter(darwin); }

10 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;

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

12 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;

13 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;

14 Google Maps API Javascipt V3 Superposições Marcadores Polilinha Polígono Janela de Informações Personalizada

15 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;

16 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;

17 Google Maps API Javascipt V3 Referências BR/apis/maps/documentation/javascript/tutorial.html BR/apis/maps/documentation/javascript/reference.html

18 Google Maps API - Javascript V3 Luiz Henrique Feltes Maio/2011

Documentos relacionados

SOLUÇÕES EM MAPAS INTELIGÊNCIA GEOGRÁFICA

SOLUÇÕES EM MAPAS INTELIGÊNCIA GEOGRÁFICA www.digicade.com.br 2 of 20 SOBRE NÓS A Digicade Tecnologia desenvolve soluções integradas a informações geográficas customizadas para cada modelo de negócio.