Google API [Pequena demonstração]

Dórian Conde Langbeck · Fevereiro 25, 2008

Essa vai principalmente para os amigos do tópico http://forum.imasters.com.br/index.php?showtopic=273659

pois foram eles q levantaram essa questão...

A Google API é muito ampla e pouca gente estuda ao seu respeito (oq é uma pena)...

ai vai um exemplo basico para facilitar q um cliente encontre a empresa...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>Exemplo de uso da Google API</title>
	<script src=" http://maps.google.com/?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
	<style type="text/css">
	  body {
		font-family: Verdana, Arial, sans serif;
		font-size: 11px;
		margin: 2px;
	  }
	</style>
	<script type="text/javascript">
 
	var map;
	var gdir;
	var geocoder = null;
	var addressMarker;
	
	var minhaLocalizacao = "Av Brasil, 100 - São Paulo, SP" //Localização inicial passada como ponto de partida

	function inicializar_gmaps() {
	  if (GBrowserIsCompatible()) {	  
		map = new GMap2(document.getElementById("div_mapa")); //Local onde o mapa gerado deve ficar
		gdir = new GDirections(map, document.getElementById("direcoes")); //Local para ficar o "passo-a-passo" pra chegar ao destino
		GEvent.addListener(gdir, "error", gmaps_erros); //Define qual função vai manipular os erros retornados
	  }
	}
	
	function gmaps_erros() {
	   if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
		 alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);

	   else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
		 alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);

	   else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
		 alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

	   else if (gdir.getStatus().code == G_GEO_BAD_KEY)
		 alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);

	   else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
		 alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);

	   else alert("Um erro desconhecido aconteceu.");
	   
	}
	
	function mapsPesquisa(irPara) {
		//Responsavel por iniciar o carregamento dos mapas nos locais especificos
		gdir.load("from: " + minhaLocalizacao + " to: " + irPara);
	}
	
	//CONSIDERAÇÕES IMPORTANTES
	//A função GUnload() q e chamada quando a pagina é descarregada, serve para evitar a sobrecarga do browser
	//O mada se ajusta ao tamanho da <DIV> ou objeto q é indicado
	</script>

  </head>
<body onload="inicializar_gmaps()" onunload="GUnload()">
<h2>Usando "Av Brasil, 100 - São Paulo, SP" como ponto de partida...</h2>
<table>
	<tr>
		<td><strong>Digite o seu endereço:</strong></td>
		<td><input type="text" size="25" id="irPara" value="Bela Vista, São Paulo, SP" /></td>
		<td><input type="button" value="Go!" onClick="mapsPesquisa(document.getElementById('irPara').value)" /></td>
	</tr>
</table>
Ainda não sei porque as localizações muito distantes (geralmente fora do país) do ponto inicial epresentão erros...
<br/>

<div id="tabela_maps">
<table class="directions">
	<tr><th>"Passo-a-passo"</th><th>Mapa</th></tr>
	<tr>
		<td valign="top"><div id="direcoes" style="width: 275px"></div></td>
		<td valign="top"><div id="div_mapa" style="width: 500px; height: 400px"></div></td>
	</tr>
</table>
</div>
</body>
</html>

O codigo ja esta devidamente comentado... Espero ter ajudado xP

Abraços ^^

Dimas Gomez · Março 27, 2008

Olá, sou novo por aqui,

Eu inicialmente resolvi entrar para o fórum só para agradecer pelo script, mas acho que vim para ficar.

Então me perdoem a newbice.

Já vinha procurando este exemplo há bastante tempo e encontrei por acaso. :D

Ainda preciso de algo um pouco mais simples,

que apenas exiba o mapa (endereço pré-alimentado), sem mais nada.

Como devo modificar o código?

Tive dificuldade em colar o código no Eclipse (windows?), então modifiquei a codificação do arquivo novo pra UTF-8 antes disso.

Além disso, aparecia um quadrado cinza ao invés de um mapa inicial.

Pra "resolver" isso, inseri a chamada da função do botão no onload:

...

body onload="inicializar_gmaps();

