Latest web development tutorials

base de Google Maps

Criar um simples Google Maps

Agora vamos criar um simples Google Maps.

O que se segue é um gráfico que mostra o Google Maps Londres:

Exemplos

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

tente »

Exemplos de analítico

No exemplo acima, criamos um processo para resolver o mapa do Google.

Por que deve declarar o HTML5 aplicação?

<!DOCTYPE html>

A maioria dos navegadores usar o "modelo padrão" da HTML5 renderizar o documento de página, o que significa que a sua aplicação é compatível com todos os principais navegadores.

Além disso, se não houver uma tag DOCTYPE, o navegador que você usa modo promíscuo (modo quirks) para renderizar o conteúdo da página.

Dica: Deve-se notar que alguns "modo promíscuo" no CSS e você não pode usar o modo padrão.Em uma aplicação particular, todos devem herdar de elementos de bloco pai com base em um percentual do tamanho. Se você não especificar o tamanho do módulo no pai, o valor padrão 0 x 0 pixels. Se você quiser usar percentagens, podem ser declarados na tag <style>, como segue:

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

Este módulo declaração de estilo mapa show (GoogleMap) deve ser de altura HTML de 100%.

Adicionar Google Maps API Key

No exemplo a seguir o primeiro tag <script> deve ser incluída no Google Maps API:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

A chave da API do Google gerado colocados emparâmetros-chave(key= YOUR_API_KEY).

O parâmetro do sensor é necessário, o parâmetro é utilizado para indicar se a aplicação utiliza um sensor (semelhante à navegação GPS) para localizar a localização do utilizador.Os valores dos parâmetros podem ser definidos como verdadeiro ou falso.

HTTPS

Se sua aplicação for HTTP seguro: application (HTTPS HTTP seguro), você pode usar 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, também podemos carregar a API do Google Maps depois que a página foi totalmente carregado.

O exemplo a seguir usa window.onload para implementar totalmente carregado quando a página é carregada Google Maps. loadScript () função cria carregar a API do Google Maps tag <script>. Também no final da etiqueta para o callback = inicializar os parâmetros, inicializar () será executado após o API está totalmente carregado como a função de retorno:

Exemplos

function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}

window.onload = loadScript;

tente »

Propriedades mapa personalizado

Antes de iniciar o mapa, é preciso criar um objeto Mapa para definir propriedades do mapa de propriedade:

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Centro (centro)

atributo centro especifica centro do mapa, que por coordenadas (latitude, longitude) para criar um ponto central no mapa.

Zoom (Zoom Series)

propriedade zoom zoom do mapa especifica o número de estágios. zoom: 0 mostrar a escala completa de todo o mapa da Terra.

MapTypeId (tipo de mapa inicial)

mapTypeId atributo type especifica o mapa inicial.

mapTypeId inclui os quatro tipos seguintes:

  • google.maps.MapTypeId.HYBRID: imagens de satélite mostram a rua principal da camada transparente
  • google.maps.MapTypeId.ROADMAP: exibir o mapa de rua normal
  • google.maps.MapTypeId.SATELLITE: imagem Mostrar por satélite
  • google.maps.MapTypeId.TERRAIN: exibe mapas com características físicas (tais como topografia e vegetação) de

Onde exibir o Google Maps

Normalmente usado no Google Maps elemento <div>:

<div id="googleMap" style="width:500px;height:380px;"></div>

Nota: O tamanho domapa será div definida para mostrar o tamanho do mapa, para que possamos definir o tamanho do mapa na <div> elemento.

Criar um objeto de mapa

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

O código acima usa o parâmetro (mapProp) no elemento <div> (id é googleMap) cria um novo mapa.

Dica: Se vocêdeseja criar várias páginas de mapas, você só precisa adicionar um novo mapa de objetos pode ser.

O exemplo a seguir define quatro mapas de instância (mapas usando quatro tipos de mapas diferentes):

Exemplos

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

tente »

Carregando mapa

Mapa janela para inicializar o objeto após o carregamento executando a função initialize (), o que garante que a página foi totalmente carregado antes de carregar o Google Maps:

google.maps.event.addDomListener(window, 'load', initialize);