Google Maps Javascript API V3 Services - Google Maps JavaScript API V3 - Google Code

Google Maps JavaScript API V3

Observação: A Google Maps JavaScript API Versão 3 documentada nestas páginas é agora a JavaScript API oficial.A Versão 2 dessa API possui previsão oficial de remoção, de acordo com a nossa política de remoção.Incentivamos você a migrar o seu código para esta nova e aprimorada versão!

GeocodificaçãoSolicitações de geocodificaçãoRespostas de geocodificação

Resultados de geocódigoTipos de componentes de endereçoCódigos de status

Geocodificação reversaPolarização da janela de visualizaçãoPolarização do código de região

RotasSolicitações de rota

Modos de transporteSistemas de medidas

Como renderizar rotasCódigos de status de rotasComo exibir o DirectionsResult

Objeto DirectionsResultsTrajetosTrechosEtapas

Como inspecionar o DirectionsResultsComo usar pontos de referência em trajetos

ElevaçãoSolicitações de elevação

Solicitações de elevação de localSolicitações de elevação de caminho

Respostas de elevaçãoStatus de elevaçãoResultados de elevação

Exemplos de elevação

Street ViewComo adicionar o Street View ao mapaPanoramas do Street View

Recipientes do Street ViewLocais do Street ViewPontos de vista (POV) do Street View

Superposições no Street ViewEventos do Street ViewComo personalizar os controles do Street ViewComo acessar diretamente dados do Street View

Geocodificação é o processo de conversão de endereços (como "1600 Amphitheatre Parkway, Mountain View, CA")em coordenadas geográficas (como latitude 37.423021 e longitude -122.083739), que você pode usar para colocarmarcadores ou posicionar o mapa.

A API do Google Maps fornece uma classe de geocodificador para geocodificar endereços dinamicamente a partir daentrada do usuário. Se, em vez disso, você quiser geocodificar endereços estáticos e conhecidos, consulte adocumentação do Serviço da web de geocodificação.

Solicitações de geocodificação

O acesso ao serviço de geocodificação é assíncrono, uma vez que a API do Google Maps precisa fazer uma chamadapara um servidor externo. Por essa razão, você precisa passar um método de retorno de chamada a ser executadoapós a conclusão da solicitação. Esse método de retorno de chamada processa os resultados. O geocodificador

Google Maps Javascript API V3 Services

Geocodificação

15/04/2011 Google Maps Javascript API V3 Services -…

code.google.com/intl/…/services.html 1/27

pode retornar mais de um resultado.

Você acessa o serviço de geocodificação da API do Google Maps dentro do seu código por meio do objetogoogle.maps.Geocoder. O método Geocoder.geocode() inicia uma solicitação para o serviço degeocodificação, passando um literal de objeto GeocodeRequest, que contém os termos de entrada e um métodode retorno de chamada a ser executado ao receber a resposta.

O literal de objeto GeocodeRequest contém os seguintes campos:

{ address: string, latLng: LatLng, bounds: LatLngBounds, language: string, region: string,}

Esses campos são explicados abaixo.

address (obrigatório) — O endereço que deseja geocodificar.*latLng (obrigatório*) — O LatLng para o qual você deseja obter o endereço mais próximo, legível parahumanos.bounds (opcional) — O LatLngBounds no qual induzir os resultados de geocódigo com mais destaque.Para obter mais informações, consulte Polarização da janela de visualização, abaixo.language (opcional) — O idioma para os resultados retornados.region (opcional) — O código de região, especificado como uma subtag de region de idioma IANA. Namaioria dos casos, essas tags são convertidas diretamente nos valores usuais ccTLD ("domínio de nívelsuperior") de dois caracteres. Para obter mais informações, consulte Polarização do código de região, abaixo.

* Observação: Você pode passar um address ou latLng para pesquisa. Se você passar um latLng, ogeocodificador realizará o que é conhecido como uma geocodificação reversa. Consulte Geocodificação reversa paraobter mais informações.

Os parâmetros bounds e region influenciarão apenas os resultados do geocodificador, sem restringi-lostotalmente.

Respostas de geocodificação

O serviço de geocodificação exige um método de retorno de chamada a ser executado após a recuperação dosresultados do geocodificador. Esse retorno de chamada deve passar dois parâmetros para conter results e umcódigo status, nessa ordem. Como Geocoder pode retornar mais de uma entrada, o literal do objetoGeocoderResults é uma matriz.

O literal do objeto GeocoderResults representa um resultado individual de geocodificação e é um objeto com oseguinte formato:

results[]: { types[]: string, formatted_address: string, address_components[]: { short_name: string, long_name: string, types[]: string }, geometry: { location: LatLng, location_type: GeocoderLocationType viewport: LatLngBounds, bounds: LatLngBounds }}

Esses campos são explicados abaixo:

types[] é uma matriz que indica o tipo do resultado retornado. Essa matriz contém um conjunto de uma oumais tags que identificam o tipo de recurso retornado no resultado. Por exemplo, um geocódigo de "Chicago"retorna "locality", que indica que "Chicago" é uma cidade, e também retorna "political", que indica que é umaentidade política.

formatted_address é uma string que contém o endereço legível para humano deste local. Normalmente,esse endereço é equivalente ao "endereço postal", que algumas vezes é diferente de acordo com o país (emalguns países, como na Grã Bretanha, a distribuição dos endereços postais verdadeiros não é permitida por

Resultados de geocodificação



restrições de licença). Esse endereço é normalmente composto por um ou mais componentes de endereço.Por exemplo, o endereço "111 8th Avenue, New York, NY" contém componentes de endereço separados para"111 8th Avenue" (um endereço), "New York" (a cidade) e "NY" (o estado americano). Esses componentes deendereço são observados abaixo. Para obter mais informações sobre os tipos de endereço, consulte Tipos,abaixo.

address_component[] é uma matriz que contém os componentes de endereço separados, conformeexplicado acima.

geometry contém as seguintes informações:

location contém o valor de latitude,longitude geocodificado. Retornamos esse local como um objetoLatLng, não como uma string formatada.

location_type armazena dados adicionais sobre o local especificado. Os valores a seguir sãosuportados no momento:

google.maps.GeocoderLocationType.ROOFTOP indica que o resultado retornado reflete umgeocódigo preciso.google.maps.GeocoderLocationType.RANGE_INTERPOLATED indica que o resultadoretornado reflete uma aproximação (normalmente em uma estrada) interpolada entre dois pontosprecisos (como interseções). Os resultados interpolados normalmente são retornados quandogeocódigos "rooftop" não estão disponíveis para um endereço.google.maps.GeocoderLocationType.GEOMETRIC_CENTER indica que o resultadoretornado é o centro geométrico de um resultado, como uma polilinha (por exemplo, uma rua) ou umpolígono(região).google.maps.GeocoderLocationType.APPROXIMATE indica que o resultado retornado éaproximado.

viewport armazena a janela de visualização recomendada para o resultado retornado.bounds (retornado opcionalmente) armazena o LatLngBounds que pode conter totalmente o resultadoretornado. Esses limites talvez não correspondam à janela de visualização recomendada. Por exemplo,San Francisco inclui as Ilhas Farallon, que tecnicamente fazem parte da cidade, mas não devem serretornadas na janela de visualização.

