Jak przekonwertować adres na link do Map Google (NOT MAP)

297

Po dłuższym przeszukaniu (Googling) w Internecie nie mogę znaleźć niczego, co wymagałoby adresu:

1200 Pennsylvania Ave SE, Waszyngton, Dystrykt Kolumbii, 20003

i konwertuje go na klikalny link:

http://maps.google.com/maps?f=q&source=s_q&hl=pl&q=1200+Pensylwania+Ave+SE,+Washington,+District+of+Columbia,+20003&sll=37.0625,-95.677068&sspn=44.118686,114.169922 i ie = UTF8 i cd = 1 i geokod = FT5MUQIdIDlp-w i split = 0 i II = 38,882147, -76,99017 i spn = 0,01064,0,027874 i z = 16 i iwloc = A

Preferowane jQuery lub PHP lub po prostu przydatne informacje na ten temat.

Phill Pafford
źródło

Odpowiedzi:

681

Co powiesz na to?

https://maps.google.com/?q=1200 Pennsylvania Ave SE, Waszyngton, Dystrykt Kolumbii, 20003

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

Jeśli masz długość, użyj poniższego adresu URL

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

Przykład: maps.google.com/?ll=38.882147,-76.99017

AKTUALIZACJA

Od 2017 roku Google ma teraz oficjalny sposób tworzenia wieloplatformowych adresów URL Map Google:

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

Możesz użyć linków takich jak

https://www.google.com/maps/search/?api=1&query=1200%20Pennsylvania%20Ave%20SE%2C%20Washington%2C%20District%20of%20Columbia%2C%2020003 
Chris B.
źródło
7
Jak mogę tworzyć za pomocą szerokości i długości geograficznej?
nadeem gc
4
Wygląda na to, że ta metoda jest nieco płatkowa, jeśli użytkownik korzysta z nowych Map Google. Aby utworzyć link, który wymusza wyświetlenie strony wynikowej w trybie klasycznym, wystarczy dołączyć &output=classicdo linku. Cała sprawa wyglądałaby tak:http://maps.google.com/?q=1200%20Pennsylvania%20Ave%20SE,%20Washington,%20District%20of%20Columbia,%2020003&output=classic
Mat.
4
@Matt Jak to jest płatkowe? Ponadto output = classic nie pozostanie na zawsze, a jeśli użytkownik woli nowe mapy?
Chris B
2
W jakikolwiek sposób uzyskać pinezkę na mapie za pomocą adresu URL?
Flea
5
To nadal działa świetnie (dzięki @ChrisB!), Ale wygląda na to własny formacie Google Maps jest teraz https://www.google.com/maps/place/1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003 ¶ W niektórych miejscach można uciec z użyciem tylko nazwy ... ale maps.google.com/?q=i www.google.com/maps/place/niekoniecznie takie same wyniki: https://www.google.com/maps/place/White HouseInterpretowany https://www.google.com/maps/place/The+White+House,+1600+Pennsylvania+Ave+NW,+Washington,+DC+20500ale https://maps.google.com/?q=White Housedaje mi sklep z antykami w NC
Henry
67

Wiem, że spóźniłem się do gry, ale pomyślałem, że będę przyczyniał się dla potomności.

Napisałem krótką funkcję jQuery, która automatycznie zamieni dowolne <address>tagi w linki map Google.

Zobacz demo tutaj.

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

Premia:

Zetknąłem się również z sytuacją, która wymagała wygenerowania osadzonych map z linków i chociaż chciałbym podzielić się z przyszłymi podróżnikami:

Zobacz pełną wersję demo

