Cara mengonversi alamat menjadi Google Maps Link (BUKAN PETA)


297

Setelah mencari (Googling) di web sebentar, saya tidak dapat menemukan apa pun yang memerlukan alamat seperti:

1200 Pennsylvania Ave SE, Washington, Distrik Columbia, 20003

dan mengubahnya menjadi tautan yang dapat diklik:

http://maps.google.com/maps?f=q&source=s_q&hl=id&q=1200+Pennsylvania+Ave+SE,+Washington,+District+of+Columbia,+20003&sll=37.0625,-95.6707068&sspn=44.118686,114.169922 & yaitu = UTF8 & cd = 1 & geocode = FT5MUQIdIDlp-w & split = 0 & ll = 38.882147, -76.99017 & spn = 0.01064.0.027874 & z = 16 & iwloc = A

jQuery atau PHP lebih disukai atau hanya informasi yang berguna tentang ini.

Jawaban:


681

Bagaimana dengan ini?

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

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

Jika Anda memiliki lat-panjang maka gunakan URL di bawah ini

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

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

MEMPERBARUI

Mulai tahun 2017, Google sekarang memiliki cara resmi untuk membuat URL Google Maps lintas-platform:

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

Anda dapat menggunakan tautan seperti

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

7
Bagaimana saya bisa membuatnya dengan Latitude dan Longitude?
nadeem gc

4
Sepertinya metode ini sedikit flakey jika pengguna menggunakan Google Maps baru. Untuk membuat tautan yang memaksa halaman yang dihasilkan muncul dalam mode klasik, cukup tambahkan &output=classictautan Anda. Jadi semuanya akan terlihat seperti ini:http://maps.google.com/?q=1200%20Pennsylvania%20Ave%20SE,%20Washington,%20District%20of%20Columbia,%2020003&output=classic
Matt

4
@ Mat Bagaimana ini flakey? Juga, output = klasik tidak akan bertahan selamanya, dan bagaimana jika pengguna lebih memilih peta baru?
Chris B

2
Adakah cara untuk mendapatkan pin jatuh di peta melalui URL?
Flea

5
Ini masih berfungsi dengan baik (terima kasih @ ChrisB!) Tetapi sepertinya format Google Maps sendiri sekarang https://www.google.com/maps/place/1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003 ¶ Untuk beberapa lokasi Anda dapat menggunakan hanya dengan nama ... tetapi maps.google.com/?q=dan www.google.com/maps/place/tidak akan selalu memberikan hasil yang sama: https://www.google.com/maps/place/White Houseekspansi ke https://www.google.com/maps/place/The+White+House,+1600+Pennsylvania+Ave+NW,+Washington,+DC+20500tetapi https://maps.google.com/?q=White Housememberi saya toko barang antik di NC
henry

67

Saya tahu saya sangat terlambat ke permainan, tetapi saya pikir saya akan berkontribusi demi anak cucu.

Saya menulis fungsi jQuery singkat yang secara otomatis akan mengubah semua <address>tag menjadi tautan Google maps.

Lihat demo di sini.

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

Saya juga menemukan situasi yang meminta untuk menghasilkan peta yang disematkan dari tautan, dan meskipun saya akan berbagi dengan wisatawan masa depan:

Lihat demo lengkap