A matriz types[] no resultado retornado indica o tipo de endereço. Esses tipos também podem ser retornados nasmatrizes address_components[] para indicar o tipo de componente de endereço específico. Endereços dentrodo geocodificador podem ter múltiplos tipos, que podem ser considerados "tags". Por exemplo, muitas cidades sãomarcadas com o tipo political e locality.

Os seguintes tipos são suportados e retornados pelo geocodificador HTTP:

street_address indica um endereço preciso.route indica uma rota nomeada (como "US 101").intersection indica uma interseção principal, normalmente de duas estradas principais.political indica uma entidade política. Normalmente, esse tipo indica um polígono de algumaadministração civil.country indica a entidade política nacional, e é normalmente o tipo de ordem mais alta retornado porGeocoder.administrative_area_level_1 indica uma entidade civil de primeira ordem abaixo do nível de país.Nos Estados Unidos, esses níveis administrativos são estados. Nem todas as nações exibem esses níveisadministrativos.administrative_area_level_2 indica uma entidade civil de segunda ordem abaixo do nível de país.Nos Estados Unidos, esses níveis administrativos são municípios. Nem todas as nações exibem esses níveisadministrativos.administrative_area_level_3 indica uma entidade civil de terceira ordem abaixo do nível de país.Esse tipo indica uma divisão civil menor. Nem todas as nações exibem esses níveis administrativos.colloquial_area indica um nome alternativo usado comumente para a entidade.locality indica uma cidade ou entidade política municipal incorporada.sublocality indica uma entidade civil de primeira ordem abaixo de uma localidade.neighborhood indica um bairro nomeado.premise indica um local nomeado, normalmente um edifício ou condomínios com um nome comum.subpremise indica uma entidade de primeira ordem abaixo de um local nomeado, normalmente um únicoedifício dentro de um condomínio com um nome comum.postal_code indica um código postal, conforme usado para endereçar correspondências dentro do país.natural_feature indica um recurso natural de destaque.airport indica um aeroporto.park indica um parque nomeado.

Além dos itens acima, os componentes de endereço podem exibir os seguintes itens:

post_box indica uma caixa postal específica.street_number indica o número exato da rua.

Tipos de componentes de endereço



floor indica o andar de um edifício.room indica a sala de um edifício.

O código status pode retornar um dos seguintes valores:

google.maps.GeocoderStatus.OK indica que o geocódigo teve êxito.google.maps.GeocoderStatus.ZERO_RESULTS indica que o geocódigo teve êxito, mas não retornouresultados. Isso pode ocorrer se o geocódigo passou um address ou latng não existente em um localremoto.google.maps.GeocoderStatus.OVER_QUERY_LIMIT indica que você ultrapassou a sua cota.google.maps.GeocoderStatus.REQUEST_DENIED indica que a sua solicitação foi negada por algumarazão.google.maps.GeocoderStatus.INVALID_REQUEST normalmente indica que está faltando a consulta(address ou latLng).

Neste exemplo, nós geocodificamos um endereço e colocamos um marcador nos valores de latitude e longituderetornados. O manipulador foi passado como um literal de função anônimo.

var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }

function codeAddress() { var address = document.getElementById("address").value; if (geocoder) { geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } }

<body onload="initialize()"> <div id="map_canvas" style="width: 320px; height: 480px;"></div> <div> <input id="address" type="textbox" value="Sydney, NSW"> <input type="button" value="Encode" onclick="codeAddress()"> </div></body>

Ver exemplo (geocoding-simple.html)

Geocodificação reversa (consulta de endereço)

O termo geocodificação normalmente se refere à tradução de um endereço legível para humanos em uma localizaçãono mapa. O processo de conversão, ou seja, tradução de uma localização no mapa em um endereço legível parahumanos é conhecido como geocodificação reversa.

O Geocoder suporta a geocodificação reversa diretamente. Em vez de fornecer um address textual, forneça um parde latitude/longitude separado por vírgula no parâmetro latLng.

O exemplo a seguir geocodifica um valor de latitude/longitude e centraliza o mapa no local, mostrando uma janela deinformações com o endereço formatado. Retornamos o segundo resultado, que é menos específico do que oprimeiro (nesse caso, um nome de bairro):

var geocoder;

Códigos de status



var map; var infowindow = new google.maps.InfoWindow(); var marker; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(40.730885,-73.997383); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }

function codeLatLng() { var input = document.getElementById("latlng").value; var latlngStr = input.split(",",2); var lat = parseFloat(latlngStr[0]); var lng = parseFloat(latlngStr[1]); var latlng = new google.maps.LatLng(lat, lng); if (geocoder) { geocoder.geocode({'latLng': latlng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { map.setZoom(11); marker = new google.maps.Marker({ position: latlng, map: map }); infowindow.setContent(results[1].formatted_address); infowindow.open(map, marker); } } else { alert("Geocoder failed due to: " + status); } }); } }

No exemplo anterior, nós mostramos o segundo resultado (selecionando results[1]). O geocodificador reversonormalmente retorna mais de um resultado. Os "endereços" da geocodificação não são apenas endereços postais,mas qualquer forma de nomear geograficamente uma localização. Por exemplo, ao geocodificar um ponto na cidadede Chicago, o ponto geocodificado pode ser rotulado como um endereço, como a cidade (Chicago), como seu estado(Illinois) ou como um país (Os Estados Unidos). Todos são endereços para o geocodificador. O geocodificadorreverso retorna todos esses resultados.

O geocodificador reverso compara entidades políticas (países, províncias, cidades e bairros), endereços e códigospostais.

A lista completa de endereços retornados pela consulta anterior é exibida abaixo.

results[0].formatted_address: "275-291 Bedford Ave, Brooklyn, NY 11211, USA",results[1].formatted_address: "Williamsburg, NY, USA",results[2].formatted_address: "New York 11211, USA",results[3].formatted_address: "Kings, New York, USA",results[4].formatted_address: "Brooklyn, New York, USA",results[5].formatted_address: "New York, New York, USA",results[6].formatted_address: "New York, USA",results[7].formatted_address: "United States"

Os endereços são retornados na ordem de melhor a pior correspondência. Normalmente, o endereço mais exato é oresultado mais destacado, como nesse caso. Retornamos tipos diferentes de endereços, desde o mais es pecíficoaté as entidades políticas menos específicas, como bairros, cidades, municípios, estados etc. Se você quiser fazeruma correspondência de um endereço mais geral, convém inspecionar o campo results[].types.

Observação: A geocodificação reversa não é uma ciência exata. O geocodificador tentará encontrar o localendereçável mais próximo dentro de uma certa tolerância.

Ver exemplo (geocoding-reverse.html)

Polarização da janela de visualização

Você também pode instruir o Serviço de geocodificação a preferir resultados dentro de uma determinada janela devisualização (expressa como uma caixa delimitadora). Para isso, configure o parâmetro bounds dentro do literal do



objeto GeocodeRequest para definir os limites dessa janela de visualização.

Por exemplo, um geocódigo para "Winnetka" normalmente retorna este subúrbio de Chicago:

{ "types":["locality","political"], "formatted_address":"Winnetka, IL, USA", "address_components":[{ "long_name":"Winnetka", "short_name":"Winnetka", "types":["locality","political"] },{ "long_name":"Illinois", "short_name":"IL", "types":["administrative_area_level_1","political"] },{ "long_name":"United States", "short_name":"US", "types":["country","political"] }], "geometry":{ "location":[ -87.7417070, 42.1083080], "location_type":"APPROXIMATE" }}

