Meskipun ada begitu banyak aplikasi dan layanan^{(apps and services)} 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% waktu di ponsel cerdas saya. Ini memiliki data terbaik, opsi navigasi dan perutean terbanyak, serta fitur keren seperti Street View dan info berjalan kaki^{(Street View and walking)} , bersepeda, dan angkutan massal^{(biking and mass transit info)} .

Tetapi bagaimana jika Anda perlu menggunakan peta atau petunjuk arah^{(map or directions)} di luar situs web Google? Misalkan^(Suppose) Anda memiliki situs web pernikahan^{(wedding website)} atau blog pribadi dan tamu^{(blog and guests)}  dapat mengunjungi situs Anda, ketik alamat asal mereka dan secara otomatis mendapatkan petunjuk arah ke lokasi acara^{(event location)} !

Nah, ada beberapa cara yang bisa Anda lakukan untuk mencapai hal ini. Cara termudah adalah dengan menyematkan peta ke halaman web Anda menggunakan kode semat 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 petunjuk arah dari satu lokasi ke lokasi lain, hal termudah untuk dilakukan adalah menyematkan peta apa pun yang Anda lihat menggunakan kode semat. Pertama^(First) , lanjutkan dan atur arah apa pun yang Anda inginkan di Google Maps lalu klik ikon roda gigi di kanan bawah halaman.

Klik Bagikan atau sematkan peta^{( Share or embed map)} , lalu klik tab Sematkan peta . ^{(Embed map)}Di sini Anda dapat memilih ukuran untuk peta Anda dan kemudian menyalin kode iframe dan meletakkannya^{(iframe code and drop)} ke halaman web mana pun yang Anda suka.

Satu-satunya kelemahan metode ini adalah pengguna hanya melihat peta statis. Dalam 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 itu ke alamat tujuan yang^{(destination address)} Anda pilih.

Buat Formulir Google Maps

Untuk mengilustrasikan apa yang saya maksud dengan metode kedua, lanjutkan dan ketik alamat AS^{(US address)} di kotak di bawah ini untuk mendapatkan petunjuk arah dari lokasi Anda ke rumah saya:

Keren ya^{(Cool huh)} ? Anda dapat dengan mudah membuat formulir kecil ini di situs web, blog, atau di mana pun Anda dapat memasukkan beberapa kode HTML^{(HTML code)} ! Ini juga bagus untuk situs web bisnis^{(business web)} kecil karena Anda dapat menampilkannya di halaman kontak dan orang-orang^{(contact page and people)} bisa mendapatkan petunjuk arah dengan cepat, daripada harus menyalin alamat Anda, membuka jendela baru, lalu mengetikkan alamat awal^{(starting address)} mereka .

Jadi bagaimana cara membuat kotak get direction yang dimodifikasi ini? Pertama-tama, kita harus mendapatkan sintaks yang benar untuk URL yang digunakan Google ^(Google)untuk^(Well) petunjuk arah. Untungnya, kami dapat mengetahuinya dengan mendapatkan petunjuk arah antara dua tempat dan kemudian cukup menyalin URL dari bilah alamat^{(address bar)} . Anda juga dapat mengeklik ikon roda gigi kecil di kanan bawah halaman dan memilih Bagikan atau sematkan peta^{(Share or embed map)} .

Tab Bagikan tautan^{(Share link)} akan berisi URL , yang merupakan URL yang sama di bilah alamat browser^{(browser address bar)} Anda . Saya telah melanjutkan dan menempelkan seluruh URL di bawah^{(URL below)} ini hanya untuk menunjukkan kepada Anda 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 cukup lama! Ada banyak hal di sana, sebagian besar tidak masuk akal! Parameter URL Google Maps^{(Google Maps URL)} dulu sangat lugas dan mudah, tetapi struktur URL^{(URL structure)} barunya 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 rekatkan ^{(address and paste)}URL ke browser Anda! Saya mengganti awal dengan kota asal saya ^{(home city)} New Orleans dan diakhiri dengan Houston , TX, jadi seperti inilah tampilan URL petunjuk arah Google Maps saya:^{(Google Maps)}

