Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Turn-By-Turn arah dengan Google Maps API

by
Read Time:16 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Amar Shaleh (you can also view the original English article)

Dalam tutorial ini, kita akan pergi melalui proses untuk menciptakan sebuah widget kecil yang memungkinkan pengguna untuk mengambil turn-by-turn arah ke lokasi tertentu. Kita akan menggunakan Google Maps API, melalui JavaScript, untuk memberikan fungsionalitas yang lumayan canggih.

Final ProductFinal ProductFinal Product

Mendapatkan API Key

Satu-satunya peringatan dengan menggunakan Google Maps adalah kita harus mengajukan permohonan untuk API key, tetapi ini adalah proses yang cukup sepele jika Anda sudah memiliki account Google GMail. Sayangnya karena persyaratan Google kita harus mengembangkan pada domain yang kami sediakan Google, yaitu kita tidak bisa mengembangkan pada server lokal. Untungnya bagi kita proses akan cepat dan kita tidak akan menghabiskan banyak waktu pada live server. Juga, pastikan untuk menyimpan kunci API di tempat yang aman karena saya tidak bisa menemukan cara untuk mengambil mereka ketika digenerate, meskipun saya kira Anda bisa hanya menciptakan sekali.

Keadaan

Sebelum kita menyelam ke dalam kode saya membahas alasan di balik ide ini. Sebagai pengembang web saya menghabiskan banyak waktu di web. Satu subset tertentu dari situs-situs yang saya kunjungi bisnis lokal yang pasti tidak memiliki sumber daya yang besar untuk mengabdikan untuk desain web, tapi mudah-mudahan orang-orang yang sedang mengembangkan situs-situs tersebut akan melihat artikel seperti ini dan menyadari betapa mudahnya untuk menyertakan fitur lengkap peta ke dalam halaman web manapun. Hampir semua situs web yang mewakili usaha kecil memiliki halaman yang didedikasikan untuk memberitahu pengguna cara untuk mencari lokasi fisik mereka. Sering kali Anda mendapatkan peta dengan lokasi mereka di pin di atasnya, yang tidak membantu pengguna yang tidak tahu daerah. Dalam tutorial ini kita akan mengubah hal itu dan membiarkan pengguna memasukkan alamat mereka dan mendapatkan turn-by-turn arah ke alamat yang kita inginkan.

Termasuk Google Maps Javascript Perpustakaan

Sekarang bahwa sabun dari cara Mari kita melihat ke dalam kode. Hal pertama yang perlu kita lakukan adalah memasukan Perpustakaan Javascript yang berisi semua metode Google Maps. Google mungkin menghasilkan kode ini ketika Anda membuat API key, tetapi yang mungkin telah menunjuk ke API Versi 3 yang masih dalam pengujian beta. Berikut adalah link ke API Versi 2 pastikan untuk memasukkan kunci API Anda. Kami juga akan menyertakan sebuah file, application.js yang akan memegang fungsi kustom kami, saya menyimpan dalam direktori di tingkat root disebut js. Kode berikut berlaku dalam bagian head halaman Anda.

Kode HTML

Di bagian body halaman kami, kita perlu beberapa markup yang terbatas. Saya akan secara singkat pergi atas bit yang diperlukan, dan Anda dapat melihat kode sumber untuk melihat fluff saya disertakan dalam demo. Elemen pertama adalah div kosong dengan ID dari map_canvas, ini adalah pengganti kita titik panggilan Google Maps untuk itu dan itu akan menghasilkan semua peta markup dalam elemen itu.

Berikutnya saya membuat div untuk memuat alamat organisasi dan form untuk pengguna untuk memasukkan alamat mereka. Anda dapat melihat atas kode ini tetapi cukup sederhana dan tidak terlalu sulit untuk membedakan itu adalah pertemuan. Pastikan untuk melihat CSS untuk melihat bagaimana ini di style dalam demo.

Perhatikan bahwa kita mengirimkan Halaman ini untuk dirinya sendiri ini adalah agar kami dapat memproses halaman menggunakan PHP jika pengguna memiliki JS dinonaktifkan. Jika JS diaktifkan kami ingin menjalankan fungsi, overlayDirections() yang kita akan lihat nanti. Sebagian besar kode ini pergi ke kotak pilih yang memungkinkan pengguna memilih state mereka, aku telah kental itu mereka mencetak artikel ini, tetapi Anda dapat mengambil kode lengkap dari download. Catatan lain yang menarik adalah kami mengatur size dan maxlength dari kode pos text field ke5. Hal terakhir untuk mencatat adalah bahwa kita sudah mengatur id dan nama-nama semua elemen form.

