{"id":134,"date":"2025-12-15T10:54:10","date_gmt":"2025-12-15T07:54:10","guid":{"rendered":"https:\/\/mapsfun.com\/?p=134"},"modified":"2025-12-15T10:54:10","modified_gmt":"2025-12-15T07:54:10","slug":"how-to-add-google-maps-to-wix-2025-complete-guide","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=134","title":{"rendered":"How to Add Google Maps to Wix (2025 Complete Guide)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Add a Custom Google Map to Your Wix Website (A Step-by-Step Guide)<\/h2>\n\n\n\n<p>Embedding an interactive Google Map on your Wix site can enhance user experience by showing your location, service areas, or multiple storefronts. While Wix offers a basic map element, it lacks the customization and multi-location features of a true Google Map. This guide will show you the manual method to embed a fully custom Google Map.<\/p>\n\n\n\n<p><strong>The professional method requires a Google Cloud account, API key management, and some coding. It&#8217;s powerful but technical.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: The Manual Google Maps API Integration<\/strong><\/p>\n\n\n\n<p>This approach gives you full control over the map&#8217;s design and functionality.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Get Your Google Maps API Key<\/p>\n\n\n\n<p>This is the most critical and complex step.<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.&nbsp; Go to the Google Cloud Console:<\/strong> Navigate to [<a href=\"https:\/\/console.cloud.google.com\/](https:\/\/console.cloud.google.com\/)\">https:\/\/console.cloud.google.com\/]<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"534\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-15-1024x534.png\" alt=\"\" class=\"wp-image-137\" style=\"width:694px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-15-1024x534.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-15-300x157.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-15-768x401.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-15-1536x802.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-15.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>2.&nbsp; Create a Project:<\/strong> Click &#8220;Select a Project&#8221; &gt; &#8220;New Project&#8221; and give it a name.<\/li>\n\n\n\n<li><strong>3.&nbsp; Enable Billing:<\/strong> You must enable billing on your project. Don&#8217;t panic\u2014Google provides a $200 monthly credit, which covers far more than typical map usage.<\/li>\n\n\n\n<li><strong>4.&nbsp; Enable the Necessary APIs:<\/strong> Go to &#8220;APIs &amp; Services&#8221; &gt; &#8220;Library&#8221;. Search for and enable these two APIs:\n<ul class=\"wp-block-list\">\n<li>Maps JavaScript API<\/li>\n\n\n\n<li>Geocoding API (to convert addresses into coordinates)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>5.&nbsp;Create and Secure an API Key:<\/strong> Go to &#8220;APIs &amp; Services&#8221; &gt; &#8220;Credentials&#8221;. Click &#8220;Create Credentials&#8221; &gt; &#8220;API Key&#8221;. <strong>Crucially, restrict this key<\/strong> by clicking on it and setting these restrictions:\n<ul class=\"wp-block-list\">\n<li>Application Restriction: HTTP referrers<\/li>\n\n\n\n<li>Website Restrictions: Add your Wix site URLs (e.g., `<strong>https:\/\/yourusername.wixsite.com\/yoursite<\/strong>`, `<strong>https:\/\/www.yourdomain.com<\/strong>`)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Enabling the Maps JavaScript API is a mandatory step<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Add a Container to Your Wix Page<\/p>\n\n\n\n<p>1.&nbsp; In your Wix Editor, go to the page where you want the map.<\/p>\n\n\n\n<p>2.&nbsp; Click <strong>Add (+) &gt; Embed &gt; HTML iframe<\/strong>.<\/p>\n\n\n\n<p>3.&nbsp; Drag the element onto your page and resize it to your preferred dimensions. This blank box will host your custom map. Note its element ID (e.g., `<strong>html1<\/strong>`).<\/p>\n\n\n\n<p>The HTML iframe element in Wix will act as your map container.<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"744\" height=\"507\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-16.png\" alt=\"\" class=\"wp-image-138\" style=\"width:561px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-16.png 744w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-16-300x204.png 300w\" sizes=\"auto, (max-width: 744px) 100vw, 744px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Inject the Map Code with Wix Velo<\/p>\n\n\n\n<p>Now, you&#8217;ll use Wix&#8217;s development environment to inject the Google Map code into the iframe.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.&nbsp; Enable Dev Mode:<\/strong> In the Wix Editor, click &#8220;Dev Mode&#8221; in the top bar and turn it on.<\/li>\n\n\n\n<li><strong>2.&nbsp; Open the Code Panel:<\/strong> Click &#8220;Public &amp; Backend&#8221; in the left-hand site menu.<\/li>\n\n\n\n<li><strong>3.&nbsp; Add the Code:<\/strong> In your page&#8217;s JavaScript file (e.g., `<strong>home.js<\/strong>`), paste the following code. Replace `<strong>YOUR_API_KEY<\/strong>` with the key you created in Step 1.<\/li>\n<\/ul>\n\n\n\n<p><strong>javascript<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">$w.onReady(function () {\n    \/\/ Get the HTML iframe element. Change '#html1' if your element has a different ID.\n    const htmlFrame = $w('#html1');\n\n    \/\/ Define your locations. You can add as many as you need.\n    const locations = &#91;\n        &#91;'Main Office', '40.7128', '-74.0060'], \/\/ &#91;Name, Lat, Lng]\n        &#91;'Downtown Store', '40.7074', '-74.0113'],\n        &#91;'Support Center', '40.7211', '-74.0005']\n    ];\n\n    \/\/ Create the HTML and JavaScript for the Google Map\n    const mapHtml = `\n        <span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n                <span class=\"hljs-selector-tag\">body<\/span>, <span class=\"hljs-selector-tag\">html<\/span> { <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>; <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>; <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>; }\n                <span class=\"hljs-selector-id\">#map<\/span> { <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>; <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>; }\n            <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n                <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                    <span class=\"hljs-comment\">\/\/ Initialize the map<\/span>\n                    <span class=\"hljs-keyword\">const<\/span> map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'map'<\/span>), {\n                        <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">12<\/span>,\n                        <span class=\"hljs-attr\">center<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7128<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-74.0060<\/span> }, <span class=\"hljs-comment\">\/\/ Default center<\/span>\n                        <span class=\"hljs-attr\">styles<\/span>: &#91;] <span class=\"hljs-comment\">\/\/ Optional: Add custom map styles here<\/span>\n                    });\n\n                    <span class=\"hljs-comment\">\/\/ Create an info window to share between markers.<\/span>\n                    <span class=\"hljs-keyword\">const<\/span> infowindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow();\n\n                    <span class=\"hljs-comment\">\/\/ Add markers to the map<\/span>\n                    <span class=\"hljs-keyword\">const<\/span> locations = ${<span class=\"hljs-built_in\">JSON<\/span>.stringify(locations)};\n                    locations.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">&#91;title, lat, lng]<\/span>) =&gt;<\/span> {\n                        <span class=\"hljs-keyword\">const<\/span> marker = <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                            <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-built_in\">parseFloat<\/span>(lat), <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-built_in\">parseFloat<\/span>(lng) },\n                            <span class=\"hljs-attr\">map<\/span>: map,\n                            <span class=\"hljs-attr\">title<\/span>: title\n                        });\n\n                        <span class=\"hljs-comment\">\/\/ Add a click listener to each marker<\/span>\n                        marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                            infowindow.setContent(<span class=\"hljs-string\">'&lt;strong&gt;'<\/span> + title + <span class=\"hljs-string\">'&lt;\/strong&gt;'<\/span>);\n                            infowindow.open(map, marker);\n                        });\n                    });\n                }\n            <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">defer<\/span> <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;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n    `;\n\n    \/\/ Send the complete map HTML to the iframe\n    htmlFrame.postMessage(mapHtml);\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This code creates a responsive Google Map with multiple markers and clickable info windows, all hosted within your Wix site.<br><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Significant Challenges of This Method<\/strong><\/p>\n\n\n\n<p>While this DIY approach works, it presents major hurdles for most Wix users:<br><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>API Key Security: <\/strong>You are solely responsible for <strong>restricting your API key<\/strong>. A mistake can lead to unauthorized use and substantial, unexpected charges on your Google Cloud bill.<\/li>\n\n\n\n<li><strong>Technical Complexity: <\/strong>This process requires comfort with <strong>JavaScript, Google Cloud Platform, and Wix Velo<\/strong>. A single syntax error can break the entire map.<\/li>\n\n\n\n<li><strong>Maintenance Overhead:<\/strong> If you need to change a location, you must find the coordinates, edit the code, and republish your site.<\/li>\n\n\n\n<li><strong>Limited Wix Integration: <\/strong>The map exists in an isolated iframe, making it harder to create seamless interactions with other elements on your Wix page.<\/li>\n<\/ol>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Simple, Professional Alternative: <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a><\/strong><\/p>\n\n\n\n<p>Why navigate the maze of API keys and code when you can achieve a superior result in a fraction of the time?<\/p>\n\n\n<p><iframe src=\"https:\/\/panel.mapsfun.com\/embed-map?code=668ecbcced7931f89205d1e881bb82aa&#038;lang=uk&#038;tpl=photo\" width=\"100%\" height=\"600\" style=\"border:0\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe><\/p>\n\n\n\n<p><br><a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> is built specifically to solve this problem, offering a seamless, codeless experience for Wix users.<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.&nbsp; Zero Coding Required:<\/strong> Our visual editor lets you search for locations and add pins with a single click. No Velo, no code panels.<\/li>\n\n\n\n<li><strong>2.&nbsp;No API Key Management:<\/strong> We handle all the backend infrastructure and security. There is no risk of unexpected billing.<\/li>\n\n\n\n<li><strong>3.&nbsp; Deep Customization:<\/strong> Easily customize your map&#8217;s style, marker icons, and info windows with just a few clicks\u2014no need to edit complex code.<\/li>\n\n\n\n<li><strong>4.&nbsp;Perfect Wix Integration: <\/strong>Once your map is ready, you get a simple embed code. Just paste it into the Wix HTML iframe, and you&#8217;re done. It just works.<\/li>\n<\/ul>\n\n\n\n<p>Stop wrestling with Google Cloud and Velo. Create a stunning, fully-featured Google Map for your Wix site in minutes, not hours. Visit <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> to get started for free.<br><\/p>\n","protected":false},"excerpt":{"rendered":"How to Add a Custom Google Map to Your Wix Website (A Step-by-Step Guide) Embedding an interactive Google Map on your Wix site can enhance user experience by showing your location, service areas, or multiple storefronts. While Wix offers a basic map element, it lacks the customization and multi-location features of a true Google Map. [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,1],"tags":[],"class_list":["post-134","post","type-post","status-publish","format-standard","hentry","category-add-google-map-to-wix","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=134"}],"version-history":[{"count":2,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":204,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/134\/revisions\/204"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}