Como sabemos o Google Maps é um excelente serviço, embora ele nos permite inserir um mapa através de um iframe, o real potencial está na sua API de javascript que permite marcar pontos no mapa, pegar coordenadas, traçar rotas, transformar endereços em coordenadas de latitude e longitude.

Vamos então começar inserindo um mapa em nossa página utilizando a API e para isso precisamos inserir a biblioteca do Google Maps: 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Agora vamos criar uma função que será chamada no onload da tag body para o mapa somente ser criado após o documento ser totalmente carregado, isso garante que o elemento div no qual iremos inserir o mapa, já esteja carregado quando o código javascript for carregado:

var map = null; 
function carregar(){
    var latlng = new google.maps.LatLng(-29.767954,-57.071657);
             
    var myOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
         };
         
    //criando o mapa
   map = new google.maps.Map( document.getElementById("mapa") , myOptions );
}

Ver mapa

O código até é bem simples, na linha 3 criamos um objeto que representa uma coordenada em latitude e longitude, esses objetos são utilizados em vários métodos da API.

Na linha 5 definimos as opções iniciais do mapa, na linha 6 definimos o nível de zoom inicial, na linha 7 configuramos onde o mapa será centralizado(utilizamos o objeto criado na linha 3) . Na linha 8 definimos tipo de mapa, podemos utilizar os seguintes: ROADMAP, SATELLITE, HYBRID.

Na linha 12 é onde criamos realmente o mapa. No construtor do objeto o primeiro parâmetro recebe o elemento irá conter o mapa, no segundo os parâmetros de inicialização do mapa que definimos anteriormente. Note que ele armazenamos a referência ao mapa na variável map e é através dela que podemos modificar o mapa inserindo marcadores, etc.
Podemos mudar várias propriedades do mapa através de funções.

//centralizando o mapa
map.setCenter( new google.maps.LatLng(-29.767954,-53.071657) );

//mudando o zoom do mapa
map.setZoom(5);

//mudando o tipo do mapa
map.setMapTypeId(google.maps.MapTypeId.SATELLITE);

Marcadores

Também podemos inserir um marcador em um determinado ponto do mapa através de marcadores.

var praca = new google.maps.LatLng(-29.756200185902156, -57.08757859271242);
marcadorPraca = new google.maps.Marker({
    position: praca,
   map: map,
   title:"Praça da Cidade"
});

Criamos um marcador simples, basicamente definimos um ponto na linha 1, na linha 2 criamos o objeto de marcador passando as seguintes opções:

  • position: o ponto do mapa que o marcador vai ser inserido
  • map: mapa no qual vai ser inserido o marcador
  • title: um título para o marcador.

Podemos também inserir um ícone personalizado para o marcador através da opção icon

icon: '/caminho/para/a/imagem'

Veja o exemplo

Eventos de click

Podemos definir certas ações para quando o usuário clicar em um mapa, ou em um marcador, para isso podemos dever criar um listener.

google.maps.event.addListener(map, 'click', function(event) {
    alert(event.latLng)
});

Veja o exemplo

No código acima estamos definindo que “escutaremos” eventos no objeto map ou seja no nosso mapa, e que o evento que escutaremos serão os eventos de “click“(podemos também escutar os eventos de dblclick, mouseup, mousedown, mouseover, mouseout) e ao ser executado pelo usuário um desses eventos será executado a function definida que receberá um objeto de evento como parâmetro que irá conter basicamente apenas um atributo, as coordenadas de latitude e longitude de onde foi executado o evento, com isso podemos colocar um marcador no local ou centralizar o mapa por exemplo.

Outra coisa interessante para fazer com evento é fazer abrir um balão com informações ao se clicar em um determinado marcador: 

var praca = new google.maps.LatLng(-29.756200185902156, -57.08757859271242);
marcadorPraca = new google.maps.Marker({
        position: praca,
        map: map,
        title:"Praça da Cidade",
});
var infowindow = new google.maps.InfoWindow({
        content: "aqui voce pode adicionar conteudo <strong>HTML</strong>"
});
             
google.maps.event.addListener(marcadorPraca, 'click', function(event) {
    infowindow.open(map,marcadorPraca);
});

Veja o exemplo

Primeiro criamos um objeto de janela de informação com o texto do balão.
Depois em vez de “escutarmos” um evento de ‘click‘ no mapa inteiro, vamos “escutar” apenas no marcador que criamos e na função que irá executar quando ‘click‘ ocorrer irá abrir a janela de informação através do método open que receberá como parâmetro o mapa e ao qual marcador a janela pertence.

Transformar endereço em coordenadas

Como vimos acima, sempre que iremos inserir alguma coisa no mapa deveremos fornecer as coordenadas de latitude e longitude, mas vamos ser sinceros não é algo muito natural, para isso a API do Maps nos fornece um serviço de Geocoding para converter um endereço textual como estamos acostumado em coordenadas.

var endereco = 'Porto Alegre - RS';
geocoder = new google.maps.Geocoder();      
geocoder.geocode({'address':endereco}, function(results, status){ 
    if( status = google.maps.GeocoderStatus.OK){
        latlng = results[0].geometry.location;
        markerInicio = new google.maps.Marker({position: latlng,map: map});     
        map.setCenter(latlng); 
    }           
});

Veja o exemplo

Na linha 1 pegamos o endereço que pode vir de um formulário por exemplo.

Na linha 2 é criado um objeto Geocoder que é responsável por fazer a requisição assíncrona de endereço ao webservice do Maps.

Na linha 3 é feita requisição através do método geocode passando um objeto JSON como requisição, onde definimos que queremos a localização através do endereço ‘address’, também poderíamos enviar uma coordenada para pegar o endereço passando como requisição ‘latLng‘.

Após a requisição ser feita será chamada a function que foi passada como segundo parâmetro do método geocode, esta function que recebe como parâmetro um array de resultados gerados pelo service do maps e um código de status da requisição.

Na linha 4 testamos se não houve erros na requisição, e na linha 5 pegamos o primeiro resultado do array e pegamos os dados de geometry.location que contem as coordenadas de latitude e longitude.

Depois apenas colocado um marcador no local do endereço e centralizamos neste local.

Bom isso é o básico, a API do Google Maps permite fazer bem mais coisas e possui muitas outras opções, essas foram apenas as mais básica, então consulte a documentação que é bem completa e com muitos exemplos.