Bootstraping dan mendeklarasikan variabel

Baiklah sekarang kita dapat pindah ke inti dari tutorial ini, kode JavaScript. Hampir semua panggilan kita akan membuat datang dari Google Maps API yang kami dirujuk sebelumnya. Google menyediakan dokumentasi yang sangat baik dan kode contoh di situs web mereka jadi pastikan untuk check it out. Saya akan mencoba untuk link ke halaman yang relevan seperti yang saya gunakan mereka.

Hal pertama adalah sementara kita memiliki halaman HTML kami terbuka memungkinkan bootstrap menginisialisasi berfungsi dengan menetapkan atribut onload. Catatan: ini dapat dilakukan di jQuery menggunakan fungsi $(document).ready().

Sekarang kita akan pindah ke js/appication.js file. Hal pertama yang perlu kita lakukan adalah menetapkan beberapa variabel. Beberapa kode penginjil akan mungkin berburu ke bawah untuk mendeklarasikan variabel global, tapi saya percaya dalam hal ini kita harus baik-baik saja. Aku akan memberikan kode dan kemudian menjelaskan bagaimana kita akan menggunakan masing-masing.

  • gdir: memegang objek GDirections yang digunakan untuk mendapatkan hasil arah dan menampilkannya pada peta dan/atau panel teks.
  • fromAddress: sebuah string yang memegang alamat lengkap pengguna.
  • toAddress: sebuah string yang memegang alamat bisnis/organisasi

Initialize() fungsi

Fungsi initialize() yang kita panggil sebelumnya akan digunakan untuk membuat peta pada halaman dan menempatkan penanda kustom lokasi kami.

Hal pertama yang perlu kita lakukan adalah memeriksa jika browser kompatibel dengan Google Maps, dan untuk ini Google menyediakan GBrowserIsCompatible() di API mereka. Pada dasarnya mengembalikan true jika browser yang kompatibel dan memungkinkan kita untuk bergerak ke dalam sisa fungsi kita. Saya memutuskan untuk abstrak beberapa nilai ke variabel di bagian atas fungsi sehingga ini bisa dengan mudah porting ke banyak aplikasi.

companyMarkerImage adalah serangkaian lokasi gambar kecil kami akan menempatkan di lokasi kami di peta. Ini adalah sesuatu yang saya pikir adalah sentuhan yang bagus untuk memiliki ikon kustom untuk mewakili bisnis Anda yang akan mempersonalisasi tampilan peta Google generik. Selanjutnya, companyLatLng memegang sebuah objek GLatLng yang sesuai dengan lintang, bujur titik di dunia. Jangan lari keluar dan membeli perangkat GPS untuk mendapatkan angka-angka ini kita dapat menggunakan maps.google.com. Dalam jenis search box alamat dan ketika ia menemukan lokasi klik tombol Link di atas kanan dari peta. Scroll melalui kotak teks pertama dalam jendela modal dan menemukan &sll =...

Anda dapat menyalin dan menyisipkan koordinat tersebut ke parameter konstruktor GLatLng kami. Ini adalah titik di mana kami akan menempatkan gambar kustom peta. Variabel berikutnya, companyMarkerSize, memegang sebuah objek GSize yang mewakili lebar dan tinggi gambar kustom penanda Anda. Selanjutnya kami menetapkan toAddress yang adalah alamat bisnis. Variabel akhir, defaultZoomLevel, hanya memberitahu peta apa yang Anda inginkan tingkat zoom bawaan untuk mulai dari 1 sampai 18.

Baris berikutnya kode menciptakan sebuah objek GMap2. Google menggambarkan hal ini sebagai "class pusat di API." Ini banyak data peta dan memungkinkan kita untuk memanipulasi apa yang ditampilkan di area peta. Dibutuhkan satu argumen objek DOM menunjuk ke elemen yang berisi peta, #map_canvas. Selanjutnya kami menetapkan gdir untuk menahan GDirections objek. Ini adalah antarmuka yang kita gunakan untuk query Google Maps untuk arah. Konstruktor mengambil dua argumen obyek peta dan objek DOM mana kita ingin menempatkan turn-by-turn arah. Aku memilih untuk buat div kosong di bawah #addresses disebut #directions.