No entanto, especificar um parâmetro bounds que define uma caixa delimitadora para San Fernando Valley de LosAngeles resulta neste geocódigo, que retorna o bairro chamado "Winnetka" nesse local:

{ "types":["sublocality","political"], "formatted_address":"Winnetka, California, USA", "address_components":[{ "long_name":"Winnetka", "short_name":"Winnetka", "types":["sublocality","political"] },{ "long_name":"Los Angeles", "short_name":"Los Angeles", "types":["administrative_area_level_3","political"] },{ "long_name":"Los Angeles", "short_name":"Los Angeles", "types":["administrative_area_level_2","political"] },{ "long_name":"California", "short_name":"CA", "types":["administrative_area_level_1","political"] },{ "long_name":"United States", "short_name":"US", "types":["country","political"] }], "geometry":{ "location": [34.213171,-118.571022], "location_type":"APPROXIMATE" }}

Polarização do código de região

Você também pode definir o Serviço de geocodificação para retornar resultados polarizados para uma regiãoespecífica usando explicitamente o parâmetro region. Este parâmetro usa um código de região, especificado comouma subtag de region de idioma IANA. Na maioria dos casos, essas tags são convertidas diretamente nos valoresusuais ccTLD ("domínio de nível superior") de dois caracteres, como "uk" em "co.uk", por exemplo. Em alguns casos,a tag de region também é compatível com códigos ISO-3166-1, que, às vezes, diferem dos valores ccTLD ("GB"para "Grã-Bretanha", por exemplo).

As solicitações de geocodificação podem ser enviadas para todos os domínios nos quais o aplicativo principal doGoogle Maps oferece o serviço.

Por exemplo, um geocódigo para "Toledo" retorna este resultado, pois o domínio padrão para o Serviço degeocodificação está definido como os Estados Unidos:



{ "types":["locality","political"], "formatted_address":"Toledo, OH, USA", "address_components":[{ "long_name":"Toledo", "short_name":"Toledo", "types":["locality","political"] },{ "long_name":"Ohio", "short_name":"OH", "types":["administrative_area_level_1","political"] },{ "long_name":"United States", "short_name":"US", "types":["country","political"] }]}

Um geocódigo para "Toledo" com o campo region definido como 'es' (Espanha) retornará apenas a cidadeespanhola:

{ "types":["locality","political"], "formatted_address":"Toledo, España", "address_components":[{ "long_name":"Toledo", "short_name":"Toledo", "types":["locality","political"] },{ "long_name":"Toledo", "short_name":"TO", "types":["administrative_area_level_2","political"] },{ "long_name":"Castilla-La Mancha", "short_name":"CM", "types":["administrative_area_level_1","political"] },{ "long_name":"España", "short_name":"ES", "types":["country","political"] }]}

Observação: Com base nos comentários dos desenvolvedores, decidimos renomear os antigos elementos"viagem" como "trajeto". Do mesmo modo, os antigos elementos "trajeto" (que se referiam a trechos de umaviagem especificada) foram renomeados como "trecho". Esperamos que você ache esses novos nomes maisclaros, mas também entendemos que os novos nomes podem causar alguns inconvenientes paradesenvolvedores que usavam com o código antigo. Os campos existentes compatíveis com os antigos elem entos"viagem" e "trajeto" possuem previsão de remoção e, por isso, sugerimos que você migre o seu código para usaresses campos renomeados o quanto antes. Pretendemos suspender o suporte aos nomes antigos em 1º demaio de 2010.

Você pode calcular rotas (com diferentes meios de transporte) usando o objeto DirectionsService. Esse objetose comunica com o Serviço de rotas da Google Maps API que recebe solicitações de rota e retorna resultadoscalculados. Você pode manipular esses resultados de rota manualmente ou usar o objeto DirectionsRendererpara renderizar esses resultados.

As rotas podem especificar origens e destinos como strings de texto (por exemplo, "Chicago, IL" ou "Darwin, NSW,Austrália") ou como valores de LatLng. O serviço de rotas pode retornar rotas com várias partes. Para isso, ele usauma série de pontos de referência. As rotas são exibidas como uma polilinha que desenha o trajeto em um mapa ou,adicionalmente, como uma série de descrições textuais em um elemento <div> (por exemplo, "Vire à direita na viade acesso Williamsburg Bridge").

Solicitações de rota

O acesso ao serviço de rotas é assíncrono, pois a Google Maps API precisa fazer uma chamada para um servidorexterno. Por essa razão, você precisa passar um método de retorno de chamada a ser executado após a conclusãoda solicitação. Esse método de retorno de chamada deverá processar os resultados. O serviço de rotas pode retornar

Rotas



mais de um itinerário possível como uma matriz de routes[] diferentes.

Para usar rotas em V3, crie um objeto do tipo DirectionsService e chame DirectionsService.route()para iniciar uma solicitação ao serviço de rotas, passando-a como um literal do objeto DirectionsRequestcontendo os termos de entrada e um método de retorno de chamada a ser executado no recebimento da resposta.

O literal do objeto DirectionsRequest contém os seguintes campos:

{ origin: LatLng | String, destination: LatLng | String, travelMode: DirectionsTravelMode, unitSystem: DirectionsUnitSystem, waypoints[]: DirectionsWaypoint, optimizeWaypoints: Boolean, provideRouteAlternatives: Boolean, avoidHighways: Boolean, avoidTolls: Boolean region: String}


origin(obrigatório) especifica o local inicial a partir do qual a rota deve ser calculada. Este valor pode serespecificado como uma String (por exemplo, "Chicago, IL") ou como um valor de LatLng.destination(obrigatório) especifica o local final para o qual a rota deve ser calculada. Este valor pode serespecificado como uma String (por exemplo, "Chicago, IL") ou como um valor de LatLng.travelMode(obrigatório) especifica qual modo de transporte usar ao calcular a rota. Os valores estãoespecificados em Modos de transporte, abaixo.

unitSystem(opcional) especifica qual sistema de medidas usar ao exibir resultados. Os valores válidosestão especificados em Sistemas de medidas, abaixo.

waypoints[](opcional) especifica uma matriz de DirectionsWaypoints. Os pontos de referênciaalteram um trajeto traçando-o pelos locais especificados. Um ponto de referência é especificado como umliteral de objeto com os campos mostrados abaixo:

location especifica o local do ponto de referência, como um valor de LatLng ou como uma Stringque será geocodificada.stopover é um valor booliano que indica que o ponto de referência é uma parada no trajeto, o queresulta na divisão do trajeto em dois.

Para obter mais informações sobre pontos de referência, consulte Como usar pontos de referência em trajetos,abaixo.

optimizeWaypoints(opcional) especifica que o trajeto que está usando os waypoints fornecidos podeser otimizado para oferecer o trajeto mais curto possível. Se este campo for definido como true, o serviço derotas retornará os waypoints reordenados em um campo waypoint_order.Para obter mais informações,consulte Como usar pontos de referência em trajetos, abaixo.provideRouteAlternatives(opcional), quando este campo é definido como true, ele especifica que oserviço de rotas pode fornecer mais de uma opção de trajeto na resposta. Observe que fornecer trajetosalternativos para a rota pode aumentar o tempo de resposta do servidor.avoidHighways(opcional), quando este campo é definido como true, ele indica que os trajetos calculadosdevem evitar as principais rodovias, se possível.avoidTolls(opcional), quando este campo é definido como true, ele indica que os trajetos calculadosdevem evitar estradas com pedágios, se possível.region (opcional) especifica o código de país, apresentado como um valor ccTLD ("domínio de nível superior")de dois caracteres. Para obter mais informações, consulte Polarização de região, abaixo.