$(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
źródło
@Michael Jasper dzięki za twój kod ... dostałam mapę w div ... ale moim problemem jest to, że informacje o pinach są wyskakujące ... czego nie chcę. więc możesz mi pomóc, jak nie otwierać skrzynki z informacjami o pinach ??????.thnx z góry ...
Shwet
3
Należy pamiętać, że <address>tag HTML5 nie jest przeznaczony do podawania adresu pocztowego, ale do dostarczania informacji kontaktowych związanych z treścią (zazwyczaj autor). developer.mozilla.org/en-US/docs/Web/HTML/Element/address
Neograph734
Świetna odpowiedź! Dzięki za udostępnienie. Nie jestem pewien konsekwencji, ale zadziałało nawet bez encodeURIComponent().
moreirapontocom,
12

Luty 2016:

Musiałem to zrobić w oparciu o wartości bazy danych wprowadzone przez klienta i bez generatora lat / long. Google naprawdę lubi lat / long w tych dniach. Oto czego się nauczyłem:

1 Początek linku wygląda następująco: https://www.google.com/maps/place/

2 Następnie podajesz swój adres:

  • Użyj + zamiast spacji.
  • Umieść przecinek przed i za miastem.
  • Dołącz pocztę / kod pocztowy i prowincję / stan.
  • Zamień dowolny # na nic.
  • Zamień dowolny ++ lub ++++ na pojedynczy +

3 Wpisz adres po miejscu /

4 Następnie umieść kreskę na końcu.

UWAGA: Cięcie na końcu było ważne. Gdy użytkownik kliknie link, Google dodaje i dodaje więcej do adresu URL, a następnie robi to po tym ukośniku.

Przykład roboczy dla tego pytania:

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

Mam nadzieję że to pomogło.

Colin P.
źródło
chociaż przykład działa, nie byłem w stanie odtworzyć tego dla adresu niemieckiego. W końcu wdrożyłem odpowiedź Chrisa B. (... /? Q = term).
gl03
Na szczęście teraz działa to również w przypadku adresów niemieckich. Zobacz: google.com/maps/place/…
Yannick Schuchmann
2

Pożyczając od rozwiązań Michaela Jaspera i Jona Hendershota, oferuję:

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

To rozwiązanie oferuje następujące korzyści w stosunku do wcześniej oferowanych rozwiązań:

  • Nie usunie znaczników HTML (np. <br>Znaczników) <address>, więc formatowanie zostanie zachowane
  • Prawidłowo koduje adres URL
  • Zgniata dodatkowe spacje, aby wygenerowany adres URL był krótszy, czystszy i czytelny dla człowieka po kodowaniu
  • Generuje poprawny znacznik (rozwiązanie Mr.Hendershot tworzy, <a><address></address></a>co jest nieprawidłowe, ponieważ elementy na poziomie bloku, takie jak <address>nie są dozwolone w elementach wbudowanych, takich jak <a>.

Uwaga : jeśli Twój <address>tag zawiera elementy na poziomie bloku, takie jak <p>lub <div>, wówczas kod JavaScript wygeneruje nieprawidłowy znacznik (ponieważ <a>znacznik będzie zawierał te elementy na poziomie bloku). Ale jeśli robisz takie rzeczy:

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

Wtedy będzie dobrze.

7over21
źródło
Użyłem twojego rozwiązania w moim projekcie, po prostu dostosowując kod do moich potrzeb. Na razie działa.
Mycodingproject
2

Oto, co znalazłem w jednym z artykułów w Mapach Google:

  1. Otwórz Mapy Google .
  2. Upewnij się, że mapa lub zdjęcie Street View, które chcesz osadzić, pojawi się na mapie.
  3. W lewym górnym rogu kliknij menu główne ☰.
  4. Kliknij Udostępnij lub umieść mapę .
  5. W górnej części wyświetlonego pola wybierz kartę Osadź mapę .
  6. Wybierz odpowiedni rozmiar, a następnie skopiuj kod i wklej go do kodu źródłowego swojej witryny lub bloga.

Uwaga : jeśli korzystasz z Map w trybie Lite , nie będziesz w stanie osadzić mapy. Pamiętaj, że informacje o ruchu i niektóre inne informacje na Mapach mogą nie być dostępne na wbudowanej mapie.

wprowadź opis zdjęcia tutaj

PCM
źródło
Mi to pasuje. Skopiuj ten kod do osadzenia i wklej na swoją stronę.
Kabir Hossain
1

Na http://www.labnol.org/internet/tools/short-urls-for-google-maps/6604/ pokazują krótki URL, który działa całkiem dobrze

Adresy URL Map Google są dość nieporęczne, szczególnie podczas wysyłania wiadomości błyskawicznych, tweetów lub e-maili. MapOf.it zapewnia szybki sposób na połączenie z Google Maps, po prostu podając adres lokalizacji jako parametr wyszukiwania.

http://mapof.it/

Użyłem go do kilku zaprojektowanych przeze mnie aplikacji i działało to jak urok.

Niestandardowa sieć
źródło
1
http://maps.google.com/maps?q=<?php echo urlencode($address); ?> 

kodowanie ur konwersji i dodaje wszystkie dodatkowe elementy, takie jak dla spacji i wszystkich. dzięki czemu można łatwo pobrać kod tekstowy samolotu z db i używać go bez obawy o znaki specjalne, które należy dodać

dhpratik
źródło
1
encodeURIComponent jest javascript, powinieneś używać urlencode ($ adres);
ximi
1

Najlepszym sposobem jest użycie tej linii:

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"

Pamiętaj, aby w razie potrzeby wymienić pierwszy i drugi adres.

Możesz spojrzeć na próbkę pracy

Eugene Bosikov
źródło
1

Miałem podobny problem, w którym musiałem to zrobić dla każdego adresu w witrynie (każdy owinięty tagiem adresu). Ta część jQuery działała dla mnie. Pobiera każdy <address>tag i zawija go w linku do map Google z adresem, który zawiera 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>');

}); 

Przykład roboczy -> https://jsfiddle.net/f3kx6mzz/1/

Jon Hendershot
źródło
2
Zamiast ręcznie próbować uchwycić ciąg znaków przez URL, możesz encodeURIComponentzamiast tego użyć .
Samuel
0

Ponadto każdy, kto chce ręcznie URLENCODE adres: http://code.google.com/apis/maps/documentation/webservices/index.html#BuildingURLs

Możesz go użyć do stworzenia określonych reguł, które spełniają standardy GM.

Ed Meacham
źródło
Niestety obecnie prowadzi to do 404.
Darren Monahan
1
Przepraszam. Ten komentarz jest bardzo stary ... Wątpię, czy wersja interfejsu API, która była używana w tym pytaniu, jest nadal dostępna, ale tutaj znajduje się odnośnik do tego: web.archive.org/web/20110420023220/https:// code.google.com/apis/…
Ed Meacham
0

Metoda C # Replace zwykle działa dla mnie:

foo = "http://maps.google.com/?q=" + address.Text.Replace(" ","+");
Mr.Sprung
źródło
0

Właśnie to znalazłem i lubię się dzielić ..

  1. wyszukaj swój adres na maps.google.com
  2. kliknij ikonę koła zębatego w prawym dolnym rogu
  3. kliknij „udostępnioną lub osadzoną mapę”
  4. kliknij pole wyboru krótkiego adresu URL i wklej wynik w href ..
Unknown-Me
źródło