12/06/12
Pri nc nc íp ípi os os bá básic os os da da Go Google Ma Maps Ja Jav as asc ri ript AP API V3 V3 - Google Ma Maps AP API — G oo oogle De Developers
Search
Início
Products
Evento s
Google Maps API ▾
Maps JavaScript API v3 ▾
Developer's Dev eloper's Guide Getting Started Usage Limits and Billing Concepts
Demon st str aç ação 3.603
Princípios básicos da 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 possu 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! Bem-vindo à Google Maps JavaScript API V3 oficial e recentemente atualizada! Esta JavaScript API agora substitui oficialmente a versão 2 da Googl versões são parecidas, mas muita coisa mudou internamente: a versão 3 (chamada de V3 neste documento) foi desenvolvida para agilizar o carrega principalmente em navegadores para celular (por exemplo, aparelhos com Android e o iPhone™).
Events Controls Styling Overlays
Sinta-se à vontade para fazer comentários sobre esta versão da Google Maps API no grupo de discussão da Google Maps API V3. 1. Bem-vindo à versão 3 2. Público 3. Geolocalização
Layers
Como detectar o local do usuário Como especificar o parâ metro do sensor
Map Types ▸
Services
▸
Libraries
▸
API Reference Reference
▸
Code Samples
▸
More Resources
Como desenvolver para aparelhos celulares (iPhone e Android) Localização na Google Maps API V3 Bibliotecas da Google Maps API V3 Como carregar a API via HTTPS (Novo! Novo!)) Como carregar a API de forma assíncrona Criação do número de versão Tipos de versões Documentação das versões
Blog
10. Solução de problemas
Forum
Bem-vindo à Versão 3
FAQ
▸
Maps API for Business
▸
Maps API Web Services
Google Goog le Places A PI Places Autocomplete API Static Maps API Street View Image API
▸
4. 5. 6. 7. 8. 9.
Bem-vindo à versão 3 da API do Google Maps. Esta API Javascript é semelhante à versão 2 existente da API do Google Maps. No entanto, muita c versão 3 (chamada de V3 neste documento) foi desenvolvida para agilizar o carregamento, especialmente em navegadores para celular, como os ap o iPhone™. O lançamento inicial tem um conjunto de recursos menor do que o disponível na API V2. Migraremos recursos adicionais da V2 enquan código JavaScript pequeno e as nossas velocidades de carregamento otimizadas. Sinta-se à vontade para fazer comentários sobre esta versão da A discussão da Google Maps API V3. Implementamos esta versão mais recente da API do Google Maps usando uma estrutura MVC modificada. modificada . Todas as alterações de estado de um obj exemplo) são manipuladas por meio das funções set e get de um formato formato específico. Além disso, todos os estados dos objetos MVC s ão armazena armazena objeto, e todas as observações sobre as alterações de estado feitas por meio de manipuladores de eventos também são de um formato específico. A ativação de mapas confiáv confiáveis eis e rápidos rápidos em navegado navegadores res para celular ganhou ganhou destaque destaque especial e foi foi integrada integrada nesta API. Recomendamos Recomendamos que voc voc e poste dúvidas sobre aparelhos específicos no grupo mencionado acima. Observação: Esta versão da API Javascript do Google Maps não precisa mais de chaves de API!
Google Earth API
Público
Deprecated APIs
Esta documentação foi desenvolvida para pessoas familiarizadas com a programação JavaScript e conceitos de programação orientada a objetos. V familiarizado familiar izado com o Google Maps, Maps , do ponto de vista vista de um usuário. Exis tem muitos tutoriais para JavaScript disponíveis na web. Esta documentação conceitual foi desenvolvida para que você comece a explorar e desenvolver rapidamente aplicativos interessantes com a API do publicamos a Referência da API do Google Maps . A documentação conceitual conceitual está dividida dividida nas seguintes seguintes áreas: Objetos de mapa básicos Eventos de mapa Controles de mapa Sobreposições de mapa Serviços de mapa Os comentários sobre esta versão da API e sua documentação são bem-vindos. Não se esqueça de postar seus comentários no
grupo da API Java
Geolocalização O termo Geolocalização se refere à identificação do local geográfico de um usuário ou dispositivo de computação por meio de vários mecanismos de
https://developers.google.com/maps/documentation/javascript/basics?hl=pt-BR#SpecifyingSensor
1/6
12/06/12
Pri nc ípi os básic os da Google Maps Jav asc ript API V3 - Google Maps API — G oogle Developers Normalmente, a maioria dos serviços de geolocalização usa endereços de roteamento de rede ou dispositivos GPS internos para determinar esse lo API é específica para alguns dispositivos; alguns navegadores/dispositivos a suportam, outros não, portanto, não presuma que a geolocalização ser aplicativo da web.
Como detectar o local do usuário Atualmente, existem várias maneiras de detectar o local de um usuário em um navegador. Nenhum desses métodos faz parte da Google Maps API; setor. Os navegadores mais recentes estão começando a suportar o padrão Geolocalização W3C . Esse padrão faz parte do HTML 5 e provavelmente mais usado. Todos os aplicativos que pretendem fornecer informações de geolocalização devem suportar esse padrão. Alguns navegadores com Google Gears podem usar a Google Gears Geolocation API . Como o suporte para o padrão W3C ainda não é muito a uma boa opção de reserva. Alguns navegadores usam endereços IP para detectar o local de um usuário, embora a estimativa fornecida seja apenas um valor aproximado. Como o endereço IP de um usuário pode fornecer apenas uma estimativa aproximada de seu local, não recomendamos o uso desse método para ge o mais simples e o mais suportado, por isso deve ser priorizado em relação a outros métodos. Caso decida usar o Google Gears, antes você deve v o padrão W3C. Observe que para usar o Google Gears será necessário carregar o Javascript de inicialização do Google Gears . O exemplo a seguir tenta determinar o local do usuário por meio da propriedade navigator.geolocation do W3C primeiro e depois tenta o mét suspende a operação se nenhum dos métodos funcionar. // Note that using Google Gears requires loading the Javascript // at http://code.google.com/apis/gears/gears_init.js var initialLocation ; var siberia = new google.maps.LatLng(60, 105); var newyork = new google.maps.LatLng(40.69847032728747 , -73.9514422416687 ); var browserSupportFlag =
new Boolean();
function initialize () { var myOptions = {
zoom: 6, mapTypeId : google.maps. MapTypeId .ROADMAP }; var map = new google.maps. Map(document .getElementById ("map_canvas" ), myOptions );
// Try W3C Geolocation (Preferred) if(navigator .geolocation ) {
browserSupportFlag = true; navigator .geolocation .getCurrentPosition (function (position ) { initialLocation = new google.maps.LatLng(position .coords.latitude ,position .coords.longitude ); map.setCenter (initialLocation ); }, function() { handleNoGeolocation (browserSupportFlag ); }); // Try Google Gears Geolocation } else if (google.gears) { browserSupportFlag = true; var geo = google.gears.factory .create('beta.geolocation' );
geo.getCurrentPosition (function (position ) { initialLocation = new google.maps.LatLng(position .latitude ,position .longitude ); map.setCenter (initialLocation ); }, function() { handleNoGeoLocation (browserSupportFlag ); }); // Browser doesn't support Geolocation } else { browserSupportFlag = false; handleNoGeolocation (browserSupportFlag ); } function handleNoGeolocation (errorFlag ) { if (errorFlag == true ) {
alert("Geolocation service failed." ); initialLocation = newyork ; } else { alert("Your browser doesn't support geolocation. We've placed you in Siberia." ); initialLocation = siberia ; } map.setCenter (initialLocation ); } }
Ver exemplo (map-geolocation.html)
Como especificar o parâmetro do sensor https://developers.google.com/maps/documentation/javascript/basics?hl=pt-BR#SpecifyingSensor
2/6
12/06/12
Pri nc ípi os básic os da Google Maps Jav asc ript API V3 - Google Maps API — G oogle Developers O uso da API do Google Maps requer que você indique se o seu aplicativo está usando um sensor (como um localizador GPS) para determinar a loc especialmente importante para dispositivos móveis. Os aplicativos devem passar o parâmetro obrigatório sensor para a tag <script> ao incluir o Maps API, indicando se o seu aplicativo está usando um dispositivo sensor. Os aplicativos que determinam a localização do usuário por meio de um sensor devem passar sensor=true ao carregar a API Javascript do Googl # # Example using sensor when loading the Maps JavaScript API # <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true" >
Mesmo que seu dispositivo não utilize um dispositivo sensor, você ainda precisa passar esse parâmetro, definindo seu valor como false .
Como desenvolver para aparelhos celulares (iPhone e Android) A API do Google Maps V3 foi desenvolvida para agilizar o carregamento e funcionar bem em aparelhos celulares. Especificamente, concentramos n desenvolvimento para aparelhos celulares avançados, como o iPhone e aparelhos que executam o sistema operacional Android. Os aparelhos celula os navegadores típicos do computador. Além disso, eles normalmente têm um comportamento específico para esse tipo de dispositivo (como "press iPhone). Se desejar que o seu aplicativo funcione bem em aparelhos celulares, recomendamos o seguinte: Defina o
que contém o seu mapa para ter os atributos de largura e altura de 100% . No entanto, alguns navegadores de área de trabalho exibidos com ess es valores. Você pode detectar os aparelhos iPhone e Android inspecionando a propriedade navigator.userAgent no DOM: function detectBrowser () { var useragent = navigator .userAgent ; var mapdiv = document .getElementById ("map_canvas" ); if (useragent .indexOf ('iPhone' ) != -1 || useragent .indexOf ('Android' ) != -1 ) {
mapdiv.style.width = '100%'; mapdiv.style.height = '100%'; } else { mapdiv.style.width = '600px' ; mapdiv.style.height = '800px' ; } }
Desse modo, você altera o layout de aparelhos específicos, assim como fizemos aqui para alterar o estado real da tela de cada aparelho. Os aparelhos iPhone respeitam a seguinte tag <meta> : <meta name="viewport" content ="initial-scale=1.0, user-scalable=no"
/>
Essa configuração especifica que esse mapa deve ser exibido na tela inteira e não deve ser redimensionado pelo usuário. Os aparelhos Android do software (Cupcake) também suportam esses parâmetros. O navegador Safari do iPhone requer que essa tag <meta> seja incluída no eleme Para obter mais informações sobre o desenvolvimento para o iPhone, consulte a documentação para desenvolvedores da Apple . Para obter mais info desenvolvimento dos aparelhos Android, consulte a documentação do Android.
Localização na Google Maps API V3 É possível localizar o seu aplicativo da Google Maps API alterando as configurações de idioma padrão e definindo o código da região do aplicativo, q de acordo com um país ou território especificado.
Localização de idioma A Google Maps API usa a configuração de idioma de preferência do navegador ao exibir informações de texto, como nomes de controles, avisos de e marcadores de mapas. Na maioria dos casos, essa é a melhor opção, pois normalmente não é desejável substituir a configuração de preferência d entanto, se você deseja alterar a Google Maps API para que ignore a configuração de idioma do navegador e forçá-la a exibir informações em um ce um parâmetro language opcional à tag <script> ao incluir o código Javascript da Google Maps API, especificando o idioma a ser usado. Por exemplo, para exibir um aplicativo da Google Maps API em japonês, adicione &language=ja à tag <script> , c omo mostrado abaixo: <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=ja"
>
Observação: Ao carregar a API da maneira mostrada acima, o idioma japonês será usado para todos os usuários, independentemente das preferênc se esse é mesmo o comportamento que você deseja adotar antes de definir essa opção. Ver exemplo (map-language.html) A Google Maps JavaScript API também suporta textos bidirecionais (Bidi) com caracteres incorporados de idiomas lidos da esquerda para a direita ( esquerda (RTL). Exemplos de idiomas RTL incluem o árabe, o hebraico e o farsi. Geralmente, você deve especificar páginas em idiomas RTL para q corretamente, adicionando dir='rtl' ao elemento da página. O exemplo a seguir exibe um mapa do Cairo, Egito, usando controles em
https://developers.google.com/maps/documentation/javascript/basics?hl=pt-BR#SpecifyingSensor
3/6
12/06/12
Pri nc ípi os básic os da Google Maps Jav asc ript API V3 - Google Maps API — G oogle Developers Ver exemplo (map-rtl.html) Consulte também a lista de idiomas s uportados. Como sempre atualizamos os idiomas suportados, essa list a pode não estar completa.
Localização de região A Google Maps API suporta, por padrão, aplicativos com blocos de mapa e polarizações, usando o país do domínio de hospedagem de onde a API domínio maps.google.com). Se você quiser alterar o seu aplicativo para que ele suporte diferentes blocos de mapa ou se quiser polarizar o aplicativo resultados de geolocalização com base na região), é possível substituir esse comportamento padrão adicionando um parâmetro region à tag , c omo mostrado abaixo: <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false®ion=GB"
>
Os exemplos a seguir mostram dois mapas, um que geocodifica "Toledo" como "Toledo, Ohio" baseado na região padrão (EUA), e outro que polariz Espanha" baseado na definição de region como ES (Espanha).
Bibliotecas da Google Maps API V3 O código JavaScript da API do Google Maps é carregado através de um URL de inicialização do formulário http://maps.google.com/maps/ap inicialização carrega todos os principais símbolos e objetos de Javascript para uso na API do Google Maps. Alguns recursos da API do Google Map bibliotecas independentes que não são carregadas, a menos que você as solicite especificamente. A divisão de componentes complementares em principal seja carregada (e analisada) rapidamente. Você usará a sobrecarga adicional de carregar e analisar bibliotecas apenas se precisar delas. Especifique mais bibliotecas para carregar na solicitação de inicialização indicando um parâmetro libraries , passando a esse parâmetro o nome Várias bibliotecas podem ser especificadas como uma lista separada por vírgulas. Uma vez carregadas, as bibliotecas são acessadas pelo namesp google.maps. libraryName . As seguintes bibliotecas estão disponíveis no momento: geometry inclui funções utilitárias para calcular valores escalares geométricos (como distância e área) na superfície da Terra. Consulte a
docu geometria para obter mais informações. adsense permite que o aplicativo da API do Google Maps inclua anúncios de texto contextuais, o que permite compartilhar a receita de anúnci usuários. Consulte a documentação da Bi blioteca AdSense para obter mais informações. panoramio contém funcionalidades para adicionar camadas de fotos do Panoramio ao aplicativo de sua API do Google Maps. Consulte a docu Panoramio para obter mais informações. Acrescentaremos mais bibliotecas no futuro, assim que lançarmos mais recursos opcionais. A solicit ação de inicialização a seguir ilustra como solicitar a biblioteca google.maps.geometry da Google Maps JavaScript API: <script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=geometry&sensor=
true_or_
Carregamento da API via HTTPS Você pode acessar a Google Maps JavaScript API via HTTPS, permitindo o uso da API em seu aplicativo seguro HTTPS. Para carregar a Google M HTTPS, carregue a API a partir do seguinte URL: <script
src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=true_or_false"
https://developers.google.com/maps/documentation/javascript/basics?hl=pt-BR#SpecifyingSensor
4/6
12/06/12
Pri nc ípi os básic os da Google Maps Jav asc ript API V3 - Google Maps API — G oogle Developers type="text/javascript">
Carregar a Google Maps Javascript API V3 via HTTPS permite que seu aplicativo use a API do Google Maps nas páginas que são protegidas utilizan over Secure Socket Layer (SSL) . O carregamento da API do Google Maps através de HTTPS é necessário em aplicativos SSL para evitar avisos de navegadores. Também é recomendado para aplicativos que incluem dados confidenciais de usuário, como o local de um usuário, nas solicitações.
Como carregar a API Javascript de forma assí ncrona Geralmente, a Google Maps Javascript API é carregada assim que você carrega sua página, incluindo a API com uma tag <script> e executando aplicativo depois que o script foi carregado. No entanto, enquanto esse Javascript está sendo analisado, o navegador não pode renderizar conteúdo dos casos, esse atraso não é perceptível, mas você pode desejar carregar o código da Google Maps Javascript API depois que o carregamento de s também pode desejar carregar a Google Maps Javascript API sob demanda Basta carregar a Google Maps Javascript API após carregar a página, inserindo sua própria tag <script> em resposta a um evento window.onlo instruir a inicialização da Google Maps Javascript API para que atrase a execução do código de seu aplicativo até que o código da Google Maps Jav carregado. Você pode fazer isso usando o parâmetro callback . Esse parâmetro usa como um argumento a função a ser executada após complet O código a seguir instrui o aplicativo a carregar a API do Google Maps depois que a página tiver sido totalmente carregada (usando window.onloa Javascript API em uma tag <script> na página. Além disso, inst ruímos a API a executar somente a função initialize() após a API ser total callback=initialize à inicialização da AP I do Google Maps: function initialize () { var myLatlng = new google.maps.LatLng(-34.397 , 150.644 ); var myOptions = {
zoom: 8, center: myLatlng , mapTypeId : google.maps. MapTypeId .ROADMAP } var map = new google.maps. Map(document .getElementById ("map_canvas" ), myOptions );
} function loadScript () { var script = document .createElement ("script" );
script.type = "text/javascript" ; script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"
;
document .body.appendChild (script); } window.onload = loadScript ;
Veja exemplo (map-simple-async.html)
Criação do número de versão A equipe da Google Maps API atualizará essa JavaScript API regularmente com novos recursos, correções de bugs e melhorias de desempenho. To compatíveis com as versões anteriores, garantindo que, se você lançar um aplicativo usando as interfaces documentadas atualmente , esse aplicativ alterações depois que a API for atualizada. Observação: Recursos experimentais não estão incluídos nessa garantia. Os recursos que forem experi claramente na documentação da API.
Tipos de versões Você pode indicar a versão da API a ser carregada no seu aplicativo especificando-a por meio do parâmetro v da solicitação de inicialização da Goo opções são suportadas atualmente: A versão noturna (de desenvolvimento), especificada com v=3 ou omitindo o parâmetro v. Essa versão reflete a versão atual baseada no tronco correções de bugs e novos recursos à medida que forem lançados publicamente. Uma versão numerada, indicada com v=3.number , que especifica um conjunto de recursos da API. Essas versões numeradas podem ser um uma versão congelada. (veja abaixo). A solicit ação de inicialização a seguir ilustra como solicitar uma versão específica da Google Maps JavaScript API: http://maps.google.com/maps/api/js?v=3.3&sensor=true_or_false
A cada trimestre, nós editaremos uma nova versão numerada (a "versão de lançamento") e a lançaremos para uso público. Ao longo do trimestre, c correções de bugs nessa versão de lançamento, que serão explicitadas no changelog da Google Maps JavaScript API , mas garantimos que o conju estável. Quando lançarmos uma nova versão numerada, "congelaremos" a versão de lançamento anterior, o que significa que não a atualizaremos mais com correções de bugs, para que a versão fique completamente estável. Cada vez que introduzimos uma nova versão congelada dessa forma, deixamos existente. Em qualquer momento, haverá apenas uma versão congelada disponível. Os aplicativos que solicitarem as versões numeradas em desus versão congelada atual.
Como escolher uma versão da API As seguintes diretrizes se aplicam ao escolher a versão da API apropriada para seu aplicativo da Google Maps API V3:
https://developers.google.com/maps/documentation/javascript/basics?hl=pt-BR#SpecifyingSensor
5/6
12/06/12
Pri nc ípi os básic os da Google Maps Jav asc ript API V3 - Google Maps API — G oogle Developers Os aplicativos de produção devem sempre especificar uma versão anterior (por ex., 3.6, 3.7 etc.). O Contrato de nível de serviço da API Premier do Google Maps não se aplica à versão noturna de desenvolvimento atual. Os aplicativos da API devem usar a versão de lançamento atual ou uma versão anterior para serem cobertos pelo SLA. Quando você desenvolver um novo aplicativo da Google Maps API v3, recomendamos que você selecione a versão noturna mais recente pelo n 3.5) e depois continue a usar essa versão até o momento em que você precisar acrescentar mais recursos disponíveis a uma versão posterior. você está usando amadurece conforme seu aplicativo se desenvolve, passando a ser versão de lançamento e, ao longo do tempo, a versão co Os aplicativos de produção que solicitam uma versão igual ou anterior à versão atual congelada devem ser testados em relação à versão de la uma vez por trimestre, a fim de identificar eventuais problemas de compatibilidade com as versões anteriores antes que seja congelada.
Documentação das versões A documentação sempre refletirá a versão noturna (de desenvolvimento). No entanto, para cada versão, ofereceremos uma referência mantida separa Referência da versão noturna (3.8) (Atual) Referência da versão de lançamento (3.7) (recursos estáveis) Referência da versão de lançamento (3.6) (congelada) As versões 3.0 - 3.5 foram descontinuadas
Solução de problemas A seguir, apresentamos algumas abordagens que podem ajudá-lo a resolver problemas caso seu código aparentemente não esteja funcionando: Procure erros de digitação. Lembre-se de que JavaScript é uma linguagem que diferencia maiúsculas e minúsculas. Use um depurador de JavaScript. No Firefox, use o console do JavaScript, o Depurador Venkman ou o complemento Firebug. No Internet Explor scripts da Mi crosoft. Esta série de screencasts demonstra como usar as várias ferramentas de depuração. Poste suas dúvidas no grupo da Google Maps API V3.
https://developers.google.com/maps/documentation/javascript/basics?hl=pt-BR#SpecifyingSensor
6/6
