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>.
— 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:
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:
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.