Tambahkan Google Maps Driving Directions ke Situs Web Anda
Meskipun ada begitu banyak aplikasi dan layanan pemetaan di luar sana untuk membawa Anda dari titik A ke titik B, raja peta yang pasti adalah Google Maps. Saya menggunakannya di komputer, tablet, dan 90% dari waktu di ponsel cerdas saya. Itu punya data terbaik, opsi navigasi dan perutean paling dan fitur keren seperti Street View dan info jalan kaki, bersepeda dan angkutan massal.
Tetapi bagaimana jika Anda perlu menggunakan peta atau petunjuk di luar situs web Google? Misalkan Anda memiliki situs web pernikahan Anda sendiri atau blog pribadi dan tamu dapat mengunjungi situs Anda, ketikkan alamat mereka akan berasal dan secara otomatis mendapatkan petunjuk arah ke lokasi acara!
Nah, ada beberapa cara yang bisa Anda lakukan untuk mencapai ini. Cara termudah adalah dengan cukup menyematkan peta ke halaman web Anda menggunakan kode sematan yang dihasilkan oleh Google Maps. Cara kedua sedikit lebih teknis, tetapi lebih dapat disesuaikan dan dinamis. Saya akan menyebutkan kedua metode di bawah ini.
Sematkan Google Map
Jika Anda hanya ingin menampilkan arah dari satu lokasi ke lokasi lain, hal yang paling mudah dilakukan adalah menyematkan peta apa pun yang Anda lihat menggunakan kode sematan. Pertama, lanjutkan dan siapkan arah apa pun yang Anda inginkan di Google Maps dan kemudian klik ikon roda gigi di kanan bawah halaman.
Klik Bagikan atau sematkan peta dan kemudian klik pada Sematkan peta tab. Di sini Anda dapat memilih ukuran untuk peta Anda dan kemudian menyalin kode iframe dan menjatuhkannya ke halaman web yang Anda suka.
Satu-satunya downside ke metode ini adalah bahwa pengguna hanya melihat peta statis. Pada metode kedua di bawah ini, Anda bisa membuat formulir di mana pengguna bisa mengetikkan alamat awal apa pun dan itu akan menghasilkan peta dari alamat itu ke alamat tujuan yang Anda pilih..
Buat Formulir Google Maps
Untuk mengilustrasikan apa yang saya maksud dengan metode kedua, silakan dan ketik alamat AS di kotak di bawah ini untuk mendapatkan arah dari lokasi Anda ke rumah saya:
Keren ya Anda dapat dengan mudah membuat formulir kecil ini di situs web, blog, atau di mana saja Anda dapat memasukkan beberapa kode HTML! Ini juga bagus untuk situs web bisnis kecil karena Anda dapat membuangnya di halaman kontak Anda dan orang-orang bisa mendapatkan arahan dengan cepat, daripada harus menyalin alamat Anda, membuka jendela baru, dan kemudian ketik alamat awal mereka.
Jadi bagaimana cara membuat kotak petunjuk arah getar yang dimodifikasi ini? Yah pertama-tama, kita perlu mendapatkan sintaks yang benar untuk URL yang digunakan Google untuk arah. Untungnya, kita dapat mengetahuinya dengan mendapatkan arah antara dua tempat dan kemudian hanya menyalin URL dari bilah alamat. Anda juga dapat mengklik ikon roda gigi kecil di bagian paling kanan bawah halaman dan memilih Bagikan atau sematkan peta.
Tab Berbagi tautan akan berisi URL, yang merupakan URL yang sama di bilah alamat browser Anda. Saya telah melanjutkan dan menempelkan seluruh URL di bawah ini hanya untuk menunjukkan seperti apa tampilannya.
https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854 + Deerfield + Rd, + Allen, + TX + 75013, + USA / @ 33.1125686, -96.7557749,13z / data =! 3m1! 4b1! 4m13! 4m12! 1m5! 1m1! 1s0x864c3d45018517a5: 0xbabd3c91a1321997! 2m2! 1d-96.762484! Dd! 1s0x864c16d3018a7f4f: 0xab2052b5786cd29f! 2m2! 1d-96.666151! 2d33.133892
Astaga! Itu cukup panjang! Ada banyak hal di sana, yang sebagian besar tidak masuk akal! Parameter URL Google Maps dulunya sangat mudah dan mudah, tetapi struktur URL yang baru cukup rumit. Untungnya, Anda masih dapat menggunakan parameter lama dan Google akan mengubahnya menjadi versi baru secara otomatis. Untuk melihat apa yang saya maksud, lihat tautan di bawah ini.
http://maps.google.com/maps?saddr=start&daddr=end
Silahkan dan coba saja. Masukkan alamat dengan tanda kutip untuk alamat awal dan akhir dan tempel URL ke browser Anda! Saya mengganti mulai dengan kota asal saya, New Orleans dan diakhiri dengan Houston, TX, jadi seperti inilah tampilan URL arah Google Maps saya:
http://maps.google.com/maps?saddr="new orleans, la ”& daddr =” houston, tx ”
Berhasil! Seperti yang Anda lihat, Google Maps mengubah tautan menjadi sesuatu yang jauh lebih rumit setelah peta dimuat sepenuhnya. Oke, jadi sekarang kita memiliki URL yang masuk akal yang bisa kita lewati ke Google Maps, kita perlu membuat formulir sederhana dengan dua bidang, satu untuk alamat awal dan satu untuk alamat tujuan.
Jika Anda ingin orang cukup mengetik alamat mereka dan mendapatkan petunjuk arah ke tempat Anda, maka kami ingin bidang kedua disembunyikan dan sudah disetel ke alamat tujuan.
Masukkan alamat awal Anda:
Lihatlah kode di atas. Baris pertama memulai formulir dan mengatakan bahwa ketika tombol kirim diklik, data harus dikirim ke maps.google.com/maps. Itu target = kosong berarti kami ingin hasilnya terbuka di jendela baru. Kemudian kami memiliki kotak teks untuk alamat awal, yang kosong.
Kotak teks kedua disembunyikan dan nilainya adalah alamat tujuan yang kita inginkan. Akhirnya, ada tombol kirim dengan judul "Dapatkan Petunjuk Arah". Sekarang ketika seseorang mengetik alamat mereka, mereka akan mendapatkan ini:
Anda dapat menyesuaikan arah dan memetakan lebih banyak lagi dengan beberapa parameter tambahan. Sebagai contoh, katakanlah Anda tidak ingin tampilan default menjadi peta, tetapi sebaliknya menginginkannya Satelit dan tunjukkan Lalu lintas.
http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t
Perhatikan layer = t dan t = h bidang dalam URL. layer = t adalah untuk layer traffic dan t = h berarti peta hybrid! t juga dapat diatur ke m untuk peta normal, k untuk satelit dan hal untuk medan. z adalah tingkat pembesaran dan Anda dapat mengubahnya dari 1 menjadi 20. Di URL di atas, diatur ke 7. Cukup tempelkan ke URL final Anda dan sekarang Anda sudah mendapatkan formulir Google Maps Dapatkan Arah yang sangat khusus di situs Anda!
Ada masalah dengan ini, kirim komentar dan saya akan mencoba membantu! Nikmati!
