Come convertire un indirizzo in un link di Google Maps (NON MAP)


297

Dopo aver cercato (googling) sul web per un po ', non riesco a trovare nulla che abbia un indirizzo come:

1200 Pennsylvania Ave SE, Washington, Distretto di Columbia, 20003

e lo converte in un link cliccabile:

http://maps.google.com/maps?f=q&source=s_q&hl=en&q=1200+Pennsylvania+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,882,147 mila, -76,99017 & spn = 0.01064,0.027874 & z = 16 & iwloc = A

jQuery o PHP hanno preferito o semplicemente qualsiasi informazione utile al riguardo.

Risposte:


681

Cosa ne pensi di questo?

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

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

Se hai lat-long allora usa l'URL sotto

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

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

AGGIORNARE

A partire dall'anno 2017, Google ha ora un modo ufficiale per creare URL di Google Maps multipiattaforma:

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

Puoi usare link come

https://www.google.com/maps/search/?api=1&query=1200%20Pennsylvania%20Ave%20SE%2C%20Washington%2C%20District%20of%20Columbia%2C%2020003 

7
Come posso creare con Latitude e Longitude?
nadeem gc,

4
Sembra che questo metodo sia un po 'debole se l'utente utilizza il nuovo Google Maps. Per creare un collegamento che impone la visualizzazione della pagina risultante in modalità classica, basta aggiungere &output=classical collegamento. Quindi l'intera cosa sarebbe simile a questa:http://maps.google.com/?q=1200%20Pennsylvania%20Ave%20SE,%20Washington,%20District%20of%20Columbia,%2020003&output=classic
Matt

4
@Matt Come va? Inoltre, output = classic non rimarrà per sempre, e se l'utente preferisse le nuove mappe?
Chris B,

2
Un modo per ottenere il segnaposto sulla mappa tramite l'URL?
Flea,

5
Funziona ancora alla grande (grazie a @ChrisB!) Ma sembra che il formato di Google Maps sia ora https://www.google.com/maps/place/1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003 ¶ Per alcune località puoi cavartela usando solo il nome ... ma maps.google.com/?q=e www.google.com/maps/place/non restituirà necessariamente gli stessi risultati: si https://www.google.com/maps/place/White Houseespande in https://www.google.com/maps/place/The+White+House,+1600+Pennsylvania+Ave+NW,+Washington,+DC+20500ma https://maps.google.com/?q=White Housemi dà un negozio di antiquariato in NC
Henry

67

So di essere in ritardo al gioco, ma ho pensato di contribuire per il bene dei posteri.

Ho scritto una breve funzione jQuery che trasformerà automaticamente qualsiasi <address>tag in collegamenti a Google Maps.

Guarda una demo qui.

$(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);
   });
});

Bonus:

Mi sono anche imbattuto in una situazione che richiedeva la generazione di mappe incorporate dai collegamenti e, sebbene condividessi con i futuri viaggiatori:

Visualizza una demo 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 grazie per il tuo codice ... mi ha procurato la mappa in div ... ma il mio problema è che le informazioni sul pin sono popup ... che non voglio. quindi puoi guidarmi su come non aprire la casella informazioni pin.?????.thnx in anticipo ...
Shwet,

3
Si noti che il <address>tag HTML5 non è destinato a fornire l'indirizzo postale, ma a fornire informazioni di contatto relative al contenuto (di solito l'autore). developer.mozilla.org/en-US/docs/Web/HTML/Element/address
Neograph734

Bella risposta! Grazie per la condivisione. Non sono sicuro delle conseguenze a riguardo, ma ha funzionato anche senza encodeURIComponent().
moreirapontocom,

12

Febbraio 2016:

Ho dovuto farlo in base ai valori del database immessi dal client e senza un generatore lat / long. In questi giorni a Google piace molto lat / long. Ecco cosa ho imparato:

1 L'inizio del collegamento è simile al seguente: https://www.google.com/maps/place/

2 Quindi inserisci il tuo indirizzo:

  • Usa un + invece di qualsiasi spazio.
  • Metti una virgola, davanti e dietro la città.
  • Includi il codice postale / zip e la provincia / lo stato.
  • Sostituisci qualsiasi # con niente.
  • Sostituisci qualsiasi ++ o ++++ con single +

3 Inserisci l'indirizzo dopo il luogo /

4 Quindi metti una barra alla fine.

NOTA: la barra alla fine era importante. Dopo che l'utente ha fatto clic sul collegamento, Google procede e aggiunge di più all'URL e lo fa dopo questa barra.

Esempio funzionante per questa domanda:

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

Spero che aiuti.


mentre l'esempio funziona, non sono riuscito a ricrearlo per un indirizzo tedesco. Ho finito per implementare la risposta di Chris B (... /? Q = termine).
gl03,

