O que é o Google Maps?
O Google Maps é uma API do Google
O Google Fonts é uma API do Google
O Google Charts é uma API do Google
Saiba como adicionar o Google Maps à sua página da web.
Meu primeiro mapa do Google
Comece com uma página web simples.
Adicione um elemento <div> onde você deseja que o mapa seja exibido e defina o tamanho do mapa:
Exemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:100%;height:400px;">My map will go here</div>
</body>
<html>
Adicione uma função JavaScript para exibir o mapa:
Exemplo
function myMap() {
var mapCanvas =
document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.2),
zoom:
10
};
var map = new google.maps.Map(mapCanvas,
mapOptions);
}
A variável mapCanvas é o elemento HTML do mapa.
A variável mapOptions define as propriedades do mapa.
A propriedade center especifica onde centralizar o mapa (usando coordenadas de latitude e longitude).
A propriedade zoom especifica o nível de zoom do mapa (tente experimentar com o nível de zoom).
O objeto google.maps.Map é criado com mapCanvas e mapOptions como parâmetros.
Por fim, adicione a API do Google
A funcionalidade do mapa é fornecida por uma biblioteca JavaScript localizada no Google:
Exemplo
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
Tutorial do Google Maps
Saiba mais sobre o Google Maps em nosso Tutorial do Google Maps .