$(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 thanx untuk kode ur ... itu membuat saya peta di div ... tapi masalah saya adalah info pin mendapat popup ... yang saya tidak mau. jadi bisakah kamu membimbing saya bagaimana tidak membuka pin info box.?????.thnx sebelumnya ...
Shwet

3
Perlu diketahui bahwa <address>tag HTML5 tidak dimaksudkan untuk memberikan alamat pos, tetapi memberikan informasi kontak yang terkait dengan konten (biasanya penulis). developer.mozilla.org/en-US/docs/Web/HTML/Element/address
Neograph734

Jawaban bagus! Terima kasih telah berbagi. Saya tidak yakin konsekuensi tentang hal itu tetapi berhasil bahkan tanpa encodeURIComponent().
moreirapontocom

12

Feb 2016:

Saya perlu melakukan ini berdasarkan nilai-nilai basis data yang dimasukkan klien dan tanpa generator lat / panjang. Google sangat suka lat / long hari ini. Inilah yang saya pelajari:

1 Awal tautan terlihat seperti ini: https://www.google.com/maps/place/

2 Kemudian Anda memasukkan alamat Anda:

  • Gunakan + sebagai ganti spasi.
  • Letakkan koma, di depan dan di belakang kota.
  • Termasuk pos / pos dan provinsi / negara bagian.
  • Ganti semua # tanpa apa-apa.
  • Ganti ++ atau ++++ dengan + tunggal

3 Masukkan alamat setelah tempat /

4 Kemudian tebas di bagian akhir.

CATATAN: Garis miring pada bagian akhir penting. Setelah pengguna mengklik tautan, Google melanjutkan dan menambahkan lebih banyak ke URL dan mereka melakukannya setelah slash ini.

Contoh kerja untuk pertanyaan ini:

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

Saya harap itu membantu.


sementara contohnya berfungsi, saya tidak dapat membuat ulang ini untuk alamat Jerman. Saya akhirnya menerapkan jawaban Chris B (... /? Q = istilah).
gl03

Untungnya ini sekarang juga berfungsi untuk alamat Jerman. Lihat: google.com/maps/place/…
Yannick Schuchmann



2

Meminjam dari solusi Michael Jasper dan Jon Hendershot, saya menawarkan yang berikut:

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

Solusi ini menawarkan manfaat berikut dibandingkan solusi yang sebelumnya ditawarkan:

  • Itu tidak akan menghapus tag HTML (mis. <br>Tag) di dalam <address>, jadi pemformatan dipertahankan
  • Itu benar menyandikan URL
  • Ini meremas ruang ekstra sehingga URL yang dihasilkan lebih pendek dan lebih bersih dan dapat dibaca manusia setelah pengkodean
  • Ini menghasilkan markup yang valid (solusi Mr.Hendershot menciptakan <a><address></address></a>yang tidak valid karena elemen tingkat blok seperti <address>tidak diizinkan dalam elemen inline seperti <a>.

Peringatan : Jika <address>tag Anda mengandung elemen tingkat blok seperti <p>atau <div>, maka kode JavaScript ini akan menghasilkan dalam markup yang tidak valid (karena <a>tag akan berisi elemen tingkat blok tersebut). Tetapi jika Anda hanya melakukan hal-hal seperti ini:

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

Maka itu akan bekerja dengan baik.


Saya menggunakan solusi Anda dalam proyek saya dengan hanya mengubah kode Anda dengan kebutuhan saya. Ini berfungsi untuk saat ini.
Proyek Mycoding

2

Inilah yang saya temukan dari salah satu artikel Google Maps:

  1. Buka Google Maps .
  2. Pastikan peta atau gambar Street View yang ingin Anda sematkan muncul di peta.
  3. Di sudut kiri atas, klik menu utama ☰.
  4. Klik Bagikan atau embed peta .
  5. Di bagian atas kotak yang muncul, pilih tab Peta embed .
  6. Pilih ukuran yang Anda inginkan, lalu salin kode dan tempel ke kode sumber situs web atau blog Anda.

Catatan : Jika Anda menggunakan Maps dalam mode Ringan , Anda tidak akan dapat menyematkan peta. Ingatlah bahwa informasi lalu lintas dan beberapa info Peta lainnya mungkin tidak tersedia di peta yang disematkan.

masukkan deskripsi gambar di sini


Ini bekerja untuk saya. Salin kode semat ini dan tempel ke situs web Anda.
Kabir Hossain


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

enkode konversi Anda dan tambahkan semua elemen tambahan seperti spasi dan semua. jadi kamu dapat dengan mudah mengambil kode teks bidang dari db dan menggunakannya tanpa khawatir tentang karakter khusus yang akan ditambahkan


1
encodeURIComponent adalah javascript, Anda harus menggunakan urlencode ($ address);
ximi

1

Cara terbaik adalah menggunakan baris ini:

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"

Ingatlah untuk mengganti alamat pertama dan kedua jika perlu.

Anda dapat melihat contoh pekerjaan


1

Saya memiliki masalah serupa di mana saya perlu menyelesaikan ini untuk setiap alamat di situs (masing-masing dibungkus dengan tag alamat). Sedikit jQuery ini bekerja untuk saya. Ini akan mengambil setiap <address>tag dan membungkusnya di tautan google maps dengan alamat yang berisi tag itu!

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

}); 

Contoh kerja -> https://jsfiddle.net/f3kx6mzz/1/


2
Alih-alih mencoba secara manual URL keluar dari string, Anda bisa menggunakannya encodeURIComponent.
Samuel

0

Juga, siapa pun yang ingin secara manual URLENCODE alamat: http://code.google.com/apis/maps/documentation/webservices/index.html#BuildingURLs

Anda dapat menggunakannya untuk membuat aturan khusus yang memenuhi standar GM.


Ini sekarang mengarah ke 404, sayangnya.
Darren Monahan

1
Maaf. Komentar ini sudah sangat lama ... Saya ragu versi API yang digunakan dalam pertanyaan ini masih ada, tetapi di sini tautan yang digunakan untuk referensi: web.archive.org/web/20110420023220/https:// code.google.com/apis/…
Ed Meacham

0

Metode C # Replace biasanya bekerja untuk saya:

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

0

Saya baru saja menemukan ini dan suka berbagi ..

  1. cari alamat Anda di maps.google.com
  2. klik pada ikon roda gigi di kanan bawah
  3. klik "bagikan atau embed peta"
  4. klik kotak centang url pendek dan tempel hasilnya di href ..
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.