{"id":28254,"date":"2025-11-06T06:45:02","date_gmt":"2025-11-06T06:45:02","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=28254"},"modified":"2025-11-06T06:45:02","modified_gmt":"2025-11-06T06:45:02","slug":"cara-mudah-memasang-google-maps-di-wordpress","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress","title":{"rendered":"Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis"},"content":{"rendered":"<p><span class=\"suggestion_paragraphs result__para__0\" data-para=\"result__para__0\">Seperti yang kita ketahui, saat ini maps banyak tersedia di situs web dan aplikasi belanja daring. <\/span><span class=\"suggestion_paragraphs result__para__1\" data-para=\"result__para__1\">Hal ini menjadikan peta elemen krusial untuk suatu situs, terutama bagi yang ditujukan untuk tujuan bisnis. <\/span><span class=\"suggestion_paragraphs result__para__2\" data-para=\"result__para__2\"> Oleh karena itu, dalam panduan ini, kami akan menjelaskan cara menampilkan Google Maps di platform WordPress.<\/span><\/p>\n<p><span class=\"suggestion_paragraphs result__para__3\" data-para=\"result__para__3\"> Dengan adanya peta yang menunjukkan lokasi toko Anda di situs, akan lebih mudah bagi pelanggan untuk menemukan toko fisik Anda. <\/span><span class=\"suggestion_paragraphs result__para__4\" data-para=\"result__para__4\"> Selain itu, peta juga dapat meningkatkan kepercayaan pelanggan karena mereka menyadari keberadaan toko online Anda. <\/span><span class=\"suggestion_paragraphs result__para__5\" data-para=\"result__para__5\"> Dalam panduan ini, kami akan membahas signifikansi peta pada situs web dan langkah-langkah untuk menambahkan peta di WordPress.<\/span><\/p>\n<h3 class=\"wp-block-heading\"><span id=\"Pentingnya_Maps_Dari_Website\">Pentingnya Maps Dari Website<\/span><\/h3>\n<p>Berikut beberapa alasan yang bisa kamu pahami mengapa Maps di website itu penting:<\/p>\n<ul>\n<li data-start=\"190\" data-end=\"247\"><strong data-start=\"197\" data-end=\"247\">Mempermudah Pengunjung Menemukan Lokasi Bisnis<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 40px\" data-start=\"248\" data-end=\"563\">Peta (Google Maps) membantu pengunjung mengetahui di mana lokasi bisnis kamu berada dengan jelas dan akurat. Dengan satu klik, mereka bisa langsung melihat arah menuju lokasi tanpa perlu mencari manual di aplikasi lain. Ini sangat penting untuk bisnis seperti toko, kafe, salon, klinik, atau kantor layanan.<\/p>\n<ul>\n<li data-start=\"570\" data-end=\"616\"><strong data-start=\"577\" data-end=\"616\">Meningkatkan Kepercayaan Pengunjung<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 40px\" data-start=\"617\" data-end=\"870\">Website yang mencantumkan Maps terlihat lebih profesional dan terpercaya. Pengunjung akan merasa yakin bahwa bisnis tersebut benar-benar ada secara fisik, bukan sekadar online. Hal ini bisa meningkatkan rasa aman dan kepercayaan calon pelanggan.<\/p>\n<ul>\n<li data-start=\"877\" data-end=\"928\"><strong data-start=\"884\" data-end=\"928\">Mendukung Strategi SEO Lokal (Local SEO)<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 40px\" data-start=\"929\" data-end=\"1197\">Google akan lebih mudah menampilkan websitemu di hasil pencarian lokal (misalnya: \u201csalon terdekat\u201d atau \u201ctoko kue di Jakarta\u201d) jika kamu menambahkan Google Maps dan alamat yang valid. Artinya, Maps bisa bantu websitemu muncul di hasil pencarian lokal lebih tinggi.<\/p>\n<ul>\n<li data-start=\"1204\" data-end=\"1257\"><strong data-start=\"1211\" data-end=\"1257\">Memudahkan Interaksi dan Kunjungan Offline<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 40px\" data-start=\"1258\" data-end=\"1485\">Dengan fitur Maps, pengunjung bisa langsung melihat rute perjalanan, estimasi waktu tempuh, dan opsi transportasi. Ini mempermudah pelanggan untuk langsung datang ke lokasi bisnismu tanpa repot mencari alamat secara manual.<\/p>\n<ul>\n<li data-start=\"1492\" data-end=\"1553\"><strong data-start=\"1499\" data-end=\"1553\">Meningkatkan Pengalaman Pengguna (User Experience)<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 40px\" data-start=\"1554\" data-end=\"1760\">Menampilkan Maps di halaman \u201cKontak\u201d atau \u201cTentang Kami\u201d membuat tampilan website lebih interaktif dan informatif. Pengguna tidak hanya membaca alamat, tapi juga melihat peta visual yang mudah dipahami.<\/p>\n<ul>\n<li data-start=\"1767\" data-end=\"1807\"><strong data-start=\"1774\" data-end=\"1807\">Mendukung Keputusan Pembelian<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 40px\" data-start=\"1808\" data-end=\"2016\">Bagi bisnis fisik, kejelasan lokasi bisa menjadi faktor penting dalam keputusan pembelian. Misalnya, pelanggan akan lebih memilih toko yang lokasinya mudah ditemukan dan dekat dengan tempat mereka berada.<\/p>\n<ul>\n<li data-start=\"2023\" data-end=\"2066\"><strong data-start=\"2030\" data-end=\"2066\">Memberi Nilai Tambah untuk Brand<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 40px\" data-start=\"2067\" data-end=\"2279\">Dengan tampilan Maps yang terintegrasi, website tampak lebih modern dan profesional. Ini memberi kesan bahwa bisnismu serius, transparan, dan mudah diakses, yang bisa menambah nilai positif untuk brand image.<\/p>\n<h3 data-start=\"582\" data-end=\"645\"><strong data-start=\"588\" data-end=\"645\">Cara untuk Memasang Google Maps di WordPress<\/strong><\/h3>\n<p data-start=\"646\" data-end=\"707\">Kamu bisa memilih sesuai kebutuhan dan tingkat kemudahan:<\/p>\n<h4 data-start=\"714\" data-end=\"790\"><strong data-start=\"721\" data-end=\"790\">A. Cara Termudah \u2013 Menggunakan Embed (Kode HTML dari Google Maps)<\/strong><\/h4>\n<p data-start=\"791\" data-end=\"884\">Cocok kalau kamu hanya ingin menampilkan peta statis di halaman \u201cKontak\u201d atau \u201cTentang Kami\u201d.<\/p>\n<p data-start=\"886\" data-end=\"907\"><em>Langkah-langkah:<\/em><\/p>\n<ol data-start=\"908\" data-end=\"1392\">\n<li data-start=\"908\" data-end=\"986\">\n<p data-start=\"911\" data-end=\"986\">Buka Google Maps \u2192 https:\/\/maps.google.com<\/p>\n<\/li>\n<li data-start=\"987\" data-end=\"1046\">\n<p data-start=\"990\" data-end=\"1046\">Cari alamat atau lokasi yang ingin kamu tampilkan.<\/p>\n<\/li>\n<li data-start=\"1047\" data-end=\"1084\">\n<p data-start=\"1050\" data-end=\"1084\">Klik tombol Share (Bagikan).<\/p>\n<\/li>\n<li data-start=\"1085\" data-end=\"1132\">\n<p data-start=\"1088\" data-end=\"1132\">Pilih tab Embed a map (Sematkan peta).<\/p>\n<\/li>\n<li data-start=\"1133\" data-end=\"1177\">\n<p data-start=\"1136\" data-end=\"1177\">Pilih ukuran peta \u2192 klik Copy HTML.<\/p>\n<\/li>\n<li data-start=\"1178\" data-end=\"1281\">\n<p data-start=\"1181\" data-end=\"1281\">Masuk ke WordPress Dashboard \u2192 buka halaman atau postingan tempat kamu ingin menampilkan peta.<\/p>\n<\/li>\n<li data-start=\"1282\" data-end=\"1354\">\n<p data-start=\"1285\" data-end=\"1354\">Tambahkan blok Custom HTML \u2192 <em data-start=\"1318\" data-end=\"1325\">Paste<\/em> kode yang kamu salin tadi.<\/p>\n<\/li>\n<li data-start=\"1355\" data-end=\"1392\">\n<p data-start=\"1358\" data-end=\"1392\">Simpan dan Preview hasilnya.<\/p>\n<\/li>\n<\/ol>\n<blockquote>\n<p data-start=\"1394\" data-end=\"1511\"><em><strong data-start=\"1397\" data-end=\"1405\">Tips<\/strong>:<\/em><br data-start=\"1406\" data-end=\"1409\" \/><em>Agar peta responsif (menyesuaikan ukuran layar HP), tambahkan kode CSS berikut di Custom CSS tema:<\/em><\/p>\n<\/blockquote>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\"><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-css\"><span class=\"hljs-selector-class\">.map-responsive<\/span> {<br \/>\n  <span class=\"hljs-attribute\">position<\/span>: relative;<br \/>\n  <span class=\"hljs-attribute\">padding-bottom<\/span>: <span class=\"hljs-number\">56.25%<\/span>; <span class=\"hljs-comment\">\/* Rasio 16:9 *\/<\/span><br \/>\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">0<\/span>;<br \/>\n  <span class=\"hljs-attribute\">overflow<\/span>: hidden;<br \/>\n}<br \/>\n<span class=\"hljs-selector-class\">.map-responsive<\/span> <span class=\"hljs-selector-tag\">iframe<\/span> {<br \/>\n  <span class=\"hljs-attribute\">position<\/span>: absolute;<br \/>\n  <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">0<\/span>;<br \/>\n  <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">0<\/span>;<br \/>\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;<br \/>\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;<br \/>\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">0<\/span>;<br \/>\n}<br \/>\n<\/code><\/div>\n<\/div>\n<p data-start=\"1755\" data-end=\"1791\">Lalu bungkus iframe kamu dengan div:<\/p>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\"><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span><\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-responsive\"<\/span>&gt;<br \/>\n  <span class=\"hljs-comment\">&lt;!-- paste iframe dari Google Maps di sini --&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span><\/span>&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<h4 data-start=\"1895\" data-end=\"1964\"><strong data-start=\"1902\" data-end=\"1964\">B. Menggunakan Plugin Google Maps (Praktis &amp; Banyak Fitur)<\/strong><\/h4>\n<p data-start=\"1965\" data-end=\"2055\">Kalau kamu ingin peta lebih interaktif, bisa tambahkan marker, warna, dan info bisnis.<\/p>\n<p data-start=\"2057\" data-end=\"2089\">Rekomendasi Plugin Terbaik:<\/p>\n<ul data-start=\"2090\" data-end=\"2198\">\n<li data-start=\"2090\" data-end=\"2112\">\n<p data-start=\"2092\" data-end=\"2112\">WP Google Maps<\/p>\n<\/li>\n<li data-start=\"2113\" data-end=\"2137\">\n<p data-start=\"2115\" data-end=\"2137\">Easy Google Maps<\/p>\n<\/li>\n<li data-start=\"2138\" data-end=\"2173\">\n<p data-start=\"2140\" data-end=\"2173\">MapPress Maps for WordPress<\/p>\n<\/li>\n<li data-start=\"2174\" data-end=\"2198\">\n<p data-start=\"2176\" data-end=\"2198\">Google Maps Widget<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"2200\" data-end=\"2251\"><em>Langkah-langkah (contoh pakai WP Google Maps):<\/em><\/p>\n<ol data-start=\"2252\" data-end=\"2873\">\n<li data-start=\"2252\" data-end=\"2310\">\n<p data-start=\"2255\" data-end=\"2310\">Masuk ke Dashboard WordPress \u2192 Plugins \u2192 Add New.<\/p>\n<\/li>\n<li data-start=\"2311\" data-end=\"2378\">\n<p data-start=\"2314\" data-end=\"2378\">Cari WP Google Maps \u2192 klik Install Now \u2192 Activate.<\/p>\n<\/li>\n<li data-start=\"2379\" data-end=\"2424\">\n<p data-start=\"2382\" data-end=\"2424\">Setelah aktif, buka Maps \u2192 Settings.<\/p>\n<\/li>\n<li data-start=\"2425\" data-end=\"2589\">\n<p data-start=\"2428\" data-end=\"2479\">Masukkan Google Maps API Key (kalau diminta).<\/p>\n<ul data-start=\"2483\" data-end=\"2589\">\n<li data-start=\"2483\" data-end=\"2589\">\n<p data-start=\"2485\" data-end=\"2589\">Jika belum punya API Key, kamu bisa buat di Google Cloud Console.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"2590\" data-end=\"2651\">\n<p data-start=\"2593\" data-end=\"2651\">Klik Add New Map \u2192 isi nama, lokasi, dan zoom level.<\/p>\n<\/li>\n<li data-start=\"2652\" data-end=\"2733\">\n<p data-start=\"2655\" data-end=\"2733\">Simpan, lalu salin shortcode yang diberikan (contoh: <code data-start=\"2712\" data-end=\"2729\">[wpgmza id=\"1\"]<\/code>).<\/p>\n<\/li>\n<li data-start=\"2734\" data-end=\"2821\">\n<p data-start=\"2737\" data-end=\"2821\">Tempel shortcode itu di halaman atau postingan tempat kamu ingin menampilkan peta.<\/p>\n<\/li>\n<li data-start=\"2822\" data-end=\"2873\">\n<p data-start=\"2825\" data-end=\"2873\">Klik Update\/Publish dan lihat hasilnya.<\/p>\n<\/li>\n<\/ol>\n<h4 data-start=\"2880\" data-end=\"2945\"><strong data-start=\"2887\" data-end=\"2945\">C. Cara Developer \u2013 Menggunakan Google Maps API Manual<\/strong><\/h4>\n<p data-start=\"2946\" data-end=\"3007\">Untuk kamu yang ingin tampilan custom dan integrasi lanjutan.<\/p>\n<p data-start=\"3009\" data-end=\"3038\"><em>Langkah-langkah singkat:<\/em><\/p>\n<ol data-start=\"3039\" data-end=\"3307\">\n<li data-start=\"3039\" data-end=\"3246\">\n<p data-start=\"3042\" data-end=\"3140\">Dapatkan Google Maps API Key dari Google Cloud Console.<\/p>\n<ul data-start=\"3144\" data-end=\"3246\">\n<li data-start=\"3144\" data-end=\"3181\">\n<p data-start=\"3146\" data-end=\"3181\">Aktifkan Maps JavaScript API.<\/p>\n<\/li>\n<li data-start=\"3185\" data-end=\"3246\">\n<p data-start=\"3187\" data-end=\"3246\">Aktifkan billing (Google kasih kredit gratis $200\/bulan).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"3247\" data-end=\"3307\">\n<p data-start=\"3250\" data-end=\"3307\">Masukkan kode berikut ke halaman atau template WordPress:<\/p>\n<\/li>\n<\/ol>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\"><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span><\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"map\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"height: 400px; width: 100%;\"<\/span>&gt;<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span><\/span>&gt;<\/p>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">initMap<\/span>() {<br \/>\n  <span class=\"hljs-keyword\">var<\/span> lokasi = { <span class=\"hljs-attr\">lat<\/span>: -<span class=\"hljs-number\">6.200000<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">106.816666<\/span> }; <span class=\"hljs-comment\">\/\/ Ganti dengan koordinatmu<\/span><br \/>\n  <span class=\"hljs-keyword\">var<\/span> map = <span class=\"hljs-keyword\">new<\/span> google.<span class=\"hljs-property\">maps<\/span>.<span class=\"hljs-title class_\">Map<\/span>(<span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">\"map\"<\/span>), {<br \/>\n    <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">14<\/span>,<br \/>\n    <span class=\"hljs-attr\">center<\/span>: lokasi<br \/>\n  });<br \/>\n  <span class=\"hljs-keyword\">var<\/span> marker = <span class=\"hljs-keyword\">new<\/span> google.<span class=\"hljs-property\">maps<\/span>.<span class=\"hljs-title class_\">Marker<\/span>({<br \/>\n    <span class=\"hljs-attr\">position<\/span>: lokasi,<br \/>\n    <span class=\"hljs-attr\">map<\/span>: map<br \/>\n  });<br \/>\n}<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span><\/span>&gt;<\/p>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span><\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">defer<\/span><br \/>\n<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&amp;callback=initMap\"<\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span><\/span>&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<ol start=\"3\" data-start=\"3798\" data-end=\"3879\">\n<li data-start=\"3798\" data-end=\"3847\">\n<p data-start=\"3801\" data-end=\"3847\">Ganti <code data-start=\"3807\" data-end=\"3821\">YOUR_API_KEY<\/code> dengan API Key milikmu.<\/p>\n<\/li>\n<li data-start=\"3848\" data-end=\"3879\">\n<p data-start=\"3851\" data-end=\"3879\">Simpan dan lihat hasilnya.<\/p>\n<\/li>\n<\/ol>\n<h3 data-start=\"3886\" data-end=\"3942\"><strong data-start=\"3892\" data-end=\"3942\">Tips agar Google Maps Berfungsi dengan Baik<\/strong><\/h3>\n<ul>\n<li data-start=\"3943\" data-end=\"4269\">Pastikan situsmu sudah HTTPS (aman).<\/li>\n<li data-start=\"3943\" data-end=\"4269\">Jangan lupa aktifkan billing di Google Cloud agar API berfungsi.<\/li>\n<li data-start=\"3943\" data-end=\"4269\">Gunakan restriction API key agar tidak disalahgunakan orang lain.<\/li>\n<li data-start=\"3943\" data-end=\"4269\">Jika pakai plugin, update secara rutin untuk mencegah bug atau error.<\/li>\n<li data-start=\"3943\" data-end=\"4269\">Gunakan lazy-load jika peta membuat halaman berat.<\/li>\n<\/ul>\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" data-turn-id=\"a7a92b36-484e-4e64-aeef-4b876e8c9928\" data-testid=\"conversation-turn-30\" data-scroll-anchor=\"false\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"a3eb35e7-baaf-4d8c-b708-a1cb26d52ffe\" data-message-model-slug=\"gpt-5-t-mini\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<article class=\"text-token-text-primary w-full focus:outline-none [--shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(--shadow-height) has-data-writing-block:pt-(--shadow-height) [&amp;:has([data-writing-block])&gt;*]:pointer-events-auto [content-visibility:auto] supports-[content-visibility:auto]:[contain-intrinsic-size:auto_100lvh] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\" dir=\"auto\" data-turn-id=\"ae79124d-b08a-4ed8-a63b-ec055cca4d27\" data-testid=\"conversation-turn-32\" data-scroll-anchor=\"false\" data-turn=\"assistant\">\n<div class=\"text-base my-auto mx-auto [--thread-content-margin:--spacing(4)] thread-sm:[--thread-content-margin:--spacing(6)] thread-lg:[--thread-content-margin:--spacing(16)] px-(--thread-content-margin)\">\n<div class=\"[--thread-content-max-width:40rem] thread-lg:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\">\n<div class=\"flex max-w-full flex-col grow\">\n<div class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&amp;]:mt-1\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"6bc8e9c4-43eb-45fe-b70a-b718207a422d\" data-message-model-slug=\"gpt-5\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[1px]\">\n<div class=\"markdown prose dark:prose-invert w-full break-words light markdown-new-styling\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<h3 data-start=\"511\" data-end=\"568\"><strong data-start=\"517\" data-end=\"568\">Langkah-langkah Mendapatkan Google Maps API Key<\/strong><\/h3>\n<p data-start=\"570\" data-end=\"621\"><strong data-start=\"577\" data-end=\"621\">1. Masuk ke Google Cloud Console<\/strong><\/p>\n<ol data-start=\"622\" data-end=\"874\">\n<li data-start=\"622\" data-end=\"718\">\n<p data-start=\"625\" data-end=\"718\">Buka link berikut \ud83d\udc49 https:\/\/console.cloud.google.com\/<\/p>\n<\/li>\n<li data-start=\"719\" data-end=\"874\">\n<p data-start=\"722\" data-end=\"771\">Login menggunakan akun Google (Gmail) kamu.<\/p>\n<blockquote data-start=\"775\" data-end=\"874\">\n<p data-start=\"777\" data-end=\"874\">Kalau belum pernah pakai Google Cloud, nanti kamu akan diminta mengisi data akun terlebih dahulu.<\/p>\n<\/blockquote>\n<\/li>\n<\/ol>\n<p data-start=\"881\" data-end=\"922\">2.<strong data-start=\"888\" data-end=\"922\">\u00a0Buat \u201cProject\u201d Baru<\/strong><\/p>\n<ol data-start=\"923\" data-end=\"1301\">\n<li data-start=\"923\" data-end=\"1045\">\n<p data-start=\"926\" data-end=\"1045\">Setelah masuk ke dashboard Google Cloud, klik menu drop-down di atas kiri (biasanya tertulis \u201cSelect a project\u201d).<\/p>\n<\/li>\n<li data-start=\"1046\" data-end=\"1095\">\n<p data-start=\"1049\" data-end=\"1095\">Klik tombol \u201cNew Project\u201d (Proyek Baru).<\/p>\n<\/li>\n<li data-start=\"1096\" data-end=\"1221\">\n<p data-start=\"1099\" data-end=\"1108\">Masukkan:<\/p>\n<ul data-start=\"1112\" data-end=\"1221\">\n<li data-start=\"1112\" data-end=\"1157\">\n<p data-start=\"1114\" data-end=\"1157\">Project Name: misal <code data-start=\"1138\" data-end=\"1157\">My WordPress Maps<\/code><\/p>\n<\/li>\n<li data-start=\"1161\" data-end=\"1221\">\n<p data-start=\"1163\" data-end=\"1221\">Organization: pilih <em data-start=\"1187\" data-end=\"1204\">No organization<\/em> (jika tidak ada)<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"1222\" data-end=\"1243\">\n<p data-start=\"1225\" data-end=\"1243\">Klik Create.<\/p>\n<\/li>\n<li data-start=\"1244\" data-end=\"1301\">\n<p data-start=\"1247\" data-end=\"1301\">Tunggu beberapa detik hingga project selesai dibuat.<\/p>\n<\/li>\n<\/ol>\n<p data-start=\"1308\" data-end=\"1358\">3.<strong data-start=\"1315\" data-end=\"1358\">\u00a0Aktifkan API yang Dibutuhkan<\/strong><\/p>\n<p data-start=\"1359\" data-end=\"1380\">Setelah project siap:<\/p>\n<ol data-start=\"1381\" data-end=\"1799\">\n<li data-start=\"1381\" data-end=\"1434\">\n<p data-start=\"1384\" data-end=\"1434\">Masuk ke menu \u201cAPIs &amp; Services\u201d \u2192 \u201cLibrary\u201d.<\/p>\n<\/li>\n<li data-start=\"1435\" data-end=\"1524\">\n<p data-start=\"1438\" data-end=\"1524\">Di kolom pencarian, ketik Maps JavaScript API \u2192 klik hasilnya \u2192 klik Enable.<\/p>\n<\/li>\n<li data-start=\"1525\" data-end=\"1742\">\n<p data-start=\"1528\" data-end=\"1614\">Ulangi langkah yang sama untuk API lain yang mungkin dibutuhkan (tergantung plugin):<\/p>\n<ul data-start=\"1618\" data-end=\"1742\">\n<li data-start=\"1618\" data-end=\"1639\">\n<p data-start=\"1620\" data-end=\"1639\">Geocoding API<\/p>\n<\/li>\n<li data-start=\"1643\" data-end=\"1661\">\n<p data-start=\"1645\" data-end=\"1661\">Places API<\/p>\n<\/li>\n<li data-start=\"1665\" data-end=\"1687\">\n<p data-start=\"1667\" data-end=\"1687\">Maps Embed API<\/p>\n<\/li>\n<li data-start=\"1691\" data-end=\"1742\">\n<p data-start=\"1693\" data-end=\"1742\">Directions API (jika ingin rute perjalanan)<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"1743\" data-end=\"1799\">\n<p data-start=\"1746\" data-end=\"1799\">Setelah semua aktif, lanjut ke tahap membuat kunci.<\/p>\n<\/li>\n<\/ol>\n<p data-start=\"1806\" data-end=\"1840\">4.<strong data-start=\"1813\" data-end=\"1840\">\u00a0Buat API Key<\/strong><\/p>\n<ol data-start=\"1841\" data-end=\"2116\">\n<li data-start=\"1841\" data-end=\"1889\">\n<p data-start=\"1844\" data-end=\"1889\">Pergi ke APIs &amp; Services \u2192 Credentials.<\/p>\n<\/li>\n<li data-start=\"1890\" data-end=\"1946\">\n<p data-start=\"1893\" data-end=\"1946\">Klik tombol \u201c+ CREATE CREDENTIALS\u201d \u2192 \u201cAPI Key\u201d.<\/p>\n<\/li>\n<li data-start=\"1947\" data-end=\"2013\">\n<p data-start=\"1950\" data-end=\"2013\">Google akan langsung menampilkan API Key baru milik kamu.<\/p>\n<\/li>\n<li data-start=\"2014\" data-end=\"2116\">\n<p data-start=\"2017\" data-end=\"2116\">Salin kode tersebut (karena ini yang nanti kamu tempelkan di plugin WordPress atau kode website).<\/p>\n<\/li>\n<\/ol>\n<p data-start=\"2123\" data-end=\"2171\">5.<strong data-start=\"2130\" data-end=\"2171\">\u00a0Amankan API Key (Penting!)<\/strong><\/p>\n<p data-start=\"2172\" data-end=\"2254\">Jangan biarkan API Key kamu terbuka untuk semua orang, karena bisa disalahgunakan.<\/p>\n<ol data-start=\"2256\" data-end=\"2675\">\n<li data-start=\"2256\" data-end=\"2327\">\n<p data-start=\"2259\" data-end=\"2327\">Klik Restrict Key di bagian bawah API Key yang baru kamu buat.<\/p>\n<\/li>\n<li data-start=\"2328\" data-end=\"2547\">\n<p data-start=\"2331\" data-end=\"2394\">Di bagian Application Restrictions, pilih sesuai kebutuhan:<\/p>\n<ul data-start=\"2398\" data-end=\"2547\">\n<li data-start=\"2398\" data-end=\"2497\">\n<p data-start=\"2400\" data-end=\"2497\">HTTP referrers (websites) \u2192 kalau dipakai di website (misal <code data-start=\"2464\" data-end=\"2494\">https:\/\/namadomainkamu.com\/*<\/code>)<\/p>\n<\/li>\n<li data-start=\"2501\" data-end=\"2547\">\n<p data-start=\"2503\" data-end=\"2547\">IP addresses \u2192 kalau untuk VPS\/server.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"2548\" data-end=\"2655\">\n<p data-start=\"2551\" data-end=\"2655\">Di bagian API restrictions, pilih hanya API yang kamu aktifkan tadi (misal <em data-start=\"2630\" data-end=\"2651\">Maps JavaScript API<\/em>).<\/p>\n<\/li>\n<li data-start=\"2656\" data-end=\"2675\">\n<p data-start=\"2659\" data-end=\"2675\">Klik Save.<\/p>\n<\/li>\n<\/ol>\n<p data-start=\"2682\" data-end=\"2745\">6.<strong data-start=\"2689\" data-end=\"2745\">\u00a0Aktifkan Billing (Wajib agar Peta Muncul)<\/strong><\/p>\n<p data-start=\"2746\" data-end=\"2838\">Google sekarang mengharuskan setiap akun Maps API mengaktifkan billing, tapi tenang aja:<\/p>\n<p data-start=\"2746\" data-end=\"2838\"><em>Google memberi kredit gratis $200\/bulan, yang biasanya cukup untuk ribuan tampilan peta.<\/em><\/p>\n<ol data-start=\"2940\" data-end=\"3150\">\n<li data-start=\"2940\" data-end=\"2987\">\n<p data-start=\"2943\" data-end=\"2987\">Masuk ke menu Billing di Google Cloud.<\/p>\n<\/li>\n<li data-start=\"2988\" data-end=\"3024\">\n<p data-start=\"2991\" data-end=\"3024\">Klik \u201cAdd Billing Account\u201d.<\/p>\n<\/li>\n<li data-start=\"3025\" data-end=\"3084\">\n<p data-start=\"3028\" data-end=\"3084\">Isi data (negara, nama, dan kartu debit\/kredit aktif).<\/p>\n<\/li>\n<li data-start=\"3085\" data-end=\"3150\">\n<p data-start=\"3088\" data-end=\"3150\">Setelah selesai, hubungkan akun billing ke project kamu.<\/p>\n<\/li>\n<\/ol>\n<p data-start=\"3157\" data-end=\"3189\">7.<strong data-start=\"3163\" data-end=\"3189\">\u00a0Tes API Key<\/strong><\/p>\n<ol data-start=\"3190\" data-end=\"3477\">\n<li data-start=\"3190\" data-end=\"3272\">\n<p data-start=\"3193\" data-end=\"3272\">Buka plugin WordPress kamu (misal: <em data-start=\"3228\" data-end=\"3246\">Easy Google Maps<\/em> atau <em data-start=\"3252\" data-end=\"3268\">WP Google Maps<\/em>).<\/p>\n<\/li>\n<li data-start=\"3273\" data-end=\"3349\">\n<p data-start=\"3276\" data-end=\"3349\">Tempelkan API Key yang baru kamu buat di kolom Google Maps API Key.<\/p>\n<\/li>\n<li data-start=\"3350\" data-end=\"3477\">\n<p data-start=\"3353\" data-end=\"3405\">Simpan dan lihat hasilnya di halaman website kamu.<\/p>\n<ul data-start=\"3409\" data-end=\"3477\">\n<li data-start=\"3409\" data-end=\"3477\">\n<p data-start=\"3411\" data-end=\"3477\">Kalau peta tampil normal, berarti API sudah aktif dan berfungsi.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3 class=\"wp-block-heading\"><span id=\"Cara_Memasang_MAPS_API_di_Plugin_Easy_Google_Maps\">Cara Memasang MAPS API di Plugin Easy Google Maps<\/span><\/h3>\n<p data-start=\"312\" data-end=\"367\"><strong data-start=\"319\" data-end=\"367\">1. Pastikan Kamu Sudah Punya API Key<\/strong><\/p>\n<p data-start=\"368\" data-end=\"485\">Sebelum bisa digunakan di plugin, kamu harus punya <strong data-start=\"419\" data-end=\"442\">Google Maps API Key<\/strong>.<br data-start=\"443\" data-end=\"446\" \/>Kalau belum, ikuti langkah singkat ini:<\/p>\n<ul data-start=\"487\" data-end=\"909\">\n<li data-start=\"487\" data-end=\"559\">\n<p data-start=\"490\" data-end=\"559\">Masuk ke Google Cloud Console.<\/p>\n<\/li>\n<li data-start=\"560\" data-end=\"623\">\n<p data-start=\"563\" data-end=\"623\">Buat project baru (atau pilih project yang sudah ada).<\/p>\n<\/li>\n<li data-start=\"624\" data-end=\"684\">\n<p data-start=\"627\" data-end=\"684\">Aktifkan Maps JavaScript API dan Geocoding API.<\/p>\n<\/li>\n<li data-start=\"685\" data-end=\"760\">\n<p data-start=\"688\" data-end=\"760\">Buat API Key di menu <em data-start=\"713\" data-end=\"757\">Credentials \u2192 Create Credentials \u2192 API Key<\/em>.<\/p>\n<\/li>\n<li data-start=\"761\" data-end=\"831\">\n<p data-start=\"764\" data-end=\"831\">Batasi penggunaan API Key untuk domain websitemu (HTTP referrer).<\/p>\n<\/li>\n<li data-start=\"832\" data-end=\"909\">\n<p data-start=\"835\" data-end=\"909\">Aktifkan Billing Account (Google memberikan kredit gratis $200\/bulan).<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"913\" data-end=\"1015\">Setelah selesai, salin API key tersebut karena nanti akan kamu masukkan ke plugin Easy Google Maps.<\/p>\n<p data-start=\"1022\" data-end=\"1072\">2.<strong data-start=\"1029\" data-end=\"1072\">\u00a0Masuk ke Dashboard WordPress<\/strong><\/p>\n<ul data-start=\"1073\" data-end=\"1278\">\n<li data-start=\"1073\" data-end=\"1142\">\n<p data-start=\"1076\" data-end=\"1142\">Login ke dashboard WordPress kamu (<code data-start=\"1111\" data-end=\"1138\">namadomainmu.com\/wp-admin<\/code>).<\/p>\n<\/li>\n<li data-start=\"1143\" data-end=\"1188\">\n<p data-start=\"1146\" data-end=\"1188\">Di menu kiri, klik Easy Google Maps.<\/p>\n<\/li>\n<li data-start=\"1189\" data-end=\"1278\">\n<p data-start=\"1192\" data-end=\"1278\">Buka tab Settings atau API Settings (tergantung versi plugin yang kamu pakai).<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"1285\" data-end=\"1333\">3.<strong data-start=\"1292\" data-end=\"1333\">\u00a0Masukkan API Key ke Plugin<\/strong><\/p>\n<ul data-start=\"1334\" data-end=\"1545\">\n<li data-start=\"1334\" data-end=\"1447\">\n<p data-start=\"1337\" data-end=\"1403\">Di halaman pengaturan plugin, kamu akan melihat kolom bertuliskan:<\/p>\n<blockquote data-start=\"1407\" data-end=\"1447\">\n<p data-start=\"1409\" data-end=\"1447\">\u201cEnter your Google Maps API Key\u201d<\/p>\n<\/blockquote>\n<\/li>\n<li data-start=\"1448\" data-end=\"1519\">\n<p data-start=\"1451\" data-end=\"1519\">Paste API Key yang sudah kamu salin dari Google Cloud Console.<\/p>\n<\/li>\n<li data-start=\"1520\" data-end=\"1545\">\n<p data-start=\"1523\" data-end=\"1545\">Klik Save Changes.<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"1552\" data-end=\"1589\">4.<strong data-start=\"1559\" data-end=\"1589\">: Cek Koneksi API<\/strong><\/p>\n<p data-start=\"1590\" data-end=\"1619\">Setelah menyimpan pengaturan:<\/p>\n<ul data-start=\"1620\" data-end=\"1848\">\n<li data-start=\"1620\" data-end=\"1658\">\n<p data-start=\"1623\" data-end=\"1658\">Buka menu Maps \u2192 Add New Map.<\/p>\n<\/li>\n<li data-start=\"1659\" data-end=\"1705\">\n<p data-start=\"1662\" data-end=\"1705\">Tambahkan lokasi (alamat atau koordinat).<\/p>\n<\/li>\n<li data-start=\"1706\" data-end=\"1732\">\n<p data-start=\"1709\" data-end=\"1732\">Klik Preview Map.<\/p>\n<\/li>\n<li data-start=\"1733\" data-end=\"1848\">\n<p data-start=\"1736\" data-end=\"1848\">Jika peta muncul tanpa error (\u201cThis page can\u2019t load Google Maps correctly\u201d), artinya API Key kamu sudah aktif.<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"1850\" data-end=\"1877\">Jika muncul error, periksa:<\/p>\n<ul data-start=\"1878\" data-end=\"2071\">\n<li data-start=\"1878\" data-end=\"1958\">\n<p data-start=\"1880\" data-end=\"1958\">Apakah API sudah diaktifkan di Google Cloud (Maps JavaScript API wajib).<\/p>\n<\/li>\n<li data-start=\"1959\" data-end=\"1994\">\n<p data-start=\"1961\" data-end=\"1994\">Apakah Billing sudah aktif.<\/p>\n<\/li>\n<li data-start=\"1995\" data-end=\"2071\">\n<p data-start=\"1997\" data-end=\"2071\">Apakah domain website sudah ditambahkan di bagian restriction API key.<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"2078\" data-end=\"2125\"><strong data-start=\"2085\" data-end=\"2125\">5. Tampilkan Peta di Halaman<\/strong><\/p>\n<p data-start=\"2126\" data-end=\"2155\">Setelah peta berhasil dibuat:<\/p>\n<ul data-start=\"2156\" data-end=\"2433\">\n<li data-start=\"2156\" data-end=\"2248\">\n<p data-start=\"2159\" data-end=\"2206\">Plugin akan memberikan shortcode, misalnya:<\/p>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\"><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre!\">[easy_google_map <span class=\"hljs-built_in\">id<\/span>=<span class=\"hljs-string\">\"1\"<\/span>]<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li data-start=\"2249\" data-end=\"2279\">\n<p data-start=\"2252\" data-end=\"2279\">Salin shortcode tersebut.<\/p>\n<\/li>\n<li data-start=\"2280\" data-end=\"2403\">\n<p data-start=\"2283\" data-end=\"2403\">Tempelkan di halaman atau postingan tempat kamu ingin menampilkan peta (gunakan blok <em data-start=\"2368\" data-end=\"2379\">Shortcode<\/em> di editor Gutenberg).<\/p>\n<\/li>\n<li data-start=\"2404\" data-end=\"2433\">\n<p data-start=\"2407\" data-end=\"2433\">Simpan dan lihat hasilnya.<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"2440\" data-end=\"2479\"><strong data-start=\"2447\" data-end=\"2479\">6. Uji Tampilan Peta<\/strong><\/p>\n<ul data-start=\"2480\" data-end=\"2677\">\n<li data-start=\"2480\" data-end=\"2527\">\n<p data-start=\"2482\" data-end=\"2527\">Buka halaman tempat kamu menaruh shortcode.<\/p>\n<\/li>\n<li data-start=\"2528\" data-end=\"2597\">\n<p data-start=\"2530\" data-end=\"2597\">Pastikan peta tampil normal dan marker sesuai lokasi yang diatur.<\/p>\n<\/li>\n<li data-start=\"2598\" data-end=\"2677\">\n<p data-start=\"2600\" data-end=\"2677\">Jika masih error, coba <em data-start=\"2623\" data-end=\"2636\">Clear Cache<\/em> browser dan plugin, lalu reload halaman. sehat sehat algoritma tiktok,<\/p>\n<\/li>\n<\/ul>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-right kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;right&quot;,&quot;id&quot;:&quot;28254&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;1&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;0&quot;,&quot;greet&quot;:&quot;Jadilah yang pertama untuk memberi nilai&quot;,&quot;legend&quot;:&quot;5\\\/5 - (1 vote)&quot;,&quot;size&quot;:&quot;22&quot;,&quot;title&quot;:&quot;Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis&quot;,&quot;width&quot;:&quot;110&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 110px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 17.6px;\">\n            5\/5 - (1 vote)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Seperti yang kita ketahui, saat ini maps banyak tersedia di situs web dan aplikasi belanja daring. Hal ini menjadikan peta elemen krusial untuk suatu situs, terutama bagi yang ditujukan untuk tujuan bisnis. Oleh karena itu, dalam panduan ini, kami akan menjelaskan cara menampilkan Google Maps di platform WordPress. Dengan adanya peta yang menunjukkan lokasi toko [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":28255,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"no","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[{"account":"twitter_2392824914_2392824914","service":"twitter","timestamp":1762411530,"status":"error"}],"rop_publish_now_status":"done","_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,"enabled":false},"version":2}},"categories":[8],"tags":[13543,13541,13540,13542],"class_list":["post-28254","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-cara-memasang-maps-api-di-plugin-easy-google-maps","tag-cara-untuk-memasang-google-maps-di-wordpress","tag-pentingnya-maps-dari-website","tag-tips-agar-google-maps-berfungsi-dengan-baik"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress-1140x445.png",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress-463x348.png",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress-300x169.png",300,169,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress.png",1366,768,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Seperti yang kita ketahui, saat ini maps banyak tersedia di situs web dan aplikasi belanja daring. Hal ini menjadikan peta elemen krusial untuk suatu situs, terutama bagi yang ditujukan untuk tujuan bisnis. Oleh karena itu, dalam panduan ini, kami akan menjelaskan cara menampilkan Google Maps di platform WordPress. Dengan adanya peta yang menunjukkan lokasi toko [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-06T06:45:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Fitri Ana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fitri Ana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress\"},\"author\":{\"name\":\"Fitri Ana\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0\"},\"headline\":\"Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis\",\"datePublished\":\"2025-11-06T06:45:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress\"},\"wordCount\":1389,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress.png\",\"keywords\":[\"Cara Memasang MAPS API di Plugin Easy Google Maps\",\"Cara untuk Memasang Google Maps di WordPress\",\"Pentingnya Maps Dari Website\",\"Tips agar Google Maps Berfungsi dengan Baik\"],\"articleSection\":[\"Wordpress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress\",\"url\":\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress\",\"name\":\"Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress.png\",\"datePublished\":\"2025-11-06T06:45:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress.png\",\"width\":1366,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita &amp; Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0\",\"name\":\"Fitri Ana\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g\",\"caption\":\"Fitri Ana\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis - Hosteko Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress","og_locale":"en_US","og_type":"article","og_title":"Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis - Hosteko Blog","og_description":"Seperti yang kita ketahui, saat ini maps banyak tersedia di situs web dan aplikasi belanja daring. Hal ini menjadikan peta elemen krusial untuk suatu situs, terutama bagi yang ditujukan untuk tujuan bisnis. Oleh karena itu, dalam panduan ini, kami akan menjelaskan cara menampilkan Google Maps di platform WordPress. Dengan adanya peta yang menunjukkan lokasi toko [&hellip;]","og_url":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress","og_site_name":"Hosteko Blog","article_published_time":"2025-11-06T06:45:02+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress.png","type":"image\/png"}],"author":"Fitri Ana","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Fitri Ana","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress"},"author":{"name":"Fitri Ana","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0"},"headline":"Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis","datePublished":"2025-11-06T06:45:02+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress"},"wordCount":1389,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress.png","keywords":["Cara Memasang MAPS API di Plugin Easy Google Maps","Cara untuk Memasang Google Maps di WordPress","Pentingnya Maps Dari Website","Tips agar Google Maps Berfungsi dengan Baik"],"articleSection":["Wordpress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress","url":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress","name":"Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress.png","datePublished":"2025-11-06T06:45:02+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress.png","width":1366,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/cara-mudah-memasang-google-maps-di-wordpress#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita &amp; Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/ffcd8071a8a3d6a862a4e1381d1c4ea0","name":"Fitri Ana","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a099f723518ab9b89aa80b7ed8cadd2d3fae127c5bd735733cf24a661e75a882?s=96&d=mm&r=g","caption":"Fitri Ana"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2025\/11\/Panduan-untuk-menambahkan-Google-Maps-di-WrodPress.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/28254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=28254"}],"version-history":[{"count":1,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/28254\/revisions"}],"predecessor-version":[{"id":28256,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/28254\/revisions\/28256"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/28255"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=28254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=28254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=28254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}