Google Maps API - Javascript V3€¦ · Google Maps API Javascipt V3 ... Obter informações de argumentos do evento. Exemplo: event.latLng. Google Maps API Javascipt

Google Maps API - Javascript V3

Luiz Henrique FeltesMaio/2011

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


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


• 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

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



Google Maps API - Javascript V3

Luiz Henrique FeltesMaio/2011

Documents

Google Maps API - Javascript V3€¦ · Google Maps API Javascipt V3 ... Obter informações de argumentos do evento. Exemplo: event.latLng. Google Maps API Javascipt