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 routing yang 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.

bagikan atau lampirkan peta

Klik Bagikan atau embed peta lalu klik pada tab Embed map. Di sini Anda dapat memilih ukuran untuk peta Anda dan kemudian menyalin kode iframe dan menjatuhkannya ke halaman web yang Anda suka.

peta embed

Satu-satunya downside ke metode ini adalah bahwa pengguna hanya melihat peta statis. Dalam 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 dalam kotak di bawah ini untuk mendapatkan petunjuk 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 mengetikkan alamat awal mereka.

Jadi bagaimana cara membuat kotak petunjuk arah getar yang dimodifikasi ini? Pertama-tama, kita perlu mendapatkan sintaks yang benar untuk URL yang digunakan Google untuk arah. Untungnya, kita bisa mengetahuinya dengan mendapatkan arah antara dua tempat dan kemudian hanya menyalin URL dari bilah alamat. Anda juga dapat mengklik ikon roda gigi kecil di paling kanan bawah halaman dan memilih Bagikan atau embed peta.

bagikan atau lampirkan 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.

bagikan tautan peta
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! Dm! 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 dulu 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 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. Target = kosong berarti bahwa kita 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:

petunjuk arah peta

Anda dapat menyesuaikan arah dan memetakan lebih banyak lagi dengan beberapa parameter tambahan. Misalnya, katakanlah Anda tidak ingin tampilan default menjadi peta, tetapi sebaliknya ingin menjadikannya Satelit dan menampilkan 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 untuk layer traffic dan t = h berarti peta hybrid! t juga dapat diatur ke m untuk peta normal, k untuk satelit dan p 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!