banner 325x300
Tips dan Tutorial

Cara Menampilkan Google Maps di WordPress Tanpa Atau Dengan Plugin

×

Cara Menampilkan Google Maps di WordPress Tanpa Atau Dengan Plugin

Sebarkan artikel ini
Cara Menampilkan Google Maps di WordPress Tanpa Atau Dengan Plugin
Cara Menampilkan Google Maps di WordPress Tanpa Atau Dengan Plugin

CIANJURUPDATE.COM – Untuk memudahkan pengunjung atau pelanggan mengetahui lokasi bisnis, organisasi, perusahaan, dan lai-lain pada website anda, alangkah baiknya jika anda menyertakan lokasi tempat anda atau perusahaan anda berada. Sehingga Anda perlu mengetahui cara menampilkan Google Maps di WordPress.

Maka dari itu, kita perlu menampilkan Google Maps di website WordPress anda. Ada beberapa cara untuk menambahkan lokasi anda di WordPress baik manual amaupun menggunakan plugin. Apalagi jika anda menggunakan plugin yang tepat, anda bahkan dapat membuat peta yang disesuaikan dan interaktif yang menampilkan lokasi fisik anda atau informasi penting lainnya dengan lebih baik.

banner 325x300

Apalagi jika website anda merupakan website berbasis bisnis ataupun milik lembaga pemerintahan. Akses lokasi tentu menjadi prioritas bagi mereka yang ingin mengunjungi bisnis anda secara offline ataupun menyampaikan aspirasi secara langsung pada lembaga pemerintahan.

Cara Menampilkan Google Maps di WordPress

Nah, dalam artikel ini kami kami akan memberikan cara bagaimana menampilkan Google Maps di WordPress. Berikut ini adalah langkah-langkahnya.

Menampilkan Maps Tanpa Plugin:

  • Buka google maps, cari lokasi perusahaan, lembaga pemerintahan, event, dan lain-lain sesuai lokasi anda.
  • Klik share
  • Klik tab Embed a map
  • Pada bagian ini anda dapat menemukan link embed lokasi. Klik COPY HTML untuk menyalin link tersebut. Anda juga bisa mengatur ukuran peta yang ditampilkan di website dengan cara klik menu drop-down bertuliskan Medium di sebelah kiri link embed.
  • Login ke dashboard WordPress lalu klik Edit pages yang akan ditambahkan peta lokasi bisnis.
  • Cari dan pilih custom HTML
  • Pada kotak yang muncul, paste link hasil embed dari Google Maps sebelumnya.
  • Tekan Publish untuk melihat hasilnya

Cara Menampilkan Google Maps di WordPress Menggunakan Plugin atau Software Tambahan:

1. Menggunakan Otter Blocks

  • Tambahkan kunci Google Maps API (teknologi dari google yang digunakan untuk menanamkan Google Map di suatu aplikasi atau website yang tidak dibuat oleh Google) anda ke WordPress.
  • Untuk mendapatkan kunci ini, kunjungi Dasbor Google API. Dengan syarat anda sudah memiliki akun Google. Dengan begitu, anda dapat mengakses dasbor ini tanpa perlu mendaftar apa pun.
  • Di dalam dasbor Google API, pilih tombol Create Project berwarna biru di dekat bagian atas halaman.
  • Pilih Create on the next screen. Kemudian, anda dapat memberi nama untuk proyek anda tersebut.
  • Klik Create once more. Anda akan dibawa kembali ke dasbor, lalu pilih Enable APIs and Service di dekat bagian atas layar dan cari Perpustakaan API untuk “Google Maps JavaScript API”. Setelah anda menemukannya, pilih Enable.
  • Pada layar berikutnya, klik tombol Create Credentials di sudut kanan atas.
  • Kemudian pada halaman berikutnya, pilih Kredensial apa yang saya butuhkan? Anda akan disajikan dengan kunci API, yang sekarang dapat anda salin (copy).
  • Kembali ke situs WordPress anda dan paste kode di Google Maps API Key box.
  • Jangan lupa untuk menyimpan perubahan anda.

2. Menggunakan Easy Google Maps

  • Login ke dashboard WordPress anda. Setelah itu klik menu Plugin > add plugin.
  • Cari google maps, pilih plugin Easy Google Maps lalu install
  • Klik activate plugin Easy Google Maps
  • Klik menu Easy Google Maps > Klik Add Map
  • Tentukan nama Map yang akan dibuat.
  • Isi bagian maps center sesuai lokasi bisnis Anda. Untuk penentuan Latitude dan Longitude dengan cara klik kanan lokasi bisnis Anda di Google Maps, lalu klik Save Maps.
  • Klik tab Marker untuk menambahkan tanda/ikon di Maps website Anda. Isikan Marker Name.
  • Tentukan marker name yang akan ditampilkan pada website anda. Anda juga bisa mengubah jenis icon marker.
  • Isikan Address, Latitude dan Longitude
  • Jika sudah selesai klik Save Marker. Dibawah Save marker akan menampilkan marker yang telah dibuat.
  • Lanjutkan dengan klik menu Easy Google Maps > All Maps
  • Klik edit sesuai nama Map yang sudah dibuat, lalu Copy Map Shortcode
  • Edit pages yang akan digunakan untuk menampilkan peta, kemudian buat block baru shortcode.
  • Paste Map Shortcode yang sudah dicopy sebelumnya.
  • Klik publish untuk melihat hasilnya.

3. Menggunakan Elementor

  • Login ke wp-admin > klik menu page > klik Edit pages yang akan digunakan untuk menampilkan maps
  • Buat section baru untuk meletakkan gambar peta.
  • Cari dan tarik widgets maps ke section yang sudah ditentukan
  • Cari lokasi perusahaan atau bisnis anda dikolom Location.
    Pada widget Google Maps Anda juga dapat menentukan ukuran peta, tinggi peta, efek transisi, posisi, background.
  • Setelah lokasi sesuai, klik Update untuk melihat hasilnya.

Ada hal penting juga jika kita melihat point di atas tentang cara menampilkan maps dengan Otter Blocks. Di sana anda tentu memerlukan Goole Maps API. Nah, berikut ini kami beri tahu juga bagaimana cara mendapatkan Google Maps API.

  • Login ke akun Google lalu akses Google Cloud Platform Console.
  • Klik Activate untuk mengaktifkan Trial Google cloud platform.
  • Tentukan Negara, jenis ogranisasi, dan ceklis Terms of Services, lik Continue.
  • Isi bagian Customer Info sesuai data yang anda miliki, lalu klik Start My Free Trial.
  • Kembali ke dashboard Google Maps di Google Cloud Platform, klik Maps Static API, lalu klik Enable.
  • Klik Overview lalu pilih All Google Maps Platform APIs dan Klik More APIS.
  • Cari dan klik Maps Embed API, klik Enable.
  • Cari dan klik Maps Javascript API, klik Enable.
  • Pada Overview Klik menu Credentials, klik Create credentials, pilih API key.
  • Pada tampilan berikut klik Close, klik Edit API Key yang sudah dibuat.
  • Ceklis Restrict Key lalu Select APIS
  • Ceklis Maps Embed API, Maps Javascript API, Maps Static API lalu klik OK, lalu klik Save
  • Salin API Key yang sudah terbuat ke plugin maps yang digunakan.

Google Maps API ini memudahkan anda untuk memasang lokasi menggunakan plugin-plugin yang ingin anda gunakan di WordPress. Sekian cara menampilkan Google Maps di WordPress. Semoga bermanfaat.

Artikel Terkait

banner 325x300
banner 325x300

Tinggalkan Balasan