So konvertieren Sie eine Adresse in einen Google Maps-Link (NICHT MAP)

297

Nachdem ich eine Weile im Web gesucht (gegoogelt) habe, kann ich nichts finden, das eine Adresse wie die folgende hat:

1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003

und konvertiert es in einen anklickbaren Link:

http://maps.google.com/maps?f=q&source=s_q&hl=de&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,882147, -76,99017 & spn = 0,01064,0,027874 & z = 16 & iwloc = A.

jQuery oder PHP bevorzugt oder nur irgendwelche nützlichen Informationen dazu.

Phill Pafford
quelle

Antworten:

681

Wie wäre es damit?

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

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

Wenn Sie lat-long haben, verwenden Sie die folgende URL

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

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

AKTUALISIEREN

Ab dem Jahr 2017 hat Google nun eine offizielle Möglichkeit, plattformübergreifende Google Maps-URLs zu erstellen:

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

Sie können Links wie verwenden

https://www.google.com/maps/search/?api=1&query=1200%20Pennsylvania%20Ave%20SE%2C%20Washington%2C%20District%20of%20Columbia%2C%2020003 
Chris B.
quelle
7
Wie kann ich mit Längen- und Breitengrad erstellen?
Nadeem GC
4
Es scheint, dass diese Methode ein wenig schwierig ist, wenn der Nutzer das neue Google Maps verwendet. Um einen Link zu erstellen, der die Anzeige der resultierenden Seite im klassischen Modus erzwingt, hängen &output=classicSie einfach an Ihren Link an. Das Ganze würde also so aussehen:http://maps.google.com/?q=1200%20Pennsylvania%20Ave%20SE,%20Washington,%20District%20of%20Columbia,%2020003&output=classic
Matt
4
@ Matt Wie ist es Flakey? Außerdem bleibt output = classic nicht für immer bestehen, und was ist, wenn der Benutzer die neuen Karten bevorzugt?
Chris B
2
Gibt es eine Möglichkeit, den Drop-Pin über die URL auf der Karte abzurufen?
Floh
5
Dies funktioniert immer noch groß (dank @ChrisB!) , Aber es sieht aus wie Google Maps eigenes Format ist jetzt https://www.google.com/maps/place/1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003 ¶ Für einige Orte , die Sie mit der Verwendung von nur den Namen wegkommen können ... aber maps.google.com/?q=und www.google.com/maps/place/die gleichen Ergebnisse nicht unbedingt zurück: https://www.google.com/maps/place/White HouseERWEITERT https://www.google.com/maps/place/The+White+House,+1600+Pennsylvania+Ave+NW,+Washington,+DC+20500aber https://maps.google.com/?q=White Housegibt mir ein Antiquitätengeschäft in NC
Henry
67

Ich weiß, dass ich sehr spät zum Spiel komme, dachte aber, ich würde der Nachwelt zuliebe einen Beitrag leisten.

Ich habe eine kurze jQuery-Funktion geschrieben, mit der <address>Tags automatisch in Google Maps-Links umgewandelt werden.

Sehen Sie hier eine Demo.

