Como converter um endereço em um link do Google Maps (NÃO MAPA)

297

Depois de procurar (pesquisar no Google) na web por um tempo, não consigo encontrar nada que exija um endereço como:

1200 Pennsylvania Ave SE, Washington, Distrito de Columbia, 20003

e o converte em um link clicável:

http://maps.google.com/maps?f=q&source=s_q&hl=pt_BR&q=1200+ Pensilvânia+Ave+SE,+Washington,+District+of+Columbia,+20003&sll=37.0625,-95.677068&sspn=44.118686,114.169922 & ie = UTF8 & cd = 1 & geocode = FT5MUQIdIDlp-w & split = 0 & ll = 38.882147, -76.99017 & spn = 0.01064,0.027874 & z = 16 & iwloc = A

jQuery ou PHP preferido ou apenas qualquer informação útil sobre isso.

Phill Pafford
fonte

Respostas:

681

Que tal agora?

https://maps.google.com/?q=1200 Pennsylvania Ave SE, Washington, Distrito de Columbia, 20003

https://maps.google.com/?q=term

Se você tem um longo período, use o URL abaixo

https://maps.google.com/?ll=latitude,longitude

Exemplo: maps.google.com/?ll=38.882147,-76.99017

ATUALIZAR

A partir do ano de 2017, o Google agora tem uma maneira oficial de criar URLs do Google Maps para várias plataformas:

https://developers.google.com/maps/documentation/urls/guide

Você pode usar links como

https://www.google.com/maps/search/?api=1&query=1200%20Pennsylvania%20Ave%20SE%2C%20Washington%2C%20District%20of%20Columbia%2C%2020003 
Chris B
fonte
7
Como posso criar com Latitude e Longitude?
Nadeem gc 06/07/2013
4
Parece que esse método é um pouco ruim se o usuário estiver usando o novo Google Maps. Para criar um link que força a página resultante a aparecer no modo clássico, basta anexar &output=classicao seu link. Portanto, a coisa toda ficaria assim:http://maps.google.com/?q=1200%20Pennsylvania%20Ave%20SE,%20Washington,%20District%20of%20Columbia,%2020003&output=classic
Matt
4
@ Matt Como está flakey? Além disso, output = classic não ficará para sempre, e se o usuário preferir os novos mapas?
Chris B
2
Alguma maneira de colocar o alfinete no mapa via URL?
Flea
5
Isso ainda funciona muito bem (graças @ChrisB!), Mas parece que próprio formato do Google Maps é agora https://www.google.com/maps/place/1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003 ¶ Para alguns locais você pode ir longe com o uso de apenas o nome ... mas maps.google.com/?q=e www.google.com/maps/place/não necessariamente retornar os mesmos resultados: https://www.google.com/maps/place/White Houseexpande-se para https://www.google.com/maps/place/The+White+House,+1600+Pennsylvania+Ave+NW,+Washington,+DC+20500, mas https://maps.google.com/?q=White Housedá-me uma loja de antiguidades em NC
henry
67

Sei que estou muito atrasado para o jogo, mas pensei em contribuir para a posteridade.

Eu escrevi uma breve função jQuery que transformará automaticamente as <address>tags em links do Google Maps.

Veja uma demonstração aqui.

$(document).ready(function () {
   //Convert address tags to google map links - Michael Jasper 2012
   $('address').each(function () {
      var link = "<a href='http://maps.google.com/maps?q=" + encodeURIComponent( $(this).text() ) + "' target='_blank'>" + $(this).text() + "</a>";
      $(this).html(link);
   });
});

Bônus:

Também me deparei com uma situação que pedia a geração de mapas incorporados a partir dos links, e embora eu compartilhasse com futuros viajantes:

Veja uma demonstração completa