Veja a seguir um exemplo do objeto DirectionsRequest:

{ origin: "Chicago, IL", destination: "Los Angeles, CA", waypoints: [ { location:"Joplin, MO", stopover:false },{ location:"Oklahoma City, OK", stopover:true }], provideRouteAlternatives: false, travelMode: DirectionsTravelMode.DRIVING, unitSystem: DirectionsUnitSystem.IMPERIAL



}

Ao calcular rotas, você precisa especificar o modo de transporte a ser usado. Atualmente, os seguintes modos detransporte são suportados:

DirectionsTravelMode.DRIVING indica as rotas de carro padrão usando a malha de transporterodoviário.DirectionsTravelMode.WALKING solicita rotas a pé por faixas de pedestre e calçadas (quandodisponível).Novo!DirectionsTravelMode.BICYLING solicita rotas de ciclismo por ciclovias e ruas preferenciais paraciclistas (atualmente, disponível apenas nos EUA).

Observação: Às vezes, as rotas a pé podem não incluir caminhos exatos para pedestres e, como resultado,retornarão avisos no DirectionsResult que deverão ser exibidos se você não estiver usando oDirectionsRenderer padrão.

Por padrão, as rotas são calculadas e exibidas usando o sistema de medidas do país ou região de origem. Porexemplo, um trajeto de "Chicago, IL" para "Toronto, ONT" exibirá resultados em milhas, enquanto o trajeto reversoexibirá resultados em quilômetros. Você pode substituir esse sistema de medidas configurando explicitamente umsistema de medidas dentro da solicitação usando um dos valores de DirectionsUnitSystem a seguir:

DirectionsUnitSystem.METRIC especifica o uso do sistema métrico. As distâncias são mostradas emquilômetros.DirectionsUnitSystem.IMPERIAL especifica o uso do sistema imperial (inglês). As distâncias sãomostradas em milhas.

Observação: Esta configuração do sistema de medidas afeta apenas o texto exibido ao usuário. O resultado de rotatambém contém valores de distância não mostrados ao usuário e que são sempre expressos em metros.

O Serviço de rotas da Google Maps API retorna resultados de endereço influenciados pelo domínio (região ou país) apartir do qual você carregou o inicializador do Javascript. Como a maioria dos usuários carregamhttp://maps.google.com/, ele define um domínio implícito para os Estados Unidos. Se o inicializador forcarregado a partir de outro domínio suportado, você obterá resultados influenciados por esse domínio. Por exemplo,pesquisas por "São Francisco" podem retornar resultados diferentes para aplicativos que carregamhttp://maps.google.com/ (Estados Unidos) e aplicativos que carregam http://maps.google.es/(Espanha).

Você também pode definir o Serviço de rotas para retornar resultados polarizados para uma região específica usandoo parâmetro region. Este parâmetro usa um código de região, especificado como uma subtag de region deidioma IANA. Na maioria dos casos, essas tags são convertidas diretamente em valores ccTLD ("domínio de nívelsuperior") de dois caracteres, como "uk" em "co.uk", por exemplo. Em alguns casos, a tag de region também écompatível com códigos ISO-3166-1, que, às vezes, diferem dos valores ccTLD ("GB" para "Grã-Bretanha", porexemplo).

Consulte a planilha de cobertura do Google Maps para determinar o nível de cobertura suportado por um país para orecurso de rotas.

Como renderizar rotas

Iniciar uma solicitação de rota para o DirectionsService com o método route() requer a passagem de umretorno de chamada que será executado na conclusão da solicitação de serviço. Esse retorno de chamada retornaráum código de DirectionsResult e de DirectionsStatus na resposta.

O DirectionsStatus pode retornar os seguintes valores:

OK indica que a resposta contém um DirectionsResult válido.NOT_FOUND indica que pelo menos um dos locais especificados na origem, destino ou nos pontos dereferência da solicitação não pôde ser geocodificado.ZERO_RESULTS indica que não foi possível encontrar nenhum trajeto entre a origem e o destino.MAX_WAYPOINTS_EXCEEDED indica que muitos DirectionsWaypoints foram fornecidos noDirectionsRequest. O máximo permitido de pontos de referência é 8, mais a origem e o destino. Paraclientes da Google Maps API Premier, são permitidos 23 pontos de referência, mais a origem e o destino.INVALID_REQUEST indica que o DirectionsRequest fornecido era inválido.OVER_QUERY_LIMIT indica que a página web enviou solicitações em excesso dentro do período de tempopermitido.REQUEST_DENIED indica que a página web não tem permissão para usar o serviço de rotas.UNKNOWN_ERROR indica que não foi possível processar uma solicitação de rota devido a um erro do servidor. Asolicitação pode ser realizada corretamente se você tentar de novo.

Modos de transporte

Sistemas de medidas

Polarização de região para rotas

Status da consulta de rota



Você deve garantir que a consulta de rota retorne resultados válidos verificando esse valor antes de processar oresultado.

O DirectionsResult contém o resultado da consulta de rota, que você pode manipular manualmente ou passarpara um objeto DirectionsRenderer, que pode manipulá-lo automaticamente exibindo o resultado em ummapa.

Para exibir um DirectionsResult usando um DirectionsRenderer, basta fazer o seguinte:

1. Crie um objeto DirectionsRenderer.2. Chame setMap() no renderizador para vinculá-lo ao mapa passado.3. Chame setDirections() no renderizador, passando a ele o DirectionsResult, como indicado acima.

Como o renderizador é um MVCObject, ele detectará automaticamente quaisquer alterações em suaspropriedades e atualizará o mapa quando suas rotas associadas forem alteradas.

O exemplo a seguir calcula rotas entre dois locais na rodovia Route 66, onde a origem e o destino são definidospelos valores de "start" e "end" especificados nas listas suspensas. O DirectionsRenderer éresponsável pela exibição da polilinha entre os locais indicados e por posicionar os marcadores na origem, destino epontos de referência, se aplicável.

var directionDisplay;var directionsService = new google.maps.DirectionsService();var map;

function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var myOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map);} function calcRoute() { var start = document.getElementById("start").value; var end = document.getElementById("end").value; var request = { origin:start, destination:end, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } });}

<div><b>Start: </b><select id="start" onchange="calcRoute();"> <option value="chicago, il">Chicago</option> <option value="st louis, mo">St Louis</option> <option value="joplin, mo">Joplin, MO</option> <option value="oklahoma city, ok">Oklahoma City</option> <option value="amarillo, tx">Amarillo</option> <option value="gallup, nm">Gallup, NM</option> <option value="flagstaff, az">Flagstaff, AZ</option> <option value="winona, az">Winona</option> <option value="kingman, az">Kingman</option> <option value="barstow, ca">Barstow</option> <option value="san bernardino, ca">San Bernardino</option> <option value="los angeles, ca">Los Angeles</option></select><b>End: </b><select id="end" onchange="calcRoute();"> <option value="chicago, il">Chicago</option> <option value="st louis, mo">St Louis</option> <option value="joplin, mo">Joplin, MO</option> <option value="oklahoma city, ok">Oklahoma City</option>