mapsPesquisa(document.getElementById('irPara').value);"

...

Muito obrigado, Dórian, pelo trabalho e pela acolhida!!! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Dimas Gomez. :rolleyes:

dimasgomez_homedns_org

Dórian Conde Langbeck · Março 27, 2008

bem vindo ao Forum iMasters... vlw msm pelos agradecimentos =]

quando você tiver um tempinho livre, tente dar uma olhada nas regras do Forum iMasters

é bom ter ajudado ^^

Marcelo Mohr Maciel · Abril 15, 2008

Parabens, ótimo exemplo!

williamfoose · Maio 4, 2008

Bom dia amigo.

Bom veja o link abaixo

http://www.properspell.com/setup/

Nele está pedindo um tal de Google API KEY. Você sabe como arrumo este codigo?

Porque preciso colocar o ProperSpell no resultado de pesquisa do meu site, Mais não consequi.

Fui no site do Google. Pelo link que estava lá. E pequei o codigo, mais não deu.

Se poder dar uma ajudinha =D

Dórian Conde Langbeck · Maio 9, 2008

Bom dia amigo.

Bom veja o link abaixo

http://www.properspell.com/setup/

Nele está pedindo um tal de Google API KEY. Você sabe como arrumo este codigo?

Porque preciso colocar o ProperSpell no resultado de pesquisa do meu site, Mais não consequi.

Fui no site do Google. Pelo link que estava lá. E pequei o codigo, mais não deu.

Se poder dar uma ajudinha =D

basta você clicar aqui, aceite os termos da licença, escolha o dominio de atuação e siga em frente...

depois você tera q fornecer seu primeiro e ultimo nome...

pronto!!! você tem agora uma Google Key...

bem... eu sei q é assim q se consegue uma chave para a API do Google... agora eu naum sei se esse site q você citou vai reconhecer...

com essa chave você pode usar os codigos baseados na API do Google...

Abraços

williamfoose · Maio 11, 2008

Não funcionou. Aff muito dificel de cadastrar nele. O ruim que estou precisando de um spell Checking.

Entrei no link do google que você flw e clique em aceitar. Ae coloquei o dominio no do meio.

Pediu meu e-mail e senha da conta do gmail. Ae apareceu isso.

Thank you for signing up for a Google API key!

Your key is:

{O KEY ESTÁ AQUI}

This key is good for all URLs in this domain:

{MEU DOMINIO AQUI}

Verifique o(a) API documentation for more information.

:(

Shakapp · Março 30, 2009

Esto com uma duvida, com o exemplo que foi passado, tenho a rota para se chegar de um endereço especificado a outro fixo, minha duvida é eu consigo fazer o mesmo, mas passando coordenadas? tenho as coordenadsa guardadas em um banco de dados, e gostaria de gerar uma rota para estas coordenadas, tipo passando pela coordenada 1 depois pela 2 e assim por diante, e o google se preocupa de como chegar em cada uma delas. É possivel?

Dórian Conde Langbeck · Março 31, 2009

Esto com uma duvida, com o exemplo que foi passado, tenho a rota para se chegar de um endereço especificado a outro fixo, minha duvida é eu consigo fazer o mesmo, mas passando coordenadas? tenho as coordenadsa guardadas em um banco de dados, e gostaria de gerar uma rota para estas coordenadas, tipo passando pela coordenada 1 depois pela 2 e assim por diante, e o google se preocupa de como chegar em cada uma delas. É possivel?

é possivel sim, porem estou a muito afastado do PHP e da API do Google Maps, mas eu lembro que pouco depois desse post eu fiz um aplicativo como voce descreveu... lembro-me q o codigo não era grande, nem chegava a 700 linhas (tudao: db, html, js...)...

Boa sorte

Arquivado

Google API [Pequena demonstração]

Recommended Posts

Dórian Conde Langbeck 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dimas Gomez 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dórian Conde Langbeck 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcelo Mohr Maciel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

williamfoose 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dórian Conde Langbeck 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

williamfoose 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Shakapp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dórian Conde Langbeck 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Fóruns

Tempo Real

Informação importante