Exibindo mapas no seu site – Google Maps + PHP – Parte 2 _ Thiago Belem _ Blog

10/03/13 Exibindo mapas no seu site – Google Maps + PHP – Parte 2 | Thiago Belem / Blog

blog.thiagobelem.net/exibindo-mapas-no-seu-site-google-maps-php-parte-2/ 1/11

Exibindo mapas no seu site – Google Maps +PHP – Parte 2

Atenção: Este artigo/tutorial foi escrito em setembro de 2009 e seu conteúdo pode estar

desatualizado. Se possível, procure artigos mais recentes.

Fala gente,

Essa é a continuação de um tutorial da semana passada: Buscando a Latitude e Longitude de um

endereço – Google Maps + PHP – Parte 1

Hoje vou mostrar como você pode exibir um mapinha do Google Maps no seu site, usando as

informações encontradas com a Google Maps API (que usamos no outro artigo).

Se você ainda não tiver uma Google Maps API Key (ou GMAK) acesse esse endereço e pegue a sua:

http://code.google.com/intl/pt-BR/apis/maps/signup.html

Agora, dentro do <head> do seu site, insira o seguinte código:

Não se esqueça de substituir o {GMAK} pela sua Google Maps API Key.

Agora você precisa criar um elemento HTML onde o mapa irá aparecer, exemplo:

Aí você pode definir a largura e altura dele no CSS do seu site ou até mesmo in-line… Não tem diferença.

Depois é só charmar esse código JavaScript, pode ser no fim da página, antes do body:

$thiagobelem->blog();Artigos e tutoriais sobre PHP, CakePHP, WordPress, jQuery, HTML e CSS

<script src="http://maps.google.com/maps?file=api&v=2&key={GMAK}"type="text/javascript"></script>

<div id="googleMap"></div>