http://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”

Berhasil! Namun, seperti yang Anda lihat, Google Maps mengubah tautan menjadi sesuatu yang jauh lebih rumit setelah peta dimuat sepenuhnya. Ok, jadi sekarang kita memiliki URL waras yang dapat kita berikan ke Google Maps , kita perlu membuat formulir sederhana dengan dua bidang, satu untuk alamat awal^{(starting address)} dan satu untuk alamat tujuan^{(destination address)} .

Jika Anda ingin orang-orang mengetikkan alamat mereka dan mendapatkan petunjuk arah ke tempat Anda, maka kami ingin bidang kedua disembunyikan dan sudah disetel ke alamat tujuan^{(destination address)} .

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”> Enter your starting address: <input type=”text” name=”saddr” /> <input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” /> <input type=”submit” value=”get directions” /> </form>

Lihat kode di atas. Baris pertama memulai formulir dan mengatakan bahwa ketika tombol kirim^{(submit button)} diklik, data harus dikirim ke maps.google.com/maps. Target target=blank berarti kita ingin hasilnya terbuka di jendela baru. Kemudian kami memiliki kotak teks^{(text box)} untuk alamat awal^{(starting address)} , yang kosong.

Kotak teks^{(text box)} kedua disembunyikan dan nilainya adalah alamat tujuan^{(destination address)} yang kita inginkan. Terakhir, ada tombol submit dengan judul “Get Directions”. Sekarang ketika seseorang mengetik alamat mereka, mereka akan mendapatkan ini:

Anda dapat menyesuaikan arah dan memetakan lebih banyak lagi dengan beberapa parameter tambahan. Misalnya, Anda tidak ingin tampilan default^{(default view)} menjadi peta, tetapi menginginkannya menjadi Satelit^(Satellite) dan menampilkan Lalu Lintas^(Traffic) .

http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

Perhatikan bidang layer=t dan t=h di URL . layer=t adalah untuk traffic layer and t=h means peta hibrid! t juga dapat diatur ke m untuk peta normal, k untuk satelit dan  p untuk medan. z adalah tingkat zoom^{(zoom level)} dan Anda dapat mengubahnya dari 1 menjadi 20. Di URL di atas , ini disetel ke 7. Cukup^(Just) tempelkan itu ke URL final Anda dan sekarang Anda memiliki ^(URL)formulir Dapatkan Petunjuk Arah Google Maps^{(Google Maps Get Directions form)} yang sangat disesuaikan di situs Anda !

Punya masalah dengan ini, kirim komentar dan saya akan mencoba membantu! Menikmati!

Add Google Maps Driving Directions to Your Website

Even though therе are so many mapping apps and services out therе to get you from point A to point B, the definitive king of maps is Goоgle Maps. I use it on my computer, tablet and 90% of the time on my smartphоne. Іt’s got the best data, the most navigation and roυting optionѕ and cool features like Street View and walking, biking аnd mass transit info.

But what if you need to use a map or directions outside of Google’s website? Suppose you have your own wedding website or a personal blog and guests could visit your site, type in the address they will be coming from and automatically get directions to the event location!

Well, there are a couple of ways you can go about accomplishing this. The easiest way is to simply embed the map onto your webpage using the embed code generated by Google Maps. The second way is a bit more technical, but more customizable and dynamic. I’ll mention both methods below.

Embed Google Map

If you only want to display directions from one location to another, the easiest thing to do is to embed whatever map you are viewing using the embed code. First, go ahead and setup whatever directions you want in Google Maps and then click on the gear icon at the bottom right of the page.

Click on Share or embed map and then click on the Embed map tab. Here you can pick a size for your map and then copy the iframe code and drop that onto any webpage you like.

The only downside to this method is that the user just sees a static map. In the second method below, you can create a form whereby the user can type in any starting address and it will generate a map from that address to a destination address of your choosing.

Create Google Maps Form

To illustrate what I mean by the second method, go ahead and type a US address in the box below to get directions from your location to my house:

