Antes de mais nada, para carregarmos a API, necessitamos do seguinte código JavaScript (tomamos como base nesse post a utilização das tecnologias HTML, JSP e JavaScript):
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
"O URL contido na tag script é o local de um arquivo JavaScript que carrega todos os símbolos e definições necessários para usar a API do Google Maps. Essa tag script é obrigatória." - Texto retirado deste site.Depois do carregamento, devemos chamar a função initialize(), onde você escolherá o zoom do mapa, o centro inicial e o "tipo" do mapa (ROADMAP é o padrão):
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
Também é preciso reservar certo espaço da pagina para o mapa, criando uma div:<div id="map_canvas" style="width: 100%; height: 100%"></div>
Por fim, dentro da tag <body> do html, é necessário a inclusão da tag abaixo para a exibição. <body onload="initialize()">
Depois desses passos, você terá uma simples tela com um mapa reservado em certo espaço e com centro e zoom escolhidos por você, como o que vê abaixo:
No caso, o centro esta localizado em Sidney, Austrália.
Nenhum comentário:
Postar um comentário