Ketika menggunakan layanan web kami selalu menjalankan risiko mendapatkan kesalahan kembali. Kita dapat membuat ini sebagai rasa sakit bebas mungkin menggunakan GEvent class. Dalam sedikit kode kita mengatakan bahwa jika kita memiliki kesalahan mendapatkan petunjuk untuk melaksanakan fungsi panggilan balik kustom, handleErrors dalam kasus kami. Kita langsung memanggil fungsi addListener() yang mendaftar callback. Dibutuhkan 3 argumen objek sumber, string yang merujuk ke jenis event kami ingin mengeksekusi callback pada, dan handler yang menunjuk ke fungsi kami ingin dilaksanakan. Fungsi, handleErrors, adalah sesuatu yang akan kita lihat nanti.

Yang terakhir beberapa baris dalam initialize() yang digunakan untuk membuat penanda kami kustom, saya memilih Jayhawk ditemukan di KU's homepage. createMarker adalah fungsi pembungkus aku menulis abstrak kode yang diperlukan untuk membuat kustom penanda. Dibutuhkan tiga argumen: referensi sebuah objek GLatLng yang mana kita tempatkan, respresenting string path ke gambar, dan referensi ke objek GSize yang mewakili ukuran gambar. Selanjutnya kami menggunakan metode setCenter() class GMap2 yang mengambil sebuah objek GLatLng koordinat berpusat pada, dan bilangan bulat untuk zoom level dua argumen. Perhatikan kita mengirimkan dalam variabel yang kami ditetapkan dalam pengaturan blok di bagian atas fungsi initialize(). Baris terakhir dari kode menggunakan metode addOverlay(). Ini adalah apa sebenarnya menambahkan gambar kustom ke peta.

Fungsi initialize() tidak banyak angkat berat, tetapi tentu saja dapat menunjukkan untuk itu. Setelah kami menulis fungsi createMarker() berikutnya Anda akan dapat memuat aplikasi dan melihat beberapa kemajuan. Tapi pertama mari kita rekap fungsi initialize().

CreateMarker() fungsi

Selanjutnya kita akan menciptakan sebuah fungsi pembungkus yang dibutuhkan semua rasa sakit dalam menciptakan sebuah penanda dengan gambar kustom. Alasan saya memilih untuk abstrak ini adalah karena itu adalah proses yang terlibat dan akan kekacauan sampai initialize() kami berfungsi lebih. Lain menambahkan manfaat adalah bahwa kita dapat menambahkan beberapa penanda sangat cepat tanpa mengulangi banyak kode.

Jauh lebih kecil daripada fungsi pertama kami, tetapi sama pentingnya. Pertama kita mendeklarasikan variabel, marker baru, dan menyimpan sebuah objek GIcon. Dapat mengambil dua salinan argumen yang adalah objek GIcon bahwa itu akan menyalin properti dari, dan gambar yang adalah sebuah string yang mewakili path ke gambar kustom. G_DEFAULT_ICON adalah konstan yang mewakili penanda default, dan imageURL berasal dari pengaturan blok di initialize(). Kita hanya perlu menetapkan satu lebih properti, iconSize yang merupakan jenis GSize, ini mewakili ukuran gambar kustom dan juga berasal dari pengaturan blok. Baris terakhir dari kode mengembalikan sebuah objek GMarker yang mengambil dua argumen latlng, dan ikon. Yang pertama, latlng adalah referensi ke objek GLatLng kita dinyatakan dalam pengaturan blok. Argumen berikutnya adalah untuk objek GIcon yang buat. Itu saja yang perlu kita lakukan untuk peta bagian dari aplikasi kita untuk bekerja. Anda sekarang dapat memuat halaman dan melihat betapa mudahnya untuk mendapatkan peta bagus di website kami.

Menambahkan arah

Ini adalah bagian favorit saya tentang tutorial ini, memungkinkan pengguna untuk memasukkan alamat dan menerima mendapatkan kembali peta dengan rute yang disorot dan turn-by-turn arah. Melalui penggunaan API ini kita bisa mengembun sesuatu yang akan memerlukan ribuan baris kode dan jumlah yang luar biasa pengolahan resource untuk hanya beberapa kode.

Baris pertama saya telah benar-benar sampai ke lima baris untuk kejelasan. Pada dasarnya ini meraih semua nilai dari form dan menempatkan spasi di antara setiap bagian. Saya pikir ini adalah lebih baik daripada meminta pengguna untuk memasukkan alamat seluruh ke dalam satu kotak teks karena dapat menjadi membingungkan.

Baris kedua membuat penggunaan gdir kami terletak di initialize(). Kita memanggil metode load() dan memasukan argumen string tunggal, yang pada dasarnya apa yang kami akan melewati maps.google.com melalui kotak pencarian. from: dan to: kata kunci membantu memberitahu Google alamat mana harus mulai titik dan yang perlu titik akhir. Itu semua yang perlu kita lakukan untuk arah, ya saya terkejut juga! Jika Anda mengunjungi halaman Anda lagi Anda dapat melihat ini langsung.

Penanganan kesalahan

Selanjutnya kami akan menyatakan fungsi handleErrors(). Aku membawa ini dari Google contoh kode pada website API mereka. Aku tidak akan pergi ke detail apapun karena itu cukup sederhana.

Ini memiliki panjang if... elseif... else pernyataan yang memeriksa banyak kesalahan jenis dan memperingatkan pengguna jika ada terjadi. Anda dapat mengubah ini jika Anda ingin membuat alert kurang teknis.

Degradable

Sebagai pengembang web yang baik, kita harus memastikan website kami bekerja untuk seperti banyak pengguna mungkin, termasuk orang-orang dengan JavaScript dinonaktifkan. Dalam situasi ini saya memilih untuk mengalihkan mereka dengan JS dinonaktifkan untuk Google Maps dengan pencarian dilakukan sehingga mereka masih mendapatkan arah. Hal ini dilakukan menggunakan PHP untuk mengevaluasi form dan redirect ke Google Maps. Di bagian atas halaman HTML Anda masukkan kode ini:

Pertama kita memiliki pengaturan blok lagi yang hanya memiliki satu variabel untuk mengatur, $TO. Hal ini serupa dengan apa yang kami lakukan di JavaScript untuk toAddress, tetapi kita perlu string yang sama dalam PHP juga. Selanjutnya kita memiliki if pernyataan untuk memeriksa data dikirim yang berarti form disubmit. Sekarang kita ambil nilai form dan menempatkan mereka dalam sebuah string dengan ruang dan menyimpan yang dalam sebuah variabel, $FROM. Kemudian kita menyimpan nilai bahasa $LOC, lebih nanti Variabel $url akan mengadakan string yang mewakili kueri URL ke Google. Perhatikan bahwa kita url-encode nilai-nilai kita sehingga mereka aman perjalanan pada redirect. Baris terakhir dari kode menggunakan PHP header untuk mengarahkan pengguna ke Google.

Opsional: Tambahkan dukungan multi-bahasa

Sebagai sebuah bisnis yang Anda inginkan untuk menjangkau orang sebanyak mungkin dan bagian dari proses itu adalah mendukung beberapa bahasa. Dalam Google Maps pendukung bahasa lain datang tanpa tambahan biaya untuk kita.

Pertama buka halaman HTML Anda dan masukkan kode berikut antara tag form Anda.

Tentu saja jika Anda ingin menghapus bahasa apapun hanya menghapus tag pilihan untuk itu, Anda juga dapat mengubah default dengan menggerakkan atribut yang dipilih.

Pindah ke js/application.js, kita perlu untuk perlu membuat dua perubahan. Mulai dalam fungsi overlayDirections() setelah kami membuat string fromAddress menambahkan ini meraih nilai yang dipilih dari kotak Pilih bahasa dan menyimpannya ke variabel bahasa kami.

Selanjutnya, tambahkan argumen ke fungsi gdir.load(), ini membutuhkan set opsi. Dalam kasus kami kita hanya perlu menyatakan locale sehingga tahu bahasa yang tepat dan unit untuk turn-by-turn arah.

Catatan: Kami sudah memasukan dalam PHP redirect dan jika Anda ingin menonaktifkan ini hanya mengatur $LOC.

Kesimpulan

Itulah yang kita butuhkan untuk fitur ini menakjubkan, dan saya berharap Anda belajar sedikit tentang Google Maps sepanjang jalan. Saya menantang Anda sebagai pengembang terus menemukan cara yang menarik untuk mengintegrasikan maps di aplikasi Anda. Kapan saja model adalah location aware, Anda harus menanyakan jika proyek Anda telah digunakan untuk representasi visual pada peta. Terima kasih sudsah membaca; seperti biasa, aku di sini untuk membantu di komentar atau di Twitter (@noahhendrix).


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.