{"id":28493,"date":"2022-04-26T09:28:49","date_gmt":"2022-04-26T02:28:49","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=28493"},"modified":"2022-04-26T09:45:29","modified_gmt":"2022-04-26T02:45:29","slug":"cara-menampilkan-google-maps-di-wordpress","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cara-menampilkan-google-maps-di-wordpress\/","title":{"rendered":"Cara Menampilkan Google Maps di WordPress"},"content":{"rendered":"\n

Seperti yang kita ketahui, saat ini maps banyak ditemukan pada website dan di aplikasi toko online. Hal ini membuat maps menjadi salah satu hal yang penting dari sebuah website, terutama bagi website yang digunakan untuk bisnis. Karenanya, pada panduan ini kami akan berbagi cara menampilkan Google Maps di WordPress.<\/p>\n\n\n\n\n\n

Dengan adanya maps atau peta lokasi toko anda di website, maka itu akan memudahkan customer untuk menemukan toko offline anda. Tidak hanya itu, maps juga akan meningkatkan kepercayaan customer anda karena mereka tahu bahwa toko oline anda exist<\/em>. <\/p>\n\n\n\n

Pada panduan ini kami akan menjelaskan pentingnya Maps dari Website dan cara memasang Maps di WordPress.<\/p>\n\n\n\n

Pentingnya Maps Dari Website<\/h2>\n\n\n\n

Selain memudahkan customer dalam mengetahui lokasi, berikut alasan pentingnya maps dari sebuah website :<\/p>\n\n\n\n

1. Meningkatkan kredibilitas bisnis Anda<\/strong><\/p>\n\n\n\n

Para customer tentu penasaran dengan lokasi dari suatu bisnis dan ingin memastikan kredibilitas dari bisnis tersebut. Dengan ditampilkannnya lokasi bisnis, customer akan merasa lebih yakin jika ingin melakukan transaksi dengan bisnis tersebut.<\/p>\n\n\n\n

2. Mempermudah Konsumen Menemukan Lokasi Bisnis Anda<\/strong><\/p>\n\n\n\n

Pencantuman alamat bisnis\/toko saja tidak cukup. Anda perlu membuat customer mudah dalam menemukan lokasi toko Anda terutama jika memiliki toko fisik. <\/p>\n\n\n\n

Pastikan Anda memberi informasi lokasi yang tepat, sehingga customer bisa mengunjungi toko fisik Anda dengan cara memanfaatkan Google Maps. Google maps memungkinkan pembacanya dapat dengan mudah menuju titik lokasi yang akan dituju.<\/p>\n\n\n\n

3. Meningkatkan waktu kunjungan di Website Anda<\/strong><\/p>\n\n\n\n

Dengan ditampilkannya Google Maps pada website, pengunjung menjadi lebih lama dalam mengakses website Anda. Hal ini karena pengunjung tidak perlu membuka tab baru untuk sekedar mencari lokasi bisnis Anda.<\/p>\n\n\n\n

Semakin lamanya pengunjung mengakses web Anda, hal itu akan menguntungkan karena akan meningkatkan ranking website Anda dimesin pencarian.<\/p>\n\n\n\n

Memasang Google Maps di WordPress<\/h2>\n\n\n\n

Pada panduan ini, kami akan menjelaskan cara memasang Google Maps di WordPress melalui 2 cara yaitu tanpa plugin dengan konsep embed, dan dengan plugin elementor. Berikut langkah-langkahnya :<\/p>\n\n\n\n

1. Memasang Google Maps di WordPress tanpa Plugin<\/h3>\n\n\n\n
  1. Buka google maps, cari lokasi bisnis Anda<\/li>
  2. Klik share<\/li><\/ol>\n\n\n\n
    \"embed<\/a><\/figure><\/div>\n\n\n\n
    1. Klik tab Embed a map<\/li><\/ol>\n\n\n\n

      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.<\/p>\n\n\n\n

      \"embed<\/a><\/figure>\n\n\n\n
      1. Login ke dashboard WordPress lalu klik Edit pages yang akan ditambahkan peta lokasi bisnis. Contoh dipanduan ini di page Kunjungi Kami.<\/li><\/ol>\n\n\n\n
        \"Edit<\/a><\/figure>\n\n\n\n
        1. Klik Add Block<\/li><\/ol>\n\n\n\n
          \"Edit<\/a><\/figure>\n\n\n\n
          1. Cari dan pilih custom HTML<\/li><\/ol>\n\n\n\n
            \"Edit<\/a><\/figure><\/div>\n\n\n\n
            1. Pada kotak yang muncul, paste link hasil embed dari Google Maps sebelumnya.<\/li>
            2. Tekan Publish untuk melihat hasilnya<\/li><\/ol>\n\n\n\n
              \"Edit<\/a><\/figure><\/div>\n\n\n\n

              Berikut tampilan maps hasil dari embed dari Google Maps.<\/p>\n\n\n\n

              \"pages<\/a><\/figure><\/div>\n\n\n\n

              2. Menambahkan Maps dengan Plugin Elementor<\/h3>\n\n\n\n
              1. Login ke wp-admin Anda > klik menu page > klik Edit pages yang akan digunakan untuk menampilkan maps. Contoh dipanduan ini di page homeku.<\/li><\/ol>\n\n\n\n
                \"Edit<\/a><\/figure>\n\n\n\n
                1. Buat section baru untuk meletakkan gambar peta.<\/li>
                2. Cari dan tarik widgets maps ke section yang sudah ditentukan<\/li><\/ol>\n\n\n\n
                  \"Edit<\/a><\/figure><\/div>\n\n\n\n
                  1. Cari lokasi bisnis Anda dikolom Location.
                    Pada widget Google Maps Anda juga dapat menentukan ukuran peta, tinggi peta, efek transisi, posisi, background.<\/li>
                  2. Setelah lokasi sesuai, klik Update untuk melihat hasilnya.<\/li><\/ol>\n\n\n\n
                    \"contoh<\/a><\/figure><\/div>\n\n\n\n

                    Berikut adalah tampilan website dengan Maps yang sudah dibuat.<\/p>\n\n\n\n

                    \"pages<\/a><\/figure>\n\n\n\n

                    3. Menambahkan Maps dengan Plugin Easy Google Maps<\/h3>\n\n\n\n
                    1. Login ke dashboard WordPress Anda. Setelah itu klik menu Plugin > add plugin. <\/li>
                    2. Cari google maps, pilih plugin Easy Google Maps lalu install<\/li><\/ol>\n\n\n\n
                      \"install<\/a><\/figure>\n\n\n\n
                      1. Klik activate plugin Easy Google Maps<\/li><\/ol>\n\n\n\n
                        \"plugin<\/a><\/figure>\n\n\n\n
                        1. Klik menu Easy Google Maps > Klik Add Map<\/li><\/ol>\n\n\n\n
                          \"seting<\/a><\/figure>\n\n\n\n
                          1. Tentukan nama Map yang akan dibuat.<\/li><\/ol>\n\n\n\n
                            \"seting<\/a><\/figure>\n\n\n\n
                            1. Isi bagian map center sesuai lokasi bisnis Anda. Untuk penentuan Latitude dan Longitude dengan cara klik kanan lokasi bisnis Anda di Google Maps.<\/li><\/ol>\n\n\n\n
                              \"seting<\/a><\/figure>\n\n\n\n
                              1. Klik Save Map<\/li><\/ol>\n\n\n\n
                                \"seting<\/a><\/figure>\n\n\n\n
                                1. Klik tab Marker untuk menambahkan tanda\/ikon di Maps website Anda. Isikan Marker Name.<\/li>
                                2. Tentukan marker name yang akan ditampilkan pada website Anda. Anda juga bisa mengubah jenis icon marker.<\/li><\/ol>\n\n\n\n
                                  \"seting<\/a><\/figure>\n\n\n\n
                                  1. Isikan Address, Latitude dan Longitude<\/li><\/ol>\n\n\n\n
                                    \"seting<\/a><\/figure>\n\n\n\n
                                    1. Jika sudah selesai klik Save Marker. Dibawah Save marker akan menampilkan marker yang telah dibuat.<\/li><\/ol>\n\n\n\n
                                      \"seting<\/a><\/figure>\n\n\n\n
                                      1. Lanjutkan dengan klik menu Easy Google Maps > All Maps<\/li><\/ol>\n\n\n\n
                                        \"seting<\/a><\/figure>\n\n\n\n
                                        1. Klik edit sesuai nama Map yang sudah dibuat<\/li><\/ol>\n\n\n\n
                                          \"seting<\/a><\/figure>\n\n\n\n
                                          1. Copy Map Shortcode<\/li><\/ol>\n\n\n\n
                                            \"seting<\/a><\/figure>\n\n\n\n
                                            1. Edit pages yang akan digunakan untuk menampilkan peta. Contoh dipanduan ini di page home<\/li><\/ol>\n\n\n\n
                                              \"seting<\/a><\/figure>\n\n\n\n
                                              1. Buat block baru shortcode.<\/li><\/ol>\n\n\n\n
                                                \"seting<\/a><\/figure>\n\n\n\n
                                                1. Paste Map Shortcode yang sudah dicopy sebelumnya. <\/li>
                                                2. Klik publish untuk melihat hasilnya.<\/li><\/ol>\n\n\n\n
                                                  \"seting<\/a><\/figure>\n\n\n\n

                                                  Berikut adalah tampilan website dengan Maps yang sudah dibuat.<\/p>\n\n\n\n

                                                  \"seting<\/a><\/figure>\n\n\n\n

                                                  Seperti yang terlihat, saat penggunaan Plugin Maps dijumpai Warning pada Maps “This page can\u2019t load Google Maps correctly\u201d. Solusi dari Warning tersebut adalah dengan menambahkan Google Maps API.<\/p>\n\n\n\n

                                                  Cara Mendapatkan Google Maps API<\/h2>\n\n\n\n

                                                  Berikut kami informasikan langkah-langkah mendapatkan Google Maps API:<\/p>\n\n\n\n

                                                  1. Login ke akun Google lalu akses Google Cloud Platform Console<\/a><\/p>\n\n\n\n

                                                  2. Klik Activate untuk mengaktifkan Trial Google cloud platform<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure>\n\n\n\n

                                                  3. Tentukan Negara, jenis ogranisasi, dan ceklis Terms of Services<\/p>\n\n\n\n

                                                  4. Klik Continue<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure>\n\n\n\n

                                                  5. Isi bagian Customer Info sesuai data yang Anda miliki<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  6. Klik Start My Free Trial<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  7. Kembali ke dashboard Google Maps di Google Cloud Platform, lalu klik Maps Static API<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  8. Klik Enable<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  9. Klik Overview lalu pilih All Google Maps Platform APIs<\/p>\n\n\n\n

                                                  10. Klik More APIS<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  11. Cari dan klik Maps Embed API<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  12. Klik Enable<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  13. Cari dan klik Maps Javascript API<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  14. Klik Enable<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  15. Pada Overview Klik menu Credentials<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  16. Klik Create credentials, pilih API key<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  17. Pada tampilan berikut klik Close<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  18. Klik Edit API Key yang sudah dibuat<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure>\n\n\n\n

                                                  19. Ceklis Restrict Key lalu Select APIS<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  20. Ceklis Maps Embed API, Maps Javascript API, Maps Static API lalu klik OK<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  21. Klik Save<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure><\/div>\n\n\n\n

                                                  22. Salin API Key yang sudah terbuat ke plugin maps yang digunakan.<\/p>\n\n\n\n

                                                  \"Cara<\/a><\/figure>\n\n\n\n

                                                  Cara Memasang MAPS API di Plugin Easy Google Maps<\/h2>\n\n\n\n

                                                  Setelah berhasil mendapatkan Maps API, lanjutkan pemasangan API di Plugin yang digunakan.<\/p>\n\n\n\n

                                                  1. Klik menu Plugin Easy Google Maps > Settings<\/li><\/ol>\n\n\n\n
                                                    \"memasang<\/a><\/figure><\/div>\n\n\n\n
                                                    1. Paste Maps API dari Google Cloud Platform dibagian User API Key. Lalu Klik Save.<\/li><\/ol>\n\n\n\n
                                                      \"memasang<\/a><\/figure><\/div>\n\n\n\n

                                                      3. Akses kembali website yang terpasang maps. Berikut adalah tampilannya.<\/p>\n\n\n\n

                                                      \"tampilan<\/a><\/figure>\n\n\n\n

                                                      Demikian panduan cara menampilkan Google Maps di WordPress. Mudah kan cara membuatnya? Selamat mencoba!<\/p>\n","protected":false},"excerpt":{"rendered":"

                                                      Seperti yang kita ketahui, saat ini maps banyak ditemukan pada website dan di aplikasi toko online. Hal ini membuat maps menjadi salah satu hal yang penting dari sebuah website, terutama bagi website yang digunakan untuk bisnis. Karenanya, pada panduan ini kami akan berbagi cara menampilkan Google Maps di WordPress. Dengan adanya maps atau peta lokasi […]<\/p>\n","protected":false},"author":342,"featured_media":28494,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[463],"tags":[1769,95,14],"class_list":{"0":"post-28493","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-wordpress","8":"tag-google-maps","9":"tag-tutorial","10":"tag-wordpress"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2022\/04\/Cara-menampilkan-Google-Maps-di-WordPress.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-7pz","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/28493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/342"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=28493"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/28493\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/28494"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=28493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=28493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=28493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}