Criar um mapa básico do Google
Este exemplo cria um mapa do Google centrado em Londres, Inglaterra:
Exemplo
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js"></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 você mesmo " O restante desta página descreve o exemplo acima, passo a passo.
1. Coloque a API do Google
A API do Google Maps é uma biblioteca JavaScript. Ele pode ser adicionado a uma página web com um <script> tag:
<script src="http://maps.googleapis.com/maps/api/js"></script>2. Definir Propriedades do Mapa
Crie uma função para inicializar o mapa:
function initialize() {
}Na função de inicialização, crie um objeto (mapProp) para definir as propriedades para o mapa:
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};A propriedade centro especifica onde o centro do mapa. Criar um objeto LatLng para centrar o mapa em um ponto específico. Passe as coordenadas na ordem: latitude, longitude.
A propriedade zoom especifica o nível de zoom para ver o mapa. zoom: 0 mostra um mapa da Terra totalmente ampliada fora. níveis mais elevados de zoom zoom em uma resolução maior.
A propriedade mapTypeId especifica o tipo de mapa para mostrar. Os seguintes tipos de mapas são suportados:
- ROTEIRO (normal, default 2D map)
- SATÉLITE (photographic map)
- HYBRID (photographic map + roads and city names)
- TERRENO (map with mountains, rivers, etc.)
3. Criar um Mapa do Container
Criar um <div> elemento para segurar o mapa. Use CSS para o tamanho do elemento:
<div id="googleMap" style="width:500px;height:380px;"></div>O mapa irá sempre "inherit" o tamanho de seu elemento de recipiente.
4. Criar um objeto de mapa
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);O código acima cria um novo mapa dentro do <div> elemento com id = "googleMap", usando os parâmetros que são passados (mapProp) .
5. Adicionar um ouvinte de eventos para carregar o mapa
Adicionar um ouvinte DOM que irá executar o initialize() função da carga janela (when the page is loaded) :
google.maps.event.addDomListener(window, 'load', initialize);
de forma assíncrona Carregando
Também é possível carregar a API do Google Maps em demanda.
O exemplo abaixo utiliza window.onload para carregar a API do Google Maps depois que a página foi totalmente carregado.
O loadScript() função cria a API do Google Maps <script> tag. Além disso, o retorno = parâmetro inicializar é adicionado ao fim do URL para executar a initialize() após a API é totalmente carregado:
Exemplo
function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Tente você mesmo " vários mapas
O exemplo abaixo define quatro mapas em uma página web (quatro mapas com diferentes tipos de mapa):
Exemplo
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
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 você mesmo " Key Google API
Google permite que o seu web site para chamar qualquer API do Google, muitos milhares de vezes por dia.
Se você planeja para o tráfego mais pesado, você deve obter uma chave de API gratuita do Google.
Ir para https://console.developers.google.com para obter uma chave livre.
Google Maps espera encontrar a chave API no parâmetro chave ao carregar um API:
<script src="http://maps.googleapis.com/maps/api/js? key=YOUR_KEY "></script>