O Google Maps Basics
Crie um mapa simples do Google
Agora vamos criar um mapa simples do Google.
Aqui está um mapa do Google mostrando Londres, Reino Unido:
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=izasyDy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> funcript> função Google.maps.latlng (51.508742, -0.120850), Zoom: 5, MapTypeID: google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ("GoogleMap"), mappoprop); Initialize); </script> </ad> <body> <div id = "googleMap"> </div> </body> </html>Exemplo de renderização (pode ser copiado e executar diretamente, é claro que você precisa acessar o Google)
Exemplo de análise
Usamos o exemplo acima para analisar o processo de criação do Google Maps.
Por que um aplicativo declara HTML5?
<! Doctype html>
A maioria dos navegadores usa páginas de renderização de documentos HTML5 do "modo padrão", o que significa que seu aplicativo é compatível com os principais navegadores.
Além disso, se não houver tag Doctype, o navegador usará o modo Quirks para renderizar o conteúdo da página.
DICA: Deve -se notar que alguns CSs "Modo Promiscuuous" não podem ser usados com o modo padrão. Em aplicações específicas, todos os tamanhos baseados em porcentagem devem ser herdados do elemento de bloco pai. Se nenhum tamanho for especificado no módulo pai, o valor padrão será de 0 x 0 pixels. Se você deseja usar porcentagens, pode declará -las na tag <yoy> da seguinte forma:
<style type = "text/css"> html {altura: 100%} corpo {altura: 100%; margem: 0; preenchimento: 0} #GOOGLEMAP {Height: 100%} </style>Esta declaração de estilo indica que o módulo de mapa (GoogleMap) deve ter uma altura HTML de 100%.
Adicione a chave da API do Google Maps
A API do Google Maps deve ser incluída na primeira tag <Script> no exemplo a seguir:
<script src = "http://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </script>
Coloque a tecla API gerada pelo Google no parâmetro de chave (key = your_api_key).
O parâmetro do sensor é necessário, o que indica se o aplicativo usa um sensor (semelhante à navegação GPS) para localizar a localização do usuário. O valor do parâmetro pode ser definido como true ou falso.
Https
Se o seu aplicativo for um aplicativo HTTP seguro (HTTPS: HTTP Secure), você poderá usar o HTTPS para carregar a API do Google Maps:
<script src = "https://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </script>
Carregamento assíncrono
Da mesma forma, podemos carregar a API do Google Maps depois que a página estiver totalmente carregada.
O exemplo a seguir usa Window.onload para obter carregamento total dos mapas do Google. A função loadScript () cria a tag de carregamento do Google Maps <Script>. Além disso, o parâmetro de retorno de chamada = inicialize é adicionado no final da tag. O Initialize () como a função de retorno de chamada será executado depois que a API estiver totalmente carregada:
Exemplo
<! Doctype html> <html> <head> <cript> função inicialize () {var mapprop = {Center: new Google.maps.latlng (51.508742, -0.120850), zoom: 7, maptypeid: google.maps.maptypeid.map ° var map = new google.maps.map (document.getElementById ("googleMap"), mapprop);} função loadScript () {var script = document.createElement ("script"); script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false&callback=initialize"; document.body.appendChild (script);} window.onload = loadscript; </script> </ad Head> <body> <div id = "googleMap"> </div> </body> </html>Defina propriedades do mapa
Antes de inicializar o mapa, precisamos criar um objeto de propriedade do mapa para definir algumas propriedades do mapa:
var mapprop = {Center: new google.maps.latlng (51.508742, -0.120850), zoom: 7, maptypeid: google.maps.maptypeid.roadmap};Center (ponto central)
A propriedade central especifica o centro do mapa, que cria um ponto central no mapa através de coordenadas (latitude, longitude).
Zoom (série Zoom)
A propriedade Zoom especifica a faixa de zoom do mapa. Zoom: 0 mostra o zoom completo de todo o mapa da terra.
MapTypeid (o tipo inicial do mapa)
A propriedade MapTypeid especifica o tipo inicial do mapa.
MapTypeID inclui os quatro tipos a seguir:
google.maps.maptypeid.hybrid: a camada transparente da rua principal que exibe imagem de satélite
google.maps.maptypeid.roadmap: mostre mapa normal de rua
google.maps.maptypeid.satellite: exibir imagem de satélite
google.maps.maptypeid.terrain: mostre mapas com características naturais, como terreno e vegetação
Onde exibir mapas do Google
Normalmente, o Google Maps é usado em elementos <div>:
<div id = "googleMap"> </div>
Nota: O mapa exibirá o tamanho do mapa com o tamanho definido na div, para que possamos definir o tamanho do mapa no elemento <div>.
Crie um objeto de mapa
var map = new google.maps.map (document.getElementById ("googleMap"), mapprop);
O código acima usa o parâmetro (mapprop) para criar um novo mapa no elemento <div> (ID é GoogleMap).
Dica: se você deseja criar vários mapas na página, basta adicionar um novo objeto de mapa.
O exemplo a seguir define quatro instâncias de mapa (quatro mapas usam diferentes tipos de mapa):
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=izasyDy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> funcript> função google.maps.latlng (51.508742, -0.120850), Zoom: 9, Maptypeid: google.maps.maptypeid.roadmap}; var mapprop2 = {Center: new google.maps.latlng (51.508742, -0.120850), zoom: 9, maptypeid: google.maps.maptypeid.satellite}; var mapprop3 = {Center: new google.maps.latlng (51.508742, -0.120850), zoom: 9, maptypeid: google.maps.maptypeid.hybrid}; var mapprop4 = {Center: new google.maps.latlng (51.508742, -0.120850), zoom: 9, maptypeid: google.maps.maptypeid.terrain}; var map = new google.maps.map (document.getElementById ("googleMap"), mapprop); var map2 = new google.maps.map (document.getElementById ("googleMap2"), mapprop2); var map3 = new google.maps.map (document.getElementById ("googleMap3"), mapprop3); var map4 = new google.maps.map (document.getElementById ("googleMap4"), mapprop4);} google.maps.event.adddomListener (window, 'load', Initialize); </script> </head> <body> <div id = "googLemap"> <bript> <bript> id = "googleMap3"> </div> <br> <div id = "googleMap4"> </div> </body> </html>Carregando o mapa
Depois que a janela é carregada, o objeto MAP é inicializado executando a função inicialize (), que garante que o Google Maps seja carregado após a página estar totalmente carregada:
google.maps.event.adddomListener (janela, 'load', inicializar);
O exposto acima é uma compilação das informações básicas do Google Maps. Continuaremos a adicioná -lo mais tarde. Obrigado pelo seu apoio a este site!