Como exibir o DirectionsResult



<option value="amarillo, tx">Amarillo</option> <option value="gallup, nm">Gallup, NM</option> <option value="flagstaff, az">Flagstaff, AZ</option> <option value="winona, az">Winona</option> <option value="kingman, az">Kingman</option> <option value="barstow, ca">Barstow</option> <option value="san bernardino, ca">San Bernardino</option> <option value="los angeles, ca">Los Angeles</option></select></div>

Ver exemplo (directions-simple.html)

O exemplo a seguir mostra rotas que usam diferentes modos de transporte entre Haight-Ashbury e Ocean Beach emSão Francisco, CA:

var directionDisplay;var directionsService = new google.maps.DirectionsService();var map;var haight = new google.maps.LatLng(37.7699298, -122.4469157);var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);

function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var myOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: haight } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map);} function calcRoute() { var selectedMode = document.getElementById("mode").value; var request = { origin: haight, destination: oceanBeach, // Note that Javascript allows us to access the constant // using square brackets and a string value as its // "property." travelMode: google.maps.DirectionsTravelMode[selectedMode] }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } });}<div><b>Mode of Travel: </b><select id="mode" onchange="calcRoute();"> <option value="DRIVING">Driving</option> <option value="WALKING">Walking</option> <option value="BICYCLING">Bicycling</option></select></div>

Ver exemplo (directions-travel-modes.html)

Um DirectionsRenderer não somente manipula a exibição da polilinha e dos marcadores associados, comotambém pode manipular a exibição textual de rotas na forma de uma série de etapas. Para isso, basta chamarsetPanel() no seu DirectionsRenderer, passando o <div> no qual essas informações devem serexibidas. Isso também garante a exibição das respectivas informações de direitos autorais e de quais quer avisos quepossam estar associados ao resultado.

As rotas textuais serão fornecidas no idioma preferido do navegador ou no idioma especificado quando a JavaScriptAPI foi carregada usando o parâmetro language. Para obter mais informações, consulte Localização.

O exemplo a seguir é idêntico ao mostrado acima, mas inclui um painel <div> no qual as rotas são exibidas:




O antigo objeto DirectionsRoute foi renomeado como DirectionsLeg. Um trecho se refere a um trecho deum trajeto pai.

Um DirectionsLeg define um único trecho de um caminho (da origem ao destino) no trajeto calculado. Os trajetosque não contêm pontos de referência são formados por um único "trecho", mas os trajetos que definem um ou maispontos de referência são formados por um ou mais trechos, que correspondem aos trechos específicos do caminho.

O DirectionsLeg é um literal de objeto que contém os seguintes campos:

steps[] contém uma matriz de objetos DirectionsStep com informações sobre cada etapa específica dotrecho do caminho.

distance indica a distância total coberta por este trecho, como um objeto DirectionsDistance com oseguinte formato:

value indica a distância em metros.text contém uma string que representa a distância, que, por padrão, é exibida com a mesma unidade demedida usada na origem. Por exemplo, a unidade de distância milha será usada para qualquer origemdentro dos Estados Unidos. Você pode substituir esse sistema de medidas definindo especificamente umDirectionsUnitSystem na consulta original. Independentemente do sistema de medidas usado, ocampo distance.value sempre conterá um valor expresso em metros.

Esses campos podem ser omitidos se a distância for desconhecida.

duration indica a duração total deste trecho, como um objeto DirectionsDuration com o seguinteformato:

value indica a duração em segundos.text contém uma string que representa a duração.

Esses campos podem ser omitidos se a duração for desconhecida.

start_location contém a LatLng da origem deste trecho. Como o Serviço da web de rotas calcula rotasentre locais usando a opção de transporte mais próxima (geralmente uma estrada) do ponto inicial e final, ocampo start_location pode ser diferente da origem fornecida para este trecho se, por exemplo, nãohouver uma estrada próxima da origem.end_location contém a LatLng do destino deste trecho. Como o DirectionsService calcula rotasentre locais usando a opção de transporte mais próxima (geralmente uma estrada) do ponto inicial e final, ocampo end_location pode ser diferente do destino fornecido para este trecho se, por exemplo, não houveruma estrada próxima do destino.start_address contém o endereço legível (geralmente uma rua) do ponto inicial deste trecho.end_address contém o endereço legível (geralmente uma rua) do ponto final deste trecho.

Uma DirectionsStep é a menor unidade de uma rota e contém uma única etapa que descreve uma instruçãoúnica e específica do caminho. (por exemplo, "Vire à esquerda na Rua Augusta"). A etapa não apenas descreve ainstrução, mas também contém informações de distância e duração que indicam como essa etapa está relacionadaà próxima etapa. Por exemplo, uma etapa indicada como "Entre na Rodovia dos Bandeirantes" pode conter umadistância de "37 milhas" e uma duração de "40 minutos", indicando que a próxima etapa está a 37 milhas/40 minutosda etapa atual.

O DirectionsStep é um literal de objeto que contém os seguintes campos:

instructions contém instruções para esta etapa dentro de uma string de texto.distance contém a distância coberta por esta etapa até a próxima etapa, como umDirectionsDistance. Consulte a descrição em DirectionsLeg, acima. Este campo pode ficarindefinido se a distância for desconhecida.duration contém o tempo normalmente necessário para realizar a etapa atual e atingir a próxima, como umobjeto DirectionsDuration. Consulte a descrição em DirectionsLeg, acima. Este campo pode ficarindefinido se a duração for desconhecida.start_location contém a LatLng geocodificada do ponto inicial desta etapa.end_location contém a LatLng do ponto final desta etapa.

Como inspecionar DirectionsResults

Os componentes do DirectionsResults — DirectionsRoute, DirectionsLeg e DirectionsStep —podem ser inspecionados e usados na análise de qualquer resposta de rota.

O exemplo a seguir apresenta rotas a pé para atrações turísticas na cidade de Nova York. Inspecionamos oDirectionsStep do trajeto para adicionar marcadores para cada etapa e anexar informações a um InfoWindowcom texto instrucional para esta etapa.

Observação: Como estamos calculando rotas a pé, também exibimos os avisos para o usuário em outro painel<div>.

var map;

Etapas de rotas



var directionDisplay;var directionsService;var stepDisplay;var markerArray = [];

function initialize() { // Instantiate a directions service. directionsService = new google.maps.DirectionsService(); // Create a map and center it on Manhattan. var manhattan = new google.maps.LatLng(40.7711329, -73.9741874); var myOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, center: manhattan } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // Create a renderer for directions and bind it to the map. var rendererOptions = { map: map } directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions) // Instantiate an info window to hold step text. stepDisplay = new google.maps.InfoWindow();}

function calcRoute() { // First, clear out any existing markerArray // from previous calculations. for (i = 0; i < markerArray.length; i++) { markerArray[i].setMap(null); }

// Retrieve the start and end locations and create // a DirectionsRequest using WALKING directions. var start = document.getElementById("start").value; var end = document.getElementById("end").value; var request = { origin: start, destination: end, travelMode: google.maps.DirectionsTravelMode.WALKING };

// Route the directions and pass the response to a // function to create markers for each step. directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { var warnings = document.getElementById("warnings_panel"); warnings.innerHTML = "" + response.routes[0].warnings + ""; directionsDisplay.setDirections(response); showSteps(response); } });}

function showSteps(directionResult) { // For each step, place a marker, and add the text to the marker's // info window. Also attach the marker to an array so we // can keep track of it and remove it when calculating new // routes. var myRoute = directionResult.routes[0].legs[0];

for (var i = 0; i < myRoute.steps.length; i++) { var marker = new google.maps.Marker({ position: myRoute.steps[i].start_point, map: map }); attachInstructionText(marker, myRoute.steps[i].instructions); markerArray[i] = marker; }}



Um literal do objeto LocationElevationRequest contém o seguinte campo:

{ locations[]: LatLng}

locations (obrigatório) define os locais na Terra sobre os quais dados de elevação deverão ser retornados. Es teparâmetro usa uma matriz de LatLngs.Você pode passar qualquer número de coordenadas múltiplas dentro de uma matriz, contanto que não exceda ascotas do serviço. Observe que ao passar coordenadas múltiplas, a precisão de algum dado retornado pode sermenor do que ao solicitar dados para uma coordenada individual.

Um literal do objeto PathElevationRequest contém os seguintes campos:

{ path[]: LatLng, samples: Number}


path (obrigatório) define um caminho na Terra sobre o qual dados de elevação deverão ser retornados. Oparâmetro path define um conjunto de dois ou mais pares (latitude, longitude) ordenados usando uma matrizde dois ou mais objetos LatLng.samples (obrigatório) especifica o número de pontos de amostragem ao longo do caminho para os quaisdados de elevação deverão ser retornados. O parâmetro samples divide o path especificado em um conjuntoordenado de pontos equidistantes ao longo do caminho.

Assim como ocorre com as solicitações posicionais, o parâmetro path especifica um grupo de valores de latitude elongitude. No entanto, ao contrário das solicitações posicionais, o parâmetro path especifica um conjunto ordenadode vértices. Em vez de retornar dados de elevação nos vértices, as solicitações de caminho usam pontos deamostragemao longo da extensão do caminho, sendo cada ponto de amostragem equidistante do um do outro(inclusive dos pontos de extremidade).

Respostas de elevação

Para cada solicitação válida, o serviço de Elevação retornará para o retorno de chamada definido um conjunto deobjetos ElevationResult juntamente com um objeto ElevationStatus.

Cada solicitação de elevação retorna um código de ElevationStatus dentro da sua função de retorno dechamada. Esse código de status conterá um dos seguintes valores:

OK: indica que a solicitação do serviço foi realizada corretamenteINVALID_REQUEST: indica que a solicitação do serviço estava incorretaOVER_QUERY_LIMIT: indica que o solicitante excedeu a cotaREQUEST_DENIED: indica que o serviço não concluiu a solicitação, provavelmente por causa de um parâmetroinválidoUNKNOWN_ERROR: indica um erro desconhecido

Para confirmar se o retorno de chamada foi processado corretamente, verifique o código de status degoogle.maps.ElevationStatus.OK.

Quando a operação for concluída, o argumento results da sua função de retorno de chamada conterá um conjuntode objetos ElevationResult. Esses objetos contêm os seguintes elementos:

Um elemento location (contendo objetos LatLng) da posição para a qual os dados de elevação estãosendo calculados. Observe que para solicitações de caminho, o conjunto de elementos location conterá ospontos de amostragem definidos ao longo do caminho.Um elemento elevation indicando a elevação do local em metros.

Exemplos de elevação

O código a seguir converte um clique em um mapa em uma solicitação de elevação usando o objetoLocationElevationRequest:

Solicitações de elevação de local

Solicitações para caminhos com amostragem

Status de elevação

Resultados de elevação



var elevator;var map;var infowindow = new google.maps.InfoWindow();var denali = new google.maps.LatLng(63.3333333, -150.5);

function initialize() { var myOptions = { zoom: 8, center: denali, mapTypeId: 'terrain' } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Create an ElevationService elevator = new google.maps.ElevationService();

// Add a listener for the click event and call getElevation on that location google.maps.event.addListener(map, 'click', getElevation);}

function getElevation(event) {

var locations = [];

// Retrieve the clicked location and push it on the array var clickedLocation = event.latLng; locations.push(clickedLocation);

// Create a LocationElevationRequest object using the array's one value var positionalRequest = { 'locations': locations }

// Initiate the location request if (elevator) { elevator.getElevationForLocations(positionalRequest, function(results, status) { if (status == google.maps.ElevationStatus.OK) {

// Retrieve the first result if (results[0]) {

// Open an info window indicating the elevation at the clicked position infowindow.setContent("The elevation at this point is " + results[0].elevation + " meters."); infowindow.setPosition(clickedLocation); infowindow.open(map); } else { alert("No results found"); } } else { alert("Elevation service failed due to: " + status); } }); }}

Ver exemplo (elevation-simple.html)

O exemplo a seguir constrói uma polilinha por meio de um conjunto de coordenadas especificado e exibe dados deelevação ao longo do caminho usando a Google Visualization API. É preciso carregar essa API usando o Carregadorcomum do Google. Uma solicitação de elevação é construída usando o PathElevationRequest:

var elevator;var map;var chart;var infowindow = new google.maps.InfoWindow();var polyline;

// The following path marks a general path from Mt.// Whitney, the highest point in the continental United// States to Badwater, Death Vallet, the lowest point.var whitney = new google.maps.LatLng(36.578581, -118.291994);var lonepine = new google.maps.LatLng(36.606111, -118.062778);var owenslake = new google.maps.LatLng(36.433269, -117.950916);



// Draw the chart using the data within its DIV. document.getElementById('elevation_chart').style.display = 'block'; chart.draw(data, { width: 640, height: 200, legend: 'none', titleY: 'Elevation (m)' }); }}

Ver exemplo (elevation-paths.html)

O Street View do Google proporciona visualizações panorâmicas de 360 graus de ruas designadas em toda sua áreade cobertura. A cobertura da Street View API é a mesma do aplicativo Google Maps(http://maps.google.com/). A lista de cidades atualmente suportadas para o Street View está disponível naCentral de Ajuda do Google Maps.

Veja abaixo um exemplo de imagem do Street View.

2699 Bancroft Way, Berkeley, CaliforniaO endereço é aproximado

© 2011 Google - Termos de Uso

A Google Maps JavaScript API agora fornece o serviço Street View para obtenção e manipulação de imagens usadasno recurso Street View do Google Maps. Diferentemente da API V2, o serviço Street View na Google Maps JavaScriptAPI V3 é suportado de modo nativo dentro do navegador.

Como adicionar o Street View ao mapa

Use o Street View para indicar um local em um mapa. Para adicionar o Street View a um mapa, basta adicionar ocontrole do Street View. Para adicionar esse controle, defina streetViewControl como true no MapOptionsdo mapa. O mapa aparecerá com um controle Pegman do Street View.

O controle Pegman do Street View permite visualizar panoramas do Street View diretamente dentro do mapa. Quandovocê clica no Pegman e mantém o mouse pressionado, o mapa é atualizado para mostrar ruas ativadas no StreetView usando contornos azuis no mapa:

Street View



Arraste o marcador do Pegman para uma rua e o mapa será atualizado para exibir um panorama do Street View dolocal indicado.

O exemplo a seguir adiciona um streetViewControl a um mapa de Boston, na região próxima ao Fenway Park:

var fenway = new google.maps.LatLng(42.345573,-71.098326); var mapOptions = { center: fenway, zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true };var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

Ver exemplo (streetview-map.html)

Panoramas do Street View

As imagens do Street View são suportadas pelo objeto StreetViewPanorama, que fornece uma interface da APIpara um "visualizador" do Street View. Cada mapa contém um panorama padrão do Street View, que você poderecuperar chamando o método getStreetView() do mapa. Ao adicionar um controle do Street View ao mapadefinindo a opção streetViewControl como true, você conecta automaticamente o controle do Pegman a essepanorama padrão do Street View.

Você também pode criar seu próprio objeto StreetViewPanorama e configurar o mapa para usá-lo em vez deusar o padrão, definindo a propriedade streetView do mapa explicitamente para esse objeto construído. Talvezvocê queira substituir o panorama padrão se quiser modificar um comportamento padrão, como o compartilhamentoautomático de superposições entre o mapa e o panorama. Consulte Superposições no Street View, abaixo.

Recipientes do Street View

Você também pode querer exibir um StreetViewPanorama dentro de um elemento DOM diferente, quegeralmente será um elemento <div>. Para isso, basta passar o elemento DOM dentro do construtorStreetViewPanorama. Para exibição otimizada de imagens, recomendamos o tamanho mínimo de 20 x 200pixels.

Observação: Embora a funcionalidade da Vista da rua seja desenvolvida para ser usada junto com um mapa, esseuso não é obrigatório. Você pode usar um objeto da Vista da rua autônomo sem um mapa.

Locais e Pontos de vista (POV) do Street View

O construtor StreetViewPanorama também permite definir locais e pontos de vista do Street View usando oparâmetro StreetViewOptions. Você pode chamar setPosition() e setPov() no objeto após a construçãopara alterar o local e o POV.



O local do Street View define o local de posicionamento da câmera para uma imagem, mas não define a orientaçãoda câmera em relação a essa imagem. Para definir a orientação da câmera, o objeto StreetViewPov define trêspropriedades:

heading (padrão 0) define o ângulo de rotação (em graus) em torno do local da câmera em relação ao norteabsoluto. A direção é medida no sentido horário (90 graus indica o leste absoluto).pitch (padrão 0) define a variação "para cima" ou "para baixo" do ângulo em relação à inclinação inicialpadrão da câmera. Frequentemente, mas não sempre, a inclinação é plana e horizontal. Por exemplo, um aimagem feita em uma colina provavelmente exibirá uma inclinação padrão que não é horizontal. Os ângulos deinclinação são medidos com valores negativos apontando para cima (até chegar em -90 graus eortogonalmente em relação à inclinação padrão) e valores positivos apontando para baixo (até chegar em +90graus e ortogonalmente em relação à inclinação padrão).zoom (padrão 1) define o nível de zoom da visualização (indicando efetivamente o "campo de visão"), com ovalor 0 indicando a total diminuição do zoom. A maioria dos locais do Street View suportam níveis de 0 a 3(valores inclusivos).

O código a seguir mostra um mapa de Boston com uma visualização inicial do Fenway Park. Se você selecionar earrastar o Pegman para um local suportado no mapa, alterará o panorama do Street View:

var fenway = new google.maps.LatLng(42.345573,-71.098326);var mapOptions = { center: fenway, zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true};var map = new google.maps.Map( document.getElementById("map_canvas"), mapOptions);var panoramaOptions = { position: fenway, pov: { heading: 34, pitch: 10, zoom: 1 }};var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);map.setStreetView(panorama);

Ver exemplo (streetview-simple.html)

Superposições no Street View

O objeto StreetViewPanorama padrão suporta a exibição nativa de superposições de mapa. Geralmente, assuperposições aparecem no "nível da rua", ancoradas em posições de LatLng. Os marcadores, por exemplo,aparecerão com suas caudas ancoradas ao plano horizontal do local no panorama do Street View.

Atualmente, os tipos de superposições suportados em panoramas do Street View se limitam a Markers,InfoWindows e OverlayViews personalizados. As superposições que você exibe em um mapa também podemser exibidas em um panorama do Street View. Para isso, trate o panorama como um substituto para o objeto Map,chamando setMap() e passando o StreetViewPanorama como um argumento, em vez de um mapa. De modoparecido, as janelas de informações podem ser abertas em um panorama do Street View. Para isso, cham eopen(), passando o StreetViewPanorama() em vez de um mapa.

Além disso, na criação de um mapa com um StreetViewPanorama padrão, todos os marcadores criados em ummapa são compartilhados automaticamente com o panorama do Street View associado ao mapa, contanto que opanorama seja visível. Para recuperar o panorama padrão do Street View, chame getStreetView() no objetoMap. Se você definir explicitamente a propriedade streetView do mapa como um StreetViewPanorama desua própria criação, o panorama padrão será substituído e o compartilhamento automático de superposição serádesativado.

O exemplo a seguir mostra marcadores que representam vários locais ao redor de Astor Place, Nova York. Alterne aexibição para Street View para mostrar os marcadores compartilhados exibidos no StreetViewPanorama.

var map;var panorama;var astorPlace = new google.maps.LatLng(40.729884, -73.990988);var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491);var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272);var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891);

function initialize() {



// Set up the map var mapOptions = { center: astorPlace, zoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

// Setup the markers on the map var cafeMarkerImage = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00'); var cafeMarker = new google.maps.Marker({ position: cafe, map: map, icon: cafeMarkerImage, title: 'Cafe' }); var bankMarkerImage = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00'); var bankMarker = new google.maps.Marker({ position: bank, map: map, icon: bankMarkerImage, title: 'Bank' }); var busMarkerImage = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00'); var busMarker = new google.maps.Marker({ position: busStop, map: map, icon: busMarkerImage, title: 'Bus Stop' }); // We get the map's default panorama and set up some defaults. // Note that we don't yet set it visible. panorama = map.getStreetView(); panorama.setPosition(astorPlace); panorama.setPov({ heading: 265, zoom:1, pitch:0} );} function toggleStreetView() { var toggle = panorama.getVisible(); if (toggle == false) { panorama.setVisible(true); } else { panorama.setVisible(false); }}

Ver exemplo (streetview-overlays.html)

Eventos do Street View

Ao navegar entre os panoramas do Street View ou manipular sua orientação, você pode querer monitorar várioseventos que indicam alterações no estado do StreetViewPanorama:

pano_changed é disparado sempre que o ID de um panorama individual é alterado. Este evento não garanteque algum dado dentro do panorama (como os links) também tenha sido alterado no momento em que oevento foi disparado. Este evento indica apenas que o ID de um panorama foi alterado. O ID do panorama (quevocê pode usar para referenciar esse panorama) é estável apenas dentro da sessão atual do navegador.position_changed é disparado sempre que a posição subjacente (LatLng) do panorama é alterada. Arotação de um panorama não disparará este evento. Você pode alterar uma posição subjacente do panoramasem alterar o ID do panorama, pois a API associará automaticamente o ID do panorama mais próximo à



posição do panorama.pov_changed é disparado sempre que o StreetViewPov do Street View é alterado. Este evento pode serdisparado enquanto a posição e o ID do panorama permanecem estáveis.links_changed é disparado sempre que os links do Street View são alterados. Este evento pode serdisparado de modo assíncrono após uma alteração no ID do panorama indicada pelo pano_changed.visible_changed é disparado sempre que a visibilidade do Street View é alterada. Este evento pode serdisparado de modo assíncrono após uma alteração no ID do panorama indicada pelo pano_changed.

O código a seguir ilustra como esses eventos podem ser manipulados para coletar dados sobre oStreetViewPanorama subjacente:

var caffe = new google.maps.LatLng(37.869085,-122.254775);

function initialize() { var panoramaOptions = { position:caffe, pov: { heading: 270, pitch:0, zoom:1 }, visible:true }; var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);

google.maps.event.addListener(panorama, 'pano_changed', function() { var panoCell = document.getElementById('pano_cell'); panoCell.firstChild.nodeValue = panorama.getPano(); }); google.maps.event.addListener(panorama, 'links_changed', function() { var linksTable = document.getElementById('links_table'); while(linksTable.hasChildNodes()) { linksTable.removeChild(linksTable.lastChild); }; var links = panorama.getLinks(); for (var i in links) { var row = document.createElement("tr"); linksTable.appendChild(row); var hCell = document.createElement("td"); var hText = "Link: " + i + ""; hCell.innerHTML = hText; var vCell = document.createElement("td"); var vText = links[i].description; vCell.innerHTML = vText; linksTable.appendChild(hCell); linksTable.appendChild(vCell); } });

google.maps.event.addListener(panorama, 'position_changed', function() { var positionCell = document.getElementById('position_cell'); positionCell.firstChild.nodeValue = panorama.getPosition(); });

google.maps.event.addListener(panorama, 'pov_changed', function() { var headingCell = document.getElementById('heading_cell'); var pitchCell = document.getElementById('pitch_cell'); headingCell.firstChild.nodeValue = panorama.getPov().heading; pitchCell.firstChild.nodeValue = panorama.getPov().pitch; });

}

Ver exemplo (streetview-events.html)

Controles do Street View

Quando um StreetViewPanorama é exibido, vários controles aparecem no panorama por padrão. É possívelativar ou desativar esses controles definindo seus campos apropriados no StreetViewPanoramaOptions doStreet View como true ou false:



Um navigationControl fornece um modo de girar o panorama e aplicar zoom na imagem. Por padrão,este controle aparece como um controle padrão integrado de bússola, deslocamento e zoom. É possível alterara aparência do controle fornecendo NavigationControlOptions dentro do camponavigationControlOptions.Um addressControl fornece uma superposição textual que indica o endereço do local associado. Épossível alterar a aparência do controle fornecendo StreetViewAddressControlOptions dentro docampo addressControlOptions.Um linksControl fornece setas de orientação na imagem que permitem acessar imagens do panoramaadjacente.

O exemplo a seguir altera os controles exibidos no Street View associado e remove os links da visualização:

var fenway = new google.maps.LatLng(42.345573,-71.098326);

// Note: constructed panorama objects have visible: true// set by default.var panoOptions = { position: fenway, addressControlOptions: { position: google.maps.ControlPosition.BOTTOM, style: { "fontWeight" : "bold", "backgroundColor" : "#191970", "color" :"#A9203E" } }, linksControl: false, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }, enableCloseButton: false, visible:true};

var panorama = new google.maps.StreetViewPanorama( document.getElementById("pano"), panoOptions);

Ver exemplo (streetview-controls.html)

Como acessar diretamente dados do Street View

Talvez você queira determinar de modo programado a disponibilidade de dados do Street View ou retornarinformações sobre panoramas específicos, sem precisar manipular diretamente um mapa/panorama. É poss ívelfazer isso usando o objeto StreetViewService, que fornece uma interface para os dados armazenados noserviço Street View do Google.

Solicitações para o serviço Street View

O acesso ao serviço Street View é assíncrono, pois a Google Maps API precisa fazer uma chamada para um servidorexterno. Por essa razão, você precisa passar um método de retorno de chamada a ser executado após a conclusãoda solicitação. Esse método de retorno de chamada processa o resultado.

É possível iniciar dois tipos de solicitações para o StreetViewService:

getPanoramaById() retorna dados do panorama por meio de um ID de referência fornecido que identificaexclusivamente o panorama. Esses IDs de referência são estáveis apenas dentro da sessão atual donavegador.getPanoramaByLocation() pesquisa dados do panorama em uma área especificada, com base em umLatLng passado e no raio (em metros) no qual a pesquisa deve ser feita. Se o raio for de 50 metros oumenos, o panorama retornado será o mais próximo do local especificado.

Respostas do serviço Street View

getPanoramaByLocation() e getPanoramaById() especificam uma função de retorno de chamada a serexecutada quando um resultado for recuperado do serviço Street View. Essa função de retorno de chamada retornaum conjunto de dados do panorama dentro de um objeto StreetViewPanoramaData e um códigoStreetViewStatus que indica o status da solicitação, nessa ordem.

Uma especificação do objeto StreetViewPanoramaData contém metadados sobre um panorama do Street Viewda seguinte forma:

{



"location": { "latLng": LatLng, "description": string, "pano": string }, "copyright": string, "links": [{ "heading": number, "description": string, "pano": string, "roadColor": string, "roadOpacity": number }], "tiles": { "worldSize": Size, "tileSize": Size, "originHeading": number }}

Este objeto de dados não é propriamente um objeto StreetViewPanorama. Para criar um objeto Street Viewusando esses dados, você terá que criar um StreetViewPanorama e chamar setPano(), passando o IDfornecido no campo location.pano retornado.

O código status pode retornar um dos seguintes valores:

OK indica que o serviço encontrou um panorama correspondente.ZERO_RESULTS indica que o serviço não conseguiu encontrar um panorama que corresponde aos critériospassados.UNKNOWN_ERROR indica que uma solicitação do Street View não pôde ser processada, embora o motivo exatoseja desconhecido.

O código a seguir cria um StreetViewService que responde aos cliques dos usuários em um mapa criandomarcadores que, ao serem clicados, exibem um StreetViewPanorama desse local. O código usa o conteúdo deStreetViewPanoramaData retornado pelo serviço.

var map;var berkeley = new google.maps.LatLng(37.869085,-122.254775);var sv = new google.maps.StreetViewService();

var panorama;

function initialize() {

panorama = new google.maps.StreetViewPanorama(document.getElementById("pano")); // Set up the map var mapOptions = { center: berkeley, zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: false }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

// getPanoramaByLocation will return the nearest pano when the // given radius is 50 meters or less. google.maps.event.addListener(map, 'click', function(event) { sv.getNearestPanorama(event.latLng, 50, processSVData); });}

function processSVData(data, status) { if (status == google.maps.StreetViewStatus.OK) { var marker = new google.maps.Marker({ position: data.location.latLng, map: map, title: data.location.description }); google.maps.event.addListener(marker, 'click', function() { var markerPanoID = data.location.pano; // Set the Pano to use the passed panoID



©2010 Google - Página inicial do Google Code - Termos de serviço do site - Política de Privacidade - Diretório do site

O Google Code é oferecido em: English - Español - 日本語 - 한국어 - Português - Pусский - 中文(简体) - 中文(繁體)

panorama.setPano(markerPanoID); panorama.setPov({ heading: 270, pitch: 0, zoom: 1 }); panorama.setVisible(true); }); }}

Ver exemplo (streetview-service.html)



Google Maps Javascript API V3 Services - Google Maps JavaScript API V3 - Google Code

Documents

Transcript of Google Maps Javascript API V3 Services - Google Maps JavaScript API V3 - Google Code