Meskipun ada begitu banyak aplikasi dan layanan pemetaan di luar sana untuk membawa Anda dari titik A ke titik B, raja peta adalah Google Maps. Saya menggunakannya di komputer, tablet, dan 90% dari waktu di ponsel cerdas saya. Ini memiliki data terbaik, opsi navigasi dan perutean terbanyak, serta fitur keren seperti Street View dan info jalan, bersepeda, dan transportasi 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, ketik alamat tempat mereka berasal dan secara otomatis mendapatkan petunjuk arah ke lokasi acara!
Nah, ada beberapa cara yang bisa Anda lakukan untuk mencapai hal ini. Cara termudah adalah dengan hanya menanamkan peta ke halaman web Anda menggunakan kode embed yang dihasilkan oleh Google Maps. Cara kedua sedikit lebih teknis, tetapi lebih dapat disesuaikan dan dinamis. Saya akan menyebutkan kedua metode di bawah ini.
Jika Anda hanya ingin menampilkan arah dari satu lokasi ke lokasi lain, hal termudah untuk dilakukan adalah menanamkan peta apa pun yang Anda lihat menggunakan kode embed. Pertama, lanjutkan dan siapkan arah apa pun yang Anda inginkan di Google Maps, lalu 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 mana pun yang Anda suka.
Satu-satunya downside ke metode ini adalah bahwa pengguna hanya melihat peta statis. Pada metode kedua di bawah ini, Anda dapat membuat formulir di mana pengguna dapat mengetikkan alamat awal apa pun dan itu akan menghasilkan peta dari alamat tersebut ke alamat tujuan yang Anda pilih.
Untuk mengilustrasikan apa yang saya maksud dengan metode kedua, lanjutkan dan ketik alamat AS di kotak di bawah ini untuk mendapatkan petunjuk arah dari lokasi Anda ke rumah saya:
Keren ya? Anda dapat dengan mudah membuat formulir kecil ini di situs web, blog, atau di mana pun 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 arah dengan cepat, daripada harus menyalin alamat Anda, buka jendela baru, dan kemudian ketik alamat awal mereka.
Jadi bagaimana kita bisa membuat kotak petunjuk arah yang dimodifikasi ini? Pertama-tama, kita perlu mendapatkan sintaks yang benar untuk URL yang Google gunakan untuk petunjuk. Untungnya, kita dapat mengetahuinya dengan mendapatkan arah antara dua tempat dan kemudian menyalin URL dari bilah alamat. Anda juga dapat mengklik ikon roda gigi kecil di bagian kanan bawah halaman dan pilih Bagikan atau sematkan peta.
Tab Share link akan berisi URL, yang merupakan URL yang sama di address bar 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! 2d33.08947! 1m5! 1m1! 1s0x864c16d3018a7f4f: 0xab2052b5786cd29f! 2m2! 1d-96.666151! 2d33.133892
Astaga! Itu sangat panjang! Ada banyak barang di sana, sebagian besar tidak masuk akal! Parameter URL Google Maps dulu sangat mudah dan mudah, tetapi struktur URL baru cukup rumit. Untungnya, Anda masih dapat menggunakan parameter lama dan Google akan mengonversinya menjadi versi baru secara otomatis. Untuk melihat apa yang saya maksud, periksa tautan di bawah ini.
http://maps.google.com/maps?saddr=start&daddr=end
Silahkan dan coba saja. Masukkan alamat dalam tanda kutip untuk alamat awal dan akhir dan tempelkan URL ke browser Anda! Saya mengganti mulai dengan kota asal saya New Orleans dan diakhiri dengan Houston, TX, jadi inilah yang tampak seperti URL arah Google Maps saya:
http://maps.google.com/maps?saddr=”new orleans, la ”& daddr =” houston, tx ”
Berhasil! Seperti yang Anda lihat, Google Maps mengonversi tautan menjadi sesuatu yang jauh lebih rumit setelah peta sepenuhnya dimuat. Ok, jadi sekarang kita punya URL yang waras yang bisa kita lewati ke Google Maps, kita perlu membuat formulir sederhana dengan dua kolom, satu untuk alamat awal dan satu lagi untuk alamat tujuan.
Jika Anda ingin orang hanya 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:
Lihat 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 artinya kita ingin hasilnya terbuka di jendela baru. Lalu kita memiliki kotak teks untuk alamat awal, yang kosong.
Kotak teks kedua disembunyikan dan nilainya adalah alamat tujuan yang kita inginkan. Akhirnya, ada tombol submit dengan judul "Dapatkan Arah". Sekarang ketika seseorang mengetik di 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 pertunjukan 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 di URL. layer = t adalah untuk layer traffic dan t = h berarti peta hybrid! t juga bisa disetel ke m untuk peta normal, k untuk satelit danp untuk medan. z adalah tingkat zoom dan Anda dapat mengubahnya dari 1 hingga 20.Di URL di atas, disetel ke 7. Hanya tusuk ke URL final Anda dan Anda sekarang sudah mendapatkan bentuk Dapatkan Google Maps yang sangat khusus di situs Anda!
Punya masalah apa pun dengan ini, kirim komentar dan saya akan mencoba membantu! Nikmati!
