Olá, hoje vou falar um pouco sobre a API do Google Docs.
No site do googlecode podemos consultar o manual de referência
Para simplificar vou mostrar um exemplo simples que implementei.
Primeiro Passo: Adquira uma chave de licença para poder utilizar o google maps, ela licença opde ser obtida no seguinte endereço: code
<script type="text/javascript"> // levando em cosideração que incluiu o arquivo do JQuery antes//<script type="text/javascript" src="/js/jquery/jquery-1.3.2.min.js"></script>$(document).ready(function() {
// esta função que criaremos em seguida é executada quando a página carrega
initLoader();
});//função que carrega o mapa
function mapsLoaded() {
// crie uma div com id="map" <div id="map" style="width:500px;">aqui será carregado o mapa</div>
var map = new google.maps.Map2(document.getElementById("map"));
// cria o controle de Zoom
map.addControl(new GLargeMapControl());
// cria a opção de mudar o tipo de mapa, satélite hibrido ou mapa normal que é o padrão
map.addControl(new GMapTypeControl());//agora vamos carregar o endereço a ser procurado pelo gmaps
var geocoder = new GClientGeocoder();
//na variavel address que pode vir de um formulário ou banco de dados coloque o endereço a ser procurado
var address = "Rua Cláudio Coutinho, 1419, Foz do Iguaçu";
//se quiser personalizar a mensagem que aparecerá no endereço localizado preencha a variável texto com formato HTML
var texto = "<strong>Casa do João</strong><br /><strong>Endereço </strong>: Rua Cláudio Coutinho, 1419<br />";geocoder.getLatLng(
//procura a variavel address
address,
function(point) {
if (!point) {
alert(address + " não encontrado");
} else {
//point é a latitude e longitude do endereço encontrado, 17 é o nível de zoom, que pode chegar até 19 em algumas localidades, quanto maior o número maior o zoom
map.setCenter(point, 17);
var marker = new GMarker(point);
map.addOverlay(marker);
//aqui criamos o texto personalizado
marker.openInfoWindowHtml(texto);
}
}
);
}// esta função carrega a api do google maps versão 2, e logo após chama a função mapsLoaded para renderizar o mapa
function loadMaps() {
google.load("maps", "2", {"callback" : mapsLoaded});
}// função chamada no onLoad da página ou como no exemplo utilizando o JQuery
function initLoader() {
var script = document.createElement("script");
//onde está escrito internal, substitua pela sua chave do google maps
script.src = "http://www.google.com/jsapi?key=internal&callback=loadMaps";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
}
</script>Bom é isso, este exemplo só funcionará corretamente se estiver com uma chave válida e rodando no domínio indicado na chave.
Espero ter ajudado
Até mais!
Escrito por tiagomartinscc