$(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:

Ich bin auch auf eine Situation gestoßen, in der eingebettete Karten aus den Links generiert werden mussten, und obwohl ich dies mit zukünftigen Reisenden teilen würde:

Eine vollständige Demo anzeigen

$(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
quelle
@ Michael Jasper Danke für deinen Code ... es hat mir die Karte in Div gebracht ... aber mein Problem ist, dass Pin-Informationen Popup bekommen ... was ich nicht will. Kannst du mir also zeigen, wie ich die Pin-Info-Box nicht im Voraus öffnen kann?
Shwet
3
Bitte beachten Sie, dass das HTML5- <address>Tag nicht zur Angabe der Postanschrift bestimmt ist, sondern Kontaktinformationen zum Inhalt (normalerweise der Autor). developer.mozilla.org/en-US/docs/Web/HTML/Element/address
Neograph734
Gute Antwort! Danke für das Teilen. Ich bin mir nicht sicher, welche Konsequenzen das hat, aber es hat auch ohne funktioniert encodeURIComponent().
moreirapontocom
12

Februar 2016:

Ich musste dies basierend auf vom Client eingegebenen Datenbankwerten und ohne Lat / Long-Generator tun. Google mag heutzutage Lat / Long sehr. Folgendes habe ich gelernt:

1 Der Anfang des Links sieht folgendermaßen aus: https://www.google.com/maps/place/

2 Dann geben Sie Ihre Adresse ein:

  • Verwenden Sie ein + anstelle eines Leerzeichens.
  • Setzen Sie ein Komma vor und hinter die Stadt.
  • Geben Sie die Post / Postleitzahl und die Provinz / das Bundesland an.
  • Ersetzen Sie ein # durch nichts.
  • Ersetzen Sie ++ oder ++++ durch single +

3 Geben Sie die Adresse nach dem Ort / ein

4 Setzen Sie am Ende einen Schrägstrich.

HINWEIS: Der Schrägstrich am Ende war wichtig. Nachdem der Nutzer auf den Link geklickt hat, hängt Google mehr an die URL an und tut dies nach diesem Schrägstrich.

Arbeitsbeispiel für diese Frage:

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

Ich hoffe das hilft.

Colin P.
quelle
Während das Beispiel funktioniert, konnte ich dies für eine deutsche Adresse nicht neu erstellen. Am Ende habe ich die Antwort von Chris B implementiert (... /? Q = term).
gl03
Zum Glück funktioniert das jetzt auch für deutsche Adressen. Siehe: google.com/maps/place/…
Yannick Schuchmann
2

In Anlehnung an die Lösungen von Michael Jasper und Jon Hendershot biete ich Folgendes an:

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

Diese Lösung bietet die folgenden Vorteile gegenüber zuvor angebotenen Lösungen:

  • HTML-Tags (z. B. <br>Tags) werden nicht entfernt <address>, sodass die Formatierung erhalten bleibt
  • Die URL wird ordnungsgemäß codiert
  • Es werden zusätzliche Leerzeichen gequetscht, sodass die generierte URL nach dem Codieren kürzer und sauberer und für den Menschen lesbar ist
  • Es erzeugt ein gültiges Markup (die Lösung von Mr.Hendershot erstellt ein <a><address></address></a>ungültiges Markup, da Elemente auf Blockebene, wie sie <address>in Inline-Elementen wie z <a>.

Vorsichtsmaßnahme : Wenn Ihr <address>Tag Elemente auf Blockebene wie <p>oder enthält <div>, wird dieser JavaScript-Code in einem ungültigen Markup erzeugt (da das <a>Tag diese Elemente auf Blockebene enthält). Aber wenn Sie nur solche Sachen machen:

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

Dann wird es gut funktionieren.

7over21
quelle
Ich habe Ihre Lösung in meinem Projekt verwendet, indem ich Ihren Code einfach an meine Bedürfnisse angepasst habe. Es funktioniert jetzt.
Mycodingproject
2

Folgendes habe ich in einem der Google Maps-Artikel gefunden:

  1. Öffnen Sie Google Maps .
  2. Stellen Sie sicher, dass die Karte oder das Street View-Bild, das Sie einbetten möchten, auf der Karte angezeigt wird.
  3. Klicken Sie oben links auf das Hauptmenü ☰.
  4. Klicken Sie auf Freigeben oder Karte einbetten .
  5. Wählen Sie oben im angezeigten Feld die Registerkarte Karte einbetten.
  6. Wählen Sie die gewünschte Größe, kopieren Sie den Code und fügen Sie ihn in den Quellcode Ihrer Website oder Ihres Blogs ein.

Hinweis : Wenn Sie Karten im Lite-Modus verwenden , können Sie keine Karte einbetten. Beachten Sie, dass Verkehrsinformationen und einige andere Karteninformationen möglicherweise nicht in der eingebetteten Karte verfügbar sind.

Geben Sie hier die Bildbeschreibung ein

PCM
quelle
Für mich geht das. Kopieren Sie diesen Einbettungscode und fügen Sie ihn in Ihre Website ein.
Kabir Hossain
1

Auf http://www.labnol.org/internet/tools/short-urls-for-google-maps/6604/ wird eine kurze URL angezeigt, die ziemlich gut funktioniert

Google Maps-URLs sind ziemlich unhandlich, insbesondere beim Senden über IM, Tweet oder E-Mail. Mit MapOf.it können Sie schnell auf Google Maps verlinken, indem Sie einfach die Adresse des Standorts als Suchparameter angeben.

http://mapof.it/

Ich habe es für einige Anwendungen verwendet, die ich entworfen habe, und es hat wie ein Zauber funktioniert.

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

die Kodierung ur conver und fügt alle zusätzlichen Elemente wie für Leerzeichen und alle hinzu. So können Sie einfach ebenen Textcode aus der Datenbank abrufen und verwenden, ohne sich um die hinzuzufügenden Sonderzeichen kümmern zu müssen

dhpratik
quelle
1
encodeURIComponent ist Javascript. Sie sollten Urlencode ($ address) verwenden.
Ximi
1

Der beste Weg ist, diese Zeile zu verwenden:

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"

Denken Sie daran, die erste und zweite Adresse bei Bedarf zu ersetzen.

Sie können sich ein Arbeitsprobe ansehen

Eugene Bosikov
quelle
1

Ich hatte ein ähnliches Problem, bei dem ich dies für jede Adresse auf der Site ausführen musste (jede in ein Adress-Tag eingeschlossen). Dieses Stück jQuery hat bei mir funktioniert. Es greift nach jedem <address>Tag und verpackt es in einen Google Maps-Link mit der Adresse, die das Tag enthält!

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

}); 

Arbeitsbeispiel -> https://jsfiddle.net/f3kx6mzz/1/

Jon Hendershot
quelle
2
Anstatt manuell zu versuchen, eine URL aus der Zeichenfolge zu entfernen, können Sie encodeURIComponentstattdessen verwenden.
Samuel
0

Jeder, der die Adresse manuell per URL-Code versehen möchte: http://code.google.com/apis/maps/documentation/webservices/index.html#BuildingURLs

Damit können Sie bestimmte Regeln erstellen, die den GM-Standards entsprechen.

Ed Meacham
quelle
Dies führt nun leider zu einem 404.
Darren Monahan
1
Es tut uns leid. Dieser Kommentar ist sehr alt ... Ich bezweifle, dass die Version der API, die in dieser Frage verwendet wurde, noch vorhanden ist, aber hier ist der Link, auf den verwiesen wird: web.archive.org/web/20110420023220/https:// code.google.com/apis/…
Ed Meacham
0

Die C # Replace-Methode funktioniert normalerweise für mich:

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

Ich habe das gerade gefunden und teile es gerne ..

  1. Suchen Sie Ihre Adresse unter maps.google.com
  2. Klicken Sie unten rechts auf das Zahnradsymbol
  3. Klicken Sie auf "Freigegebene oder eingebettete Karte".
  4. Klicken Sie auf das Kontrollkästchen für die kurze URL und fügen Sie das Ergebnis in href ein.
Unbekanntes Ich
quelle