Cool huh? You can easily create this little form on any website, blog, or anywhere you can put in some HTML code! This is also great for small business web sites as you can throw it up on your contact page and people can get directions quickly, rather than having to copy your address, open a new window, and then type in their starting address.

So how do we go about creating this modified get directions box? Well first, we’ll need to get the correct syntax for the URL that Google uses for directions. Luckily, we can figure that out by getting directions between two places and then just copying the URL from the address bar. You can also click on the tiny gear icon at the very bottom right of the page and choose Share or embed map.

The Share link tab will contain the URL, which is the same URL in your browser address bar. I ‘ve gone ahead and pasted the entire URL below just to show you what it looks like.

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

Yikes! That’s pretty long! There’s a lot of stuff in there, most of which doesn’t make any sense! Google Maps URL parameters used to be very straightforward and easy, but the new URL structure is quite complicated. Thankfully, you can still use the old parameters and Google will convert them into the new version automatically. To see what I mean, check out the link below.

http://maps.google.com/maps?saddr=start&daddr=end

Go ahead and give it a shot. Put in an address in quotes for the starting and ending address and paste the URL into your browser! I replaced start with my home city New Orleans and end with Houston, TX, so this is what my Google Maps directions URL looks like:

http://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”

It works! As you can see, though, Google Maps converts the links into something far more complicated once the map fully loads. Ok, so now that we have a sane URL that we can pass into Google Maps, we need to create a simple form with two fields, one for the starting address and one for the destination address.

If you want people to just type in their address and get directions to your place, then we’ll want the second field to be hidden and already set to the destination address.

<form action=”http://maps.google.com/maps” method=”get” target=”_blank”>
Enter your starting address:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”get directions” />
</form>

Check out the code above. The first line starts out form and says that when the submit button is clicked, the data should be sent to maps.google.com/maps. The target=blank means that we want the result to open in a new window. Then we have a text box for the starting address, which is blank.

The second text box is hidden and the value is the destination address that we desire. Finally, there is a submit button with the title “Get Directions”. Now when someone types in their address, they’ll get this:

You can customize the directions and map even more with a few extra parameters. For example, let’s say you don’t want the default view to be maps, but instead want it to be Satellite and show Traffic.

http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

Notice the layer=t and t=h fields in the URL. layer=t is for the traffic layer and t=h means hybrid map! t can also be set to m for normal map, k for satellite and p for terrain. z is the zoom level and you can change it from 1 to 20. In the above URL, it’s set to 7. Just tack those on to your final URL and you’ve now got a highly customized Google Maps Get Directions form on your site!

Have any issues with this, post a comment and I’ll try to help! Enjoy!

Related posts

• Google Maps Tidak Berbicara atau Memberi Petunjuk Suara? 12 Cara untuk Memperbaiki

• 9 Hidden Fitur di Google Maps Anda harus check out

• Cara Lihat Google Maps Search History Anda

• Cara menggunakan beberapa Stops di Google Maps

• Cara Embed Google Forms pada Your Website

• Cara Melihat Riwayat Lokasi Google Maps

• Cara Kirim Private Emails di Gmail

• Cara Menggunakan Pelacakan Kebakaran Hutan Google Maps

• Cara Export and Import Chrome Bookmarks

• Cara Menggunakan Google Calendar: 10 Pro Tips

• Apa yang disempurnakan Protection di Google Chrome and How untuk memungkinkannya

• Cara Menggunakan Google Sheets Drop Down Lists

• Cara Menggunakan Tugas Google - Memulai Panduan

• 8 Penggunaan Luar Biasa Untuk Google Maps Street View

• Cara Mengunduh Peta di Google Maps untuk Tampilan Offline

• Cara Menghapus YouTube History and Search Activity

• Metode Penelitian Pengguna Google Analytics untuk Meningkatkan Lalu Lintas Situs Web

• Cara Membuat Business Card di Google Drive

• Apa itu Metric and Dimension di Google Analytics?

• Cara Menjatuhkan Pin di Google Maps di Desktop dan Seluler