Google: Google Maps API (1)
Veja neste post como adicionar mapas do google, através de sua API, dentro de um site. Esta API permite usar JavaScript para incorporar o Google Maps em sua página da web.
Siga os passos:
1º. Inscrever no google maps para receber uma chave única para o seu site. Faça o cadastro neste endereço http://code.google.com/intl/pt-BR/apis/maps/signup.html
2º. Informe o domínio do seu site e clique no botão <Gerar chave da API>. Após, você deve salvar a chave gerada, para utilização no seu código html.
3º. Abra o seu arquivo .html e insira o seguinte código dentro das tags <head> </head>.
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=" type="text/javascript"> </script> |
— acrescente o código da chave gerada após o parâmetro key=
Exemplo:
<script src=”http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABJUUUZXXxxvCIN_3jlIpP_TESTE”
type=”text/javascript”>
</script>
4º. Continuando… insira mais estes códigos:
<script type="text/javascript"> //<![CDATA[ var icon = new GIcon(); icon.image = "http://labs.google.com/ridefinder/images/mm_20_green.png"; icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1); function createInfoMarkerGoogle(point, address) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(address); }); return marker; } function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(-23.545035,-46.638052), 15, G_SATELLITE_MAP); var point = new GLatLng(-23.545035,-46.638052); address = "<font face=Arial size=2><b>Praça Ramos de Azevedo, 76-260 - República</b><br>São Paulo - SP, 01037-010</font><br />" var marker = createInfoMarkerGoogle(point, address); map.addOverlay(marker); map.addControl(new GLargeMapControl ()); map.addControl(new GMapTypeControl()); } } //]]> </script> |
Explicando:
A function load() é utilizada para criar o nosso mapa, baseando nas coordenadas informada (GLatLng). Ainda nesta função, é permitido colocarmos um ícone para identificação do local definido pelas coordenadas. O caminho passado para icon.image pode ser um caminho que contenha uma imagem de sua preferência. Quando clicamos no ícone é exibido o texto definido na variável address. É possível colocar uma imagem, basta inserir a tag <img>. Para criar o ícone fazemos a chamada da function createInfoMarkerGoogle, a qual recebe como parâmetro as coordenadas e o valor da variável address.
5º. Para finalizar, precisamos chamar a função load(). Acrescente mais estes códigos:
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 420px; height: 400px"></div>
</body> |
Explicando:
Utilizamos o evento onload para chamar a function load() e o mapa é criado dentro do div.
Na parte 2 deste post, vou disponibilizar o resultado final e uma dica bem fácil de como descobrir as coordenadas.