$(document).ready(function(){
    $("address").each(function(){                         
        var embed ="<iframe width='425' height='350' frameborder='0' scrolling='no'  marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+ encodeURIComponent( $(this).text() ) +"&amp;output=embed'></iframe>";
        $(this).html(embed);             
    });
});
Michael Jasper
fonte
@ Michael Jasper thanx para o código ur ... me pegou o mapa em div ... mas o meu problema é que as informações dos pinos são pop-up ... o que eu não quero. por isso pode guiar u me como não aberto pin informações box.?????.thnx antecipadamente ...
Shwet
3
Esteja ciente de que a <address>tag HTML5 não se destina a fornecer endereço postal, mas a fornecer informações de contato relacionadas ao conteúdo (geralmente o autor). developer.mozilla.org/pt-BR/docs/Web/HTML/Element/address
Neograph734
Ótima resposta! Obrigado por compartilhar. Não tenho certeza das consequências, mas funcionou mesmo sem o encodeURIComponent().
moreirapontocom
12

Fevereiro de 2016:

Eu precisava fazer isso com base nos valores do banco de dados inseridos pelo cliente e sem um gerador de lat / long. Atualmente, o Google gosta muito de lat / long. Aqui está o que eu aprendi:

1 O início do link é semelhante a: https://www.google.com/maps/place/

2 Então você coloca seu endereço:

  • Use um + em vez de qualquer espaço.
  • Coloque uma vírgula, na frente e atrás da cidade.
  • Inclua o postal / zip e a província / estado.
  • Substitua qualquer # por nada.
  • Substitua qualquer ++ ou ++++ por um único +

3 Coloque o endereço após o local /

4 Em seguida, coloque uma barra no final.

NOTA: A barra no final foi importante. Depois que o usuário clica no link, o Google segue em frente e anexa mais ao URL e o faz após essa barra.

Exemplo de trabalho para esta pergunta:

https://www.google.ca/maps/place/1200+Penn Pennsylvania+Ave+SE,+Washington,+DC+20003/

Espero que ajude.

Colin P
fonte
enquanto o exemplo funciona, não foi possível recriar isso para um endereço alemão. Acabei implementando a resposta de Chris B (... /? Q = term).
gl03
Felizmente, agora isso também está funcionando para endereços em alemão. Veja: google.com/maps/place/…
Yannick Schuchmann 29/11
2

Tomando emprestado as soluções de Michael Jasper e Jon Hendershot, ofereço o seguinte:

$('address').each(function() {
    var text = $(this).text();

    var q    = $.trim(text).replace(/\r?\n/, ',').replace(/\s+/g, ' ');
    var link = '<a href="http://maps.google.com/maps?q=' + encodeURIComponent(q) + '" target="_blank"></a>';

    return $(this).wrapInner(link);
});

Esta solução oferece os seguintes benefícios sobre as soluções oferecidas anteriormente:

  • Ele não removerá tags HTML (por exemplo, <br>tags) <address>, portanto, a formatação é preservada
  • Codifica corretamente o URL
  • Ele comprime espaços extras para que o URL gerado seja mais curto, limpo e legível por humanos após a codificação
  • Produz uma marcação válida (a solução do Sr.Hendershot cria <a><address></address></a>que é inválida porque elementos no nível do bloco, como <address>não são permitidos em elementos inline, como <a>.

Advertência : se sua <address>tag contiver elementos em nível de bloco como <p>or <div>, esse código JavaScript produzirá uma marcação inválida (porque a <a>tag conterá esses elementos em nível de bloco). Mas se você está apenas fazendo coisas assim:

<address>
  The White House
  <br>
  1600 Pennsylvania Ave NW
  <br>
  Washington, D.C.  20500
</address>

Então vai funcionar muito bem.

7over21
fonte
Usei sua solução em meu projeto, apenas ajustando seu código às minhas necessidades. Funciona por enquanto.
Mycodingproject
2

Foi o que descobri em um dos artigos do Google Maps:

  1. Abra o Google Maps .
  2. Verifique se o mapa ou a imagem do Street View que você deseja incorporar aparece no mapa.
  3. No canto superior esquerdo, clique no menu principal ☰.
  4. Clique em Compartilhar ou incorporar mapa .
  5. Na parte superior da caixa exibida, escolha a guia Incorporar mapa .
  6. Escolha o tamanho desejado, copie o código e cole-o no código-fonte do seu site ou blog.

Nota : se você estiver usando o Maps no modo Lite , não poderá incorporar um mapa. Lembre-se de que as informações de trânsito e outras informações do Google Maps podem não estar disponíveis no mapa incorporado.

insira a descrição da imagem aqui

PCM
fonte
Funciona para mim. Copie este código de incorporação e cole no seu site.
Kabir Hossain
1

Em http://www.labnol.org/internet/tools/short-urls-for-google-maps/6604/, eles mostram um URL curto que funciona muito bem

Os URLs do Google Maps são bastante difíceis de usar, especialmente ao enviar mensagens instantâneas, tweets ou e-mails. O MapOf.it fornece uma maneira rápida de vincular ao Google Maps, simplesmente especificando o endereço do local como um parâmetro de pesquisa.

http://mapof.it/

Usei-o para algumas aplicações que projetei e funcionou como um encanto.

Web personalizada
fonte
1
http://maps.google.com/maps?q=<?php echo urlencode($address); ?> 

a codificação ur conver e adiciona todos os elementos extras, como espaços e tudo. para que você possa buscar facilmente o código de texto plano do db e usá-lo sem se preocupar com os caracteres especiais a serem adicionados

dhpratik
fonte
1
encodeURIComponent é javascript, você deve usar urlencode ($ address);
ximi
1

A melhor maneira é usar esta linha:

var mapUrl = "http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=16900+North+Bay+Road,+Sunny+Isles+Beach,+FL+33160&amp;aq=0&amp;sll=37.0625,-95.677068&amp;sspn=61.282355,146.513672&amp;ie=UTF8&amp;hq=&amp;hnear=16900+North+Bay+Road,+Sunny+Isles+Beach,+FL+33160&amp;spn=0.01628,0.025663&amp;z=14&amp;iwloc=A&amp;output=embed"

Lembre-se de substituir o primeiro e o segundo endereços quando necessário.

Você pode olhar para a amostra de trabalho

Eugene Bosikov
fonte
1

Eu tive um problema semelhante em que precisava fazer isso em todos os endereços do site (cada um envolvido em uma etiqueta de endereço). Este pouco de jQuery funcionou para mim. Ele pega cada <address>tag e o enrola em um link do google maps com o endereço que a tag contém!

$("address").each(function(){

    var address = $(this).text().replace(/\,/g, '');
    var url = address.replace(/\ /g, '%20');

    $(this).wrap('<a href="http://maps.google.com/maps?q=' + url +'"></a>');

}); 

Exemplo de trabalho -> https://jsfiddle.net/f3kx6mzz/1/

Jon Hendershot
fonte
2
Em vez de tentar manualmente escapar da string pela URL, você pode usar encodeURIComponent.
Samuel
0

Além disso, qualquer pessoa que queira manualmente URLENCODE o endereço: http://code.google.com/apis/maps/documentation/webservices/index.html#BuildingURLs

Você pode usar isso para criar regras específicas que atendam aos padrões da GM.

Ed Meacham
fonte
Isso agora leva a um 404, infelizmente.
Darren Monahan
1
Desculpe. Esse comentário é muito antigo ... Duvido que a versão da API que estava sendo usada nesta pergunta ainda esteja presente, mas aqui está o link usado para fazer referência: web.archive.org/web/20110420023220/https:// code.google.com/apis/…
Ed Meacham
0

O método C # Replace geralmente funciona para mim:

foo = "http://maps.google.com/?q=" + address.Text.Replace(" ","+");
Mr.Sprung
fonte
0

Acabei de encontrar isso e gostaria de compartilhar ..

  1. pesquise seu endereço em maps.google.com
  2. clique no ícone de roda dentada no canto inferior direito
  3. clique em "mapa compartilhado ou incorporado"
  4. clique na caixa de seleção do URL curto e cole o resultado em href.
Unknown-Me
fonte