Per fortuna ora funziona anche per indirizzi tedeschi. Vedi: google.com/maps/place/…
Yannick Schuchmann,



2

Prendendo in prestito dalle soluzioni di Michael Jasper e Jon Hendershot, offro quanto segue:

$('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);
});

Questa soluzione offre i seguenti vantaggi rispetto alle soluzioni precedentemente offerte:

  • Non rimuoverà i tag HTML (ad esempio i <br>tag) all'interno <address>, quindi la formattazione viene preservata
  • Codifica correttamente l'URL
  • Comprime gli spazi extra in modo che l'URL generato sia più corto, pulito e leggibile dall'uomo dopo la codifica
  • Produce un markup valido (la soluzione di Mr.Hendershot crea un valore <a><address></address></a>non valido perché elementi a livello di blocco come <address>non sono consentiti all'interno di elementi inline come <a>.

Avvertenza : se il <address>tag contiene elementi a livello di blocco come <p>o <div>, questo codice JavaScript produrrà un markup non valido (poiché il <a>tag conterrà quegli elementi a livello di blocco). Ma se stai facendo cose del genere:

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

Quindi funzionerà bene.


Ho usato la tua soluzione nel mio progetto semplicemente modificando il codice in base alle mie esigenze. Funziona per ora.
Progetto Mycoding il

2

Questo è quello che ho trovato da uno degli articoli di Google Maps:

  1. Apri Google Maps .
  2. Assicurati che la mappa o l'immagine di Street View che desideri incorporare vengano visualizzate sulla mappa.
  3. Nell'angolo in alto a sinistra, fai clic sul menu principale ☰.
  4. Fai clic su Condividi o incorpora mappa .
  5. Nella parte superiore della casella visualizzata, seleziona la scheda Incorpora mappa .
  6. Scegli la dimensione desiderata, quindi copia il codice e incollalo nel codice sorgente del tuo sito Web o blog.

Nota : se si utilizza Maps in modalità Lite , non sarà possibile incorporare una mappa. Tieni presente che le informazioni sul traffico e alcune altre informazioni di Maps potrebbero non essere disponibili nella mappa incorporata.

inserisci qui la descrizione dell'immagine


Per me funziona. Copia questo codice di incorporamento e incollalo sul tuo sito web.
Kabir Hossain,

1

Su http://www.labnol.org/internet/tools/short-urls-for-google-maps/6604/ mostrano un breve URL che funziona abbastanza bene

Gli URL di Google Maps sono piuttosto ingombranti soprattutto quando si inviano tramite IM, tweet o e-mail. MapOf.it ti offre un modo rapido per collegarti a Google Maps semplicemente specificando l'indirizzo della posizione come parametro di ricerca.

http://mapof.it/

L'ho usato per alcune applicazioni che ho progettato e ha funzionato come un fascino.


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

la codifica ur conver e aggiunge tutti gli elementi extra come per gli spazi e tutti. così puoi facilmente recuperare il codice di testo piano da db e usarlo senza preoccuparti dei caratteri speciali da aggiungere


1
encodeURIComponent è javascript, dovresti usare urlencode ($ address);
ximi,

1

Il modo migliore è usare questa linea:

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"

Ricorda di sostituire il primo e il secondo indirizzo quando necessario.

Puoi guardare l'esempio di lavoro


1

Ho avuto un problema simile in cui dovevo realizzare questo per ogni indirizzo sul sito (ognuno racchiuso in un tag di indirizzo). Questo pezzo di jQuery ha funzionato per me. Afferrerà ogni <address>tag e lo avvolgerà in un link di Google Maps con l'indirizzo che contiene il tag!

$("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>');

}); 

Esempio di lavoro -> https://jsfiddle.net/f3kx6mzz/1/


2
Invece di provare manualmente a URL di sfuggire alla stringa, è possibile utilizzare encodeURIComponentinvece.
Samuel,

0

Inoltre, chiunque desideri URLENCODE manualmente l'indirizzo: http://code.google.com/apis/maps/documentation/webservices/index.html#BuildingURLs

Puoi usarlo per creare regole specifiche che soddisfino gli standard GM.


Questo ora porta a un 404, sfortunatamente.
Darren Monahan,

1
Scusate. Questo commento è molto vecchio ... Dubito che la versione dell'API utilizzata in questa domanda sia ancora in giro, ma ecco a cosa si riferiva il link: web.archive.org/web/20110420023220/https:// code.google.com/apis/…
Ed Meacham

0

Il metodo Sostituisci C # di solito funziona per me:

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

0

Ho appena trovato questo e mi piace condividere ..

  1. cerca il tuo indirizzo su maps.google.com
  2. fai clic sull'icona a forma di ingranaggio in basso a destra
  3. fai clic su "mappa condivisa o incorporata"
  4. fai clic sulla casella di controllo URL breve e incolla il risultato in href ..
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.