01 if (GBrowserIsCompatible()) {02 var map = new GMap2(document.getElementById("googleMap"));03 var lat = {LATITUDE}; // Latitude do marcador04 var lon = {LONGITUDE}; // Longitude do marcador

http://blog.thiagobelem.net/php/buscando-a-latitude-e-longitude-de-um-endereco-google-maps-php-parte-1/

http://maps.google.com/

http://code.google.com/intl/pt-BR/apis/maps/signup.html

http://blog.thiagobelem.net/

http://maps.google.com/maps?file=api&v=2&key=



Compartilhe: 2 TweetTweet 2 Curtir 6

Agora é só substituir o {LATITUDE}, {LONGITUDE} e {ZOOM} (nas linhas 3, 4 e 5) pelas informações que

você conseguiu pegar usando o passo-a-passo do outro artigo.

Espero que tenham gostado!

This entry was posted in APIs, PHP, Tutoriais and tagged API, Google Maps, PHP on 17 de setembro de

2009 [http://blog.thiagobelem.net/exibindo-mapas-no-seu-site-google-maps-php-parte-2/] by Thiago

Belem.

About Thiago Belem

Desenvolvedor a mais de 10 anos, trabalha como freelancer criando sites, sistemas e portais utilizando

PHP, MySQL, CakePHP, WordPress e jQuery.

View all posts by Thiago Belem →

37 thoughts on “Exibindo mapas no seu site – Google Maps + PHP – Parte 2”

05 var zoom = {ZOOM}; // Zoom06 07 map.addControl(new GMapTypeControl());08 map.addControl(new GLargeMapControl());09 map.setCenter(new GLatLng(lat, lon), zoom);10 11 var marker = new GMarker(new GLatLng(lat,lon));12 13 GEvent.addListener(marker, "click", function() {14 marker.openInfoWindowHtml("<h2>Minha marca</h2><p>Meu texto!</p>");15 });16 17 map.addOverlay(marker);18 map.setCenter(point, zoom);19 }

cara muito bom o artigo estou desenvolvendo uma aplicação parecida… grande abraço..

Viconcursos

20 de outubro de 2011 at 8:38

https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fblog.thiagobelem.net%2Fexibindo-mapas-no-seu-site-google-maps-php-parte-2%2F&text=Exibindo%20mapas%20no%20seu%20site%20%E2%80%93%20Google%20Maps%20%2B%20PHP%20%E2%80%93%20Parte%202%3A&tw_p=tweetbutton&url=http%3A%2F%2Fblog.thiagobelem.net%2Fexibindo-mapas-no-seu-site-google-maps-php-parte-2%2F

http://twitter.com/search?q=http%3A%2F%2Fblog.thiagobelem.net%2Fexibindo-mapas-no-seu-site-google-maps-php-parte-2%2F

http://blog.thiagobelem.net/php/buscando-a-latitude-e-longitude-de-um-endereco-google-maps-php-parte-1/

http://blog.thiagobelem.net/desenvolvimento/php/apis/

http://blog.thiagobelem.net/desenvolvimento/php/

http://blog.thiagobelem.net/tutoriais/

http://blog.thiagobelem.net/tag/api/

http://blog.thiagobelem.net/tag/google-maps/

http://blog.thiagobelem.net/tag/php/

http://blog.thiagobelem.net/exibindo-mapas-no-seu-site-google-maps-php-parte-2/

http://blog.thiagobelem.net/author/thiago-belem/

http://blog.thiagobelem.net/author/thiago-belem/

http://www.viconcursos.com/

http://blog.thiagobelem.net/exibindo-mapas-no-seu-site-google-maps-php-parte-2/#comment-9587



Caso você não tenha consiguido mostrar o mapa, mas tenha conseguido imprimir corretamente os

parametros de latitude, longitude e zoom, a alternativa é usar o codigo que o Google Maps gera pra você

inserir o mapa :”Visualizar Avenida Orcalino Santos, Caldas Novas, GO, Brasil em um mapa maior”, aqui

o google passa 4 parametros: “q”, “ll”, “zoom”, “hnear”, que você pode substituir o valor de “q” por uma

variavel armazenando o endereço, “ll” pela latitude e longitude, “z” por “zoom” e “hnear” pelo endereço

novamente.

Assim:

$endereco = ‘Av. Brasil, 1453, Rio de Janeiro, RJ’;

$dados = $gmaps->geolocal($endereco);

$longitude = $dados["lon"];

$latitude = $dados["lat"];

$zoom = $dados["zoom"];

e funciona normalmente e automaticamente.

Jefferson

28 de setembro de 2011 at 18:44

Está dando esse erro: O servidor da API do Google Maps rejeitou seu pedido. O parâmetro “sensor”

especificado no pedido deve ser definido para “true” ou “false”.

ana

30 de junho de 2011 at 17:13

olá, como faço para mostrar varios pontos no mesmo site? Alguem tem alguma dica? Por exemplo, tenho

um site de imobiliaria e gostaria de mostrar os imóveis pelo mapa. Alguns sites já fazem isso, mas ainda

não achei nenhum tuto sobre isso.. vlw Obrigado.

Mauricio

18 de junho de 2011 at 13:37

Thiago vamos ver se vc pode me dar um help, adoei tuas aulas e conselhos você tem muito

conhecimento e experiência, totendo um problema com o google maps no meu site queria tua ajuda to

começando agora e não to conseguindo configurar de jeito nenhum ta dando a seguinte mensagem

(Este website precisa de uma chave diferente para a API do Google Maps. Uma nova chave pode ser

gerada em http://code.google.com/apis/maps/signup.html .) , tem como me dar uma mão ae?

antecipadamente obrigado.

marcelo nascimento

29 de maio de 2011 at 23:57

http://maps.google.com.br/maps?f=q&source=embed&hl=pt-BR&geocode=&q=Av.+Brasil,+1453,+Rio+de+Janeiro,+RJ&aq=&sll=-17.742413,-48.624952&sspn=0.011792,0.01929&vpsrc=0&ie=UTF8&hq=&hnear=Av.+Brasil,+1453+-+S%C3%A3o+Crist%C3%B3v%C3%A3o,+Rio+de+Janeiro,+20930-041&t=m&z=14&ll=-22.889402,-43.219187

http://pronetsolucao.com.br/



http://www.honorimoveis.com.br/


http://code.google.com/apis/maps/signup.html




Iaê Thiago blz?

primeiramente parabéns pela site gostei muito das dicas salvei no favorito

nesse tutoria do maps estou com um problema no localhost o mapa funciona direitinho mais online da

esse erro

Warning: curl_exec() has been disabled for security reasons in

/hsphere/local/home/wlnoblog/wlsites.com/sites/guia/registro_detalhes.php on line 140

Que coresponde a essa linha

$resultado = curl_exec($cURL);

si souber como me ajuda ficarei grato obrigado por tudo t+

Willian

25 de abril de 2011 at 1:55

Boa Tarde Amigo,

Desde já os meus parabéns pelo seu blog, tem ajudado imenso.

Agora estou com uma duvida, estou a fazer um directorio e empresas e gostaria de colocar um mapa em

cada pagina de empresa ou seja que o mapa fosse buscar a morada etc e mostra-se a localização.

No meu site as empresas fazem o registro e ficam com uma página da empresa com a informação da

mesma, contactos, morada etc… é nesta página que gostava que mostra-se o mapa. Como poso fazer?

Obrigado

Rui Brandão

23 de abril de 2011 at 10:19

Meus mapas aparecem pela metade ou não totalmente carregado, alguem pode me ajudar???

Christian

27 de março de 2011 at 18:43

http://www.wlsites.com/






Você precisa carregar o mapa já aparecendo, não pode tentar carregar o mapa escondido e depois dar

um display:block ou mostrá-lo com javascript

Thiago Belem

29 de março de 2011 at 16:49

Post author

Eae Thiago, parabéns por mais um artigo bacana!

Seguinte, pra galera que ainda ficou com duvidas segui o codigo do tutorial e funcionou perfeitamente,

disponibilizei para quem quiser baixar o codigo que eu fiz para tirar duvidas em

http://kadudesouza.com.br/gMaps.rar , e o mesmo arquivo funcionando em

http://takiofertas.com.br/projeto/gMaps/ como demontração do mesmo codigo que está para

download…

Espero ter ajudado…

Abraço

Kadu

18 de fevereiro de 2011 at 12:30

Já consultei, mas não achei nada relacionado.

Cassiano

19 de dezembro de 2010 at 16:09

É possível realizar a busca pelo nome da empresa ao invés de um endereço?

Consulte a documentação da API

Cassiano


Thiago Belem


Cassiano


http://thiagobelem.net/


http://kadudesouza.com.br/gMaps.rar

http://takiofertas.com.br/projeto/gMaps/

http://kadudesouza.com.br/









Consultei, mas não encontrei nada relacionado.

Olá amigo.

A minha não está aparecendo.

Será que é porque eu cadastrei meu site pra receber a chave, mas estou fazendo testes locais?

Ah, o mapa não aparece, mas as setinhas na esquerda e os tipos de visualizações (mapa, satélite ou

híbrido) aparecem.

Abraço a todos.

Já consegui fazer o mapa aparecer.

O retorno dos dados está muito lento, fazendo com que o tempo expire.

Alguém também está tendo problemas de lentidão?

Abraço.

É bom cachear os dados..

Márcio Vasconcelos, você postou que não estava aparecendo o mapa , depois disse que conseguiu

resolver, seria bom se pudesse postar qual foi a solução que usou para resolver

Márcio Vasconcelos


Márcio Vasconcelos


Thiago Belem


Suporte


Leonardo

9 de novembro de 2010 at 16:57









Estou com uma dúvida, poderia me explicar o que é a linha 13 e 14?

Ja descobri p/ q server.

Essas informações aparecem no balão na hora em que se clica em cima do marcador.

Leonardo


O artigo é 10, perdão 11.

Só estou com dificuldade para buscar o endereço no BD , poderiam dar uma LUZ ?

Desde ja agradeço.

Gerson


Muito fera o artigo – 100% funcional !!!

Estou fazendo a busca do endereço pelo banco de dados, depois chamo a latitude e longitude como

variáveis, jogo no java (com zoom fixo de 16), e é só alegria!! ehauaeheuaheua

Thumbs Up pro artigo. Forte abraço!

Poderia passar um exemplo de como vc conseguiu ?

Diogo Bernardelli


Gerson


Caro Thiago, como criar um código php que leia as coordenadas em um tabela mysql e monte um mapa

com esses dados?

rrh









Thiago

Pode parecer rídiculo

Mas eu coloquei um echo no javascript chamando as variáveis $latitude, $longitude e $zoom, mas não lê,

como devo fazer? estou iniciando no php =/

o echo tem que ser:

$dados[lat]

$dados[lon]

$dados[zoom]

Vinicius Menezes


Leonardo


Thiago, como fazer para inserir mais de uma marcação nio mapa?

Thiago, como fazer para inserir mais de uma marcação no mapa?

thiago santos

29 de julho de 2010 at 13:49

Daniel Jhonatan


Muito bom mesmo!!! pra quem nem sabe onde implementar estes códigos fica difícil como eu que sou

um cara leigo.

Meu nível é:

Vinicius Mendes

5 de março de 2010 at 16:01








o meu não funcionou.

Alguém pode me ajudar?

aconselho formatarem o a Tag DIV com sesu tamanhos se não. não vai ver nada.

alex torres

1 de março de 2010 at 20:00

Muito bom! Valeu!

Carlos


Cara eu consegui pegar as coordenadas do meu endereço, usando o Firebug vi qeu gera um erro no

arquivo main.js, linha 210, seria problema do google ou do seu código? eu deixei assim:

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById(“googleMap”));

var lat = -22.7758650; // Latitude do marcador

var lon = -43.2950176; // Longitude do marcador

var zoom = 15; // Zoom

map.addControl(new GMapTypeControl());

map.addControl(new GLargeMapControl());

map.setCenter(new GLatLng(lat, lon), zoom);

var marker = new GMarker(new GLatLng(lat,lon));

GEvent.addListener(marker, “click”, function() {

marker.openInfoWindowHtml(“Minha marcaMeu texto!”);

});

map.addOverlay(marker);

map.setCenter(point, zoom);

Adriano Meira


http://www.amixel.com.br/






}

As coordenadas acima são do endereço do seu exemplo.

Grato.

Tem como retornar um CEP pela busca do nome da rua?

Luis Passos


O Google Maps retorna uma negativa dizendo que a chave foi gerada segundo uma URL diferente.

O que pode ser?

O GoogleMaps, assim como a maioria das APIs utilizam uma validação da chave do site que está

solicitando o serviço, no caso, a geração de mapas. Essa chave (key) é gerada por você mesmo no site

http://code.google.com/intl/pt-PT/apis/maps/signup.html . Provavelmente este erro foi gerado ou

porque você não está utilizando uma key válida ou porque está usando, por exemplo, uma key gerada

para o seu site http://www.seusite.com.br , no entanto está testando as páginas no site

http://www.outrosite.com . Vale lembrar que uma key é válida somente para um site. O Google utiliza o

Java para fazer essas validações, no caso, acho que é a classe HasMap() que funciona simulando um

banco de dados, guardando uma chave associada a um dado valor:

URL Seu Site ——————————–> KEY,

A Key nunca se repete!

Cau Bastos


Sérgio Fernando

20 de janeiro de 2010 at 0:24

Thiago Belem



http://code.google.com/intl/pt-PT/apis/maps/signup.html

http://www.seusite.com.br/

http://www.outrosite.com/







Comments are closed.

@Sérgio

Exatamente como eu disse na <a href="http://blog.thiagobelem.net/php/buscando-a-latitude-e-

longitude-de-um-endereco-google-maps-php-parte-1/" title="Exibindo mapas no seu site â

Thiago, aproveitando que vc respondeu…

Estou tendo problemas para validar usuário e senha com PreparedStatement no PHP. Sou programador

Java e faço isso com facilidade lá, mas no PHP não funciona. Poderia me dar uma dica de como fazer isso

no modo OO e com o uso da Interface mysqli?

Sérgio Fernando


http://blog.thiagobelem.net/php/buscando-a-latitude-e-longitude-de-um-endereco-google-maps-php-parte-1/&quot


Documents

Exibindo mapas no seu site – Google Maps + PHP – Parte 2 _ Thiago Belem _ Blog