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&amp;v=2&amp;sensor=true&amp;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.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *