7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Creative Coding

Memberikan Arah Mengemudi Kepada Pelanggan Anda dengan API Google Maps

Scroll to top
Read Time: 11 mins

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Daripada hanya menampilkan lokasi bisnis Anda di Google Map, mengapa tidak menawarkan kesempatan kepada pengguna Anda untuk mendapatkan petunjuk arah mengemudi di halaman yang sama? Tidak perlu bagi mereka untuk membuka jendela browser baru dan menemukannya sendiri, kita bisa melakukan lebih baik dari itu!

Menggunakan API Google Maps dalam situs web WordPress Anda adalah proses yang relatif sederhana dan kita akan mengeksplorasi cara melakukannya dalam tutorial ini.

Apa yang Akan Kita Lakukan dalam Tutorial Ini...

  1. Pertama-tama, kita akan menyiapkan beberapa custom options sehingga kita dapat memasukkan informasi tentang peta kita di panel Admin WordPress.
  2. Kemudian kita akan menggunakan shortcode untuk menghasilkan kontainer peta, field input, dan kontainer arah
  3. Akhirnya kita akan menulis beberapa JavaScript untuk memulai Google Map

Catatan: Kita akan menulis sedikit JavaScript di sini, tapi jangan khawatir! Ini adalah tutorial WordPress jadi jangan ragu untuk mengabaikan bagian JavaScript :)


Langkah 1 Buat Direktori dan File

  1. Buat folder di dalam tema Anda yang disebut Map
  2. Di dalam folder ini, buat map.php
  3. Akhirnya buat map.js

Langkah 2 Menyertakan file map.php

Dalam file functions.php Anda (terletak di direktori root tema Anda) - sertakan file map.php yang Anda buat di bagian atas.


Langkah 3 Mendaftar Pengaturan

Ada 3 hal yang ingin kita edit dari area Admin.

  1. Tempat tujuan. Kita akan menggunakan nilai Bujur dan Lintang untuk menentukan lokasi yang tepat dari tujuan Anda (rincian lebih lanjut untuk diikuti)
  2. Konten infoWindow. Ini adalah gelembung putih yang sering Anda lihat di Google Maps - kita ingin dapat mengedit teks dalam gelembungnya!
  3. Tingkat Pembesaran Awal dari peta - seberapa jauh peta diperbesar ketika pengguna pertama kali memuat halaman.

Di map.php, hook ke admin_init untuk mendaftarkan pengaturan kita:

Sekarang kita dapat mengatur teks heading untuk bagian kita di halaman opsi dan semua masukan yang kita butuhkan.

Akhirnya kita menghubungkan ke admin_menu untuk menampilkan pengaturan kita di Admin WordPress:

Pergilah ke area admin Anda, Anda seharusnya sekarang melihat ini:


Langkah 4 Masukkan Tujuan Anda, teks InfoWindow dan Tingkat Pembesaran

  1. Alamat Tujuan

    API Google Maps benar-benar menerima alamat reguler seperti 'Newgate Lane, Mansfield, Nottinghamshire, UK' – Namun, Anda akan menemukan bahwa Anda akan ingin lebih tepat dengan tujuan Anda (misalnya, Anda kemungkinan besar ingin menunjukkan langsung ke bisnis Anda dan bukan hanya jalanannya). Anda dapat menggunakan Sampel API Google Maps V3 untuk mencari tujuan Anda. Seret target ke sekeliling sampai Anda menyematkan titik Anda. Bila Anda senang, salin nilai Lat/Lng: ke dalam field alamat dalam opsi – misalnya 27.52774434830308, 42.18752500000007 (hanya angka yang dipisahkan oleh koma, tanpa tanda kurung atau tanda kutip!)

  2. Teks InfoWindow

    Buat ini sesuka Anda. Nama Bisnis Anda akan menjadi ide yang bagus :)

  3. Tingkat Pembesaran

    Titik awal yang baik adalah 10.

Klik 'Save Changes' dan ketika halaman disegarkan Anda dapat memeriksa bahwa info telah disimpan. Seharusnya terlihat seperti ini sekarang:


Langkah 5 Mengatur Shortcode

Ketika kita selesai, kita akan memiliki 3 elemen: Map, Form, dan Directions – jadi dalam tutorial ini saya memutuskan untuk membaginya menjadi 3 shortcode yang terpisah. Ini akan memungkinkan kita untuk mengubah urutan/penempatan setiap item tanpa harus memodifikasi salah satu kode PHP kita. Misalnya, Anda dapat memutuskan untuk memiliki petunjuk di atas peta, bukan di bawah, atau di samping, dll.

  1. Shortcode 1 : wpmap_map

    Di sini kita mendaftarkan dan memasukkan file JavasScript API Google Maps serta file maps.js kita sendiri.

    Selanjutnya kita menggunakan variabel $output untuk menyimpan div map-container bersama dengan beberapa atribut data kustom. (data-map-infowindow akan menyimpan konten untuk infowindow dan data-map-zoom akan mewakili tingkat pembesaran awal – kedua nilai ini dikembalikan menggunakan fungsi get_option WordPress).

    Akhirnya kita mengembalikan HTML yang dihasilkan menjadi keluaran:

  2. Shortcode 2 : wpmap_directions_container

    Di sini kita hanya mengembalikan div kosong dengan ID dir-container. Ini akan bertindak sebagai kontainer untuk arah.

  3. Shortcode 3 : wpmap_directions_input

    Ini menghasilkan Markup yang diperlukan untuk formulir kita.

    Ini juga tempat kita akan menetapkan opsi kustom akhir kita – Alamat tujuan. Kali ini, kita akan menggunakan field formulir tersembunyi untuk menyimpan nilai Lintang/Bujur yang kita masukkan sebelumnya di Panel Admin.

Sekarang kita memiliki shortcode yang sudah disiapkan, Anda dapat melanjutkan dan mengetikkannya ke halaman Contact Us (atau halaman apa pun yang Anda suka).

Jika Anda melihat pratinjau halaman sekarang, semua yang akan Anda lihat adalah field masukan formulir. Itu karena kita belum menulis JavaScript kita yang akan menginisialisasi Peta dan div untuk petunjuk arah saat ini kosong.

Catatan: Sebelum kita masuk ke JavaScript, kita hanya perlu menambahkan ini ke style.css kita:


Langkah 7 Menulis JavaScript untuk Berinteraksi dengan API Google Maps

Sekarang saatnya untuk membuat keajaiban terjadi! Saya akan memberikan perincian singkat tentang apa yang akan kita lakukan pertama kali, kemudian kita akan menggali langsung ke kodenya.

  1. Pertama kita akan membuat objek WMmap dan menetapkan properti-properti kepadanya (beberapa di antaranya akan kita raih dari markup yang kita buat di shortcode)
  2. Kemudian kita akan menambahkan beberapa metode untuk menangani fungsi peta dan arah.
  3. Salah satu metode ini, init, akan bertanggung jawab untuk memuat peta dan juga untuk mengatur beberapa nilai default seperti teks infoWindow, tingkat pembesaran dan posisi penanda awal (semua dari opsi WordPress)
  4. Akhirnya kita akan mengatur event listener untuk memuat peta kita ketika halaman sudah siap.

Siap?

Saya akan menjelaskan setiap bagian dari kode selangkah demi selangkah, tetapi jangan khawatir jika Anda tersesat, kami akan menyatukan semuanya di akhir.

Menetapkan Properti

Mari buat objek kita dan atur beberapa properti. Di sini kita hanya meminta DOM untuk mengambil elemen HTML yang berisi nilai yang kita butuhkan. Nama properti yang kita gunakan harus sangat jelas dan cukup jelas (mapContainer jelas adalah Map Container, dll :))

Di sini kita juga mendapatkan beberapa objek dari API yang akan kita gunakan nanti ketika kita berurusan dengan Directions.

Metode-metode

Ini juga merupakan bagian dari objek WPmap kita, jika Anda tidak yakin bagaimana semuanya berhubungan bersama, pastikan untuk memeriksa bagian bawah tutorial ini untuk melihat semua kode bersama-sama.

showDirections()

Ini dipanggil dari dalam metode lain yang akan kita lihat nanti, pada dasarnya mengontrol penyisipan petunjuk ke halaman.

getStartLatLng()

Ini dipanggil sekali dari metode init kita. Ini akan mengatur properti startLatLng sama dengan objek google.maps.LatLng yang bisa kita gunakan nanti. Ini mengharuskan kita memberikannya nilai Lintang dan Bujur terpisah – bagaimana kita dapat melakukan ini?

  1. Dalam shortcode kita, kita menyisipkan field formulir tersembunyi yang berisi nilai Lintang & Bujur yang kita tetapkan di Admin WordPress. Lalu kita mengambil field formulir tersembunyi dan menyimpannya di toInput. Ini berarti kita sekarang dapat mengakses nilainya menggunakan WPmap.toInput.value
  2. Namun, nilai yang kita tetapkan dalam formulir hanyalah string dengan koma yang memisahkan angkanya. Untuk memisahkan nilai, kita dapat membagi string menggunakan .split(","). Ini akan mengembalikan array yang berisi Garis Lintang dan Bujur sebagai nilai terpisah.
  3. Sekarang kita dapat mengakses masing-masing dengan menggunakan indeks array.

getSelectedUnitSystem()

Karena kita telah mengizinkan pengguna kita untuk memilih apakah mereka akan lebih memilih arah di Metrik atau Imperial, kita menggunakan metode ini untuk mengatur DirectionsUnitSystem baik ke METRIC atau IMPERIAL.

getDirections()

Ini adalah metode yang dipanggil ketika pengguna mengklik tombol Get Directions.

  1. Pertama kita mendapatkan alamat yang dimasukkan pengguna dan menyimpannya di variabel fromStr.
  2. Selanjutnya kita mengatur objek opsi – dirRequest. Ini akan berisi opsi yang diperlukan untuk menyediakan Driving Directions.
    1. origin – Alamat yang dimasukkan pengguna.
    2. destination – Objek google.maps.LatLng yang mengandung nilai Lintang dan Bujur dari tujuan Anda.
    3. travelMode – Di sini kita memastikan kita hanya mengambil Driving Directions.
    4. unitSystem – Menentukan unit pengukuran mana yang akan digunakan berdasarkan pilihan pengguna.
  3. Akhirnya, kita memanggil WPmap.dirService.route – dan mengirimkan dua parameter ke dalamnya:
    1. dirRequest – ini adalah objek yang berisi opsi kita.
    2. WPmap.showDirections – fungsi callback yang menangani penempatan petunjuk arah ke halaman.

init()

Ini adalah metode yang dipanggil ketika halaman dimuat. Ini bertanggung jawab untuk:

  1. Inisiasi peta, berpusat pada alamat Anda.
  2. Mengambil nilai-nilai yang diperlukan untuk mengatur teks infoWindow dan tingkat Zoom awal.
  3. Mengatur pin penanda menunjukkan alamat Anda.
  4. Mendengarkan ketika pengguna mengklik 'Get Directions' sehingga dapat menghapus Marker awal dan infoWindow

** Pilihan **

Jika Anda ingin menampilkan pesan yang bagus (seperti yang terlihat di bawah) kepada pengguna Anda setelah mereka meminta petunjuk, cukup salin kode di bawah gambar ke event listener di dalam metode init.

Pesan Terima Kasih opsional:


Langkah 8 Menambahkan Event Listener yang Akan Memuat Peta

Apakah Anda masih dengan saya? Kita telah berhasil sampai akhir sekarang dan yang tersisa adalah memanggil metode WPmap.init() saat halaman dimuat. Tambahkan ini ke bagian bawah map.js


Menempatkan Semua JavaScript Bersama

Kita telah membahas banyak hal di sini, jadi mari kita lihat bagaimana tampilannya ketika semuanya disatukan.


Catatan Tutorial

  1. Pastikan untuk meneliti apa pun yang tidak Anda pahami di Situs Web API Google Maps
  2. Saat menulis tutorial ini, saya menguji kode saya menggunakan TwentyEleven WordPress Theme bawaan. Sesuatu menyebabkan panah di bagian bawah InfoWindow di peta untuk ditampilkan dengan tidak benar. Itu karena .entry-content img pada baris 857 memiliki satu set max-width. Ini mengacaukan cara Google membuat infoWindow. Untuk memperbaikinya, masukkan ini di suatu tempat di bawah ini:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.