{"id":128,"date":"2025-12-15T10:48:40","date_gmt":"2025-12-15T07:48:40","guid":{"rendered":"https:\/\/mapsfun.com\/?p=128"},"modified":"2025-12-15T10:48:40","modified_gmt":"2025-12-15T07:48:40","slug":"how-to-embed-google-maps-on-wix","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=128","title":{"rendered":"How to Embed Google Maps on Wix"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Add a Custom Google Map with Multiple Locations to Your Wix Site<\/h2>\n\n\n\n<p>Want to showcase your multiple store locations, event venues, or service areas directly on your Wix website using a custom Google Map? While Wix has a basic map element, it&#8217;s limited to a single pin. Creating a true multi-location Google Map requires a technical workaround. This guide will walk you through the manual process of embedding a custom Google Map using your own API key and Wix Velo.<br><\/p>\n\n\n\n<p><strong>This method offers full customization but involves creating a Google Cloud project, handling API keys, and writing JavaScript code. It&#8217;s a developer-focused approach.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: The Manual Google Maps API &amp; Wix Velo Method<\/strong><\/p>\n\n\n\n<p>This approach gives you complete control but comes with significant technical complexity.<br><\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Set Up Your Google Maps API Key<\/p>\n\n\n\n<p>This is the most critical and complex prerequisite.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.&nbsp; Go to the [Google Cloud Console].<\/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-13-1024x534.png\" alt=\"\" class=\"wp-image-129\" style=\"width:670px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-13-1024x534.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-13-300x157.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-13-768x401.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-13-1536x802.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-13.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>2.&nbsp; Create a new project and, importantly, **enable billing**. Google provides a $200 monthly credit, which typically covers most small website maps.<\/li>\n\n\n\n<li>3.&nbsp; Enable the Required APIs: Navigate to &#8220;APIs &amp; Services &gt; Library&#8221; and enable these two services:\n<ul class=\"wp-block-list\">\n<li>&nbsp;&nbsp;&nbsp;Maps JavaScript API(renders the map)<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;Geocoding API(converts addresses to coordinates)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>4.&nbsp; Create and Restrict Your API Key: Go to &#8220;APIs &amp; Services &gt; Credentials&#8221;. Click &#8220;Create Credentials&#8221; and choose &#8220;API key&#8221;. <strong>Immediately restrict this key<\/strong> to the &#8220;Maps JavaScript API&#8221; and add your Wix site&#8217;s URL (e.g., `https:\/\/yourusername.wixsite.com\/yoursite`) under &#8220;HTTP referrers&#8221; to prevent unauthorized use.<\/li>\n<\/ul>\n\n\n\n<p><strong>You must enable the correct APIs in your Google Cloud project.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Add a Map Container to Your Wix Page<\/p>\n\n\n\n<p>1.&nbsp; In the Wix Editor, navigate to the page for your 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 stretch it to your desired size. This blank box will host your custom Google Map. Note its element ID (e.g., `#html1`).<\/p>\n\n\n\n<p><strong>The HTML iframe element in Wix acts as a container for your custom map.<\/strong><\/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-14.png\" alt=\"\" class=\"wp-image-131\" style=\"width:572px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-14.png 744w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-14-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 Google Map Code Using Wix Velo<\/p>\n\n\n\n<p>Now for the coding part. You&#8217;ll use Wix Velo to dynamically create the map and send it to the iframe.<\/p>\n\n\n\n<p>1.&nbsp; In the Wix Editor, enable <strong>Dev Mode<\/strong> (Turn on Dev Mode &gt; Enable Dev Mode).<\/p>\n\n\n\n<p>2.&nbsp; Click on <strong>Public &amp; Backend<\/strong> in the site menu to open the Velo code panel.3.&nbsp; In your page&#8217;s code (e.g., `home.js`), paste the following JavaScript. You must replace `<strong>YOUR_API_KEY<\/strong>` with the restricted key you created in Step 1.<\/p>\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=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">$w.onReady(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">()<\/span> <\/span>{\n    <span class=\"hljs-comment\">\/\/ Get the HTML iframe element. Change '#html1' to your element's ID.<\/span>\n    <span class=\"hljs-keyword\">const<\/span> mapContainer = $w(<span class=\"hljs-string\">'#html1'<\/span>);\n\n    <span class=\"hljs-comment\">\/\/ Your list of locations &#91;Name, Address]<\/span>\n    <span class=\"hljs-keyword\">const<\/span> locations = &#91;\n        &#91;<span class=\"hljs-string\">'Downtown Store'<\/span>, <span class=\"hljs-string\">'123 Main St, New York, NY'<\/span>],\n        &#91;<span class=\"hljs-string\">'Uptown Cafe'<\/span>, <span class=\"hljs-string\">'456 Park Ave, New York, NY'<\/span>],\n        &#91;<span class=\"hljs-string\">'Westside Warehouse'<\/span>, <span class=\"hljs-string\">'789 Broadway, New York, NY'<\/span>]\n    ];\n\n    <span class=\"hljs-comment\">\/\/ Function to get Lat\/Lng from an address<\/span>\n    <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">geocodeAddress<\/span><span class=\"hljs-params\">(address)<\/span> <\/span>{\n        <span class=\"hljs-keyword\">const<\/span> geocoder = <span class=\"hljs-keyword\">new<\/span> google.maps.Geocoder();\n        <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> Promise((resolve, reject) =&gt; {\n            geocoder.geocode({ <span class=\"hljs-string\">'address'<\/span>: address }, (results, status) =&gt; {\n                status === <span class=\"hljs-string\">'OK'<\/span> ? resolve(results&#91;<span class=\"hljs-number\">0<\/span>].geometry.location) : reject(<span class=\"hljs-string\">'Geocode failed: '<\/span> + status);\n            });\n        });\n    }\n\n    <span class=\"hljs-comment\">\/\/ Build the map after all addresses are geocoded<\/span>\n    Promise.all(locations.map(location =&gt; geocodeAddress(location&#91;<span class=\"hljs-number\">1<\/span>])))\n        .then(coordinates =&gt; {\n            <span class=\"hljs-comment\">\/\/ Create the HTML\/JS content for the iframe<\/span>\n            <span class=\"hljs-keyword\">const<\/span> mapHtml = `\n                &lt;!DOCTYPE html&gt;\n                &lt;html&gt;\n                &lt;head&gt;\n                    &lt;style&gt;<span class=\"hljs-comment\">#map { height: 100%; width: 100%; border: none; }&lt;\/style&gt;<\/span>\n                &lt;\/head&gt;\n                &lt;body&gt;\n                    &lt;div id=<span class=\"hljs-string\">\"map\"<\/span>&gt;&lt;\/div&gt;\n                    &lt;script src=<span class=\"hljs-string\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY\"<\/span>&gt;&lt;\/script&gt;\n                    &lt;script&gt;\n                        <span class=\"hljs-keyword\">const<\/span> map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(document.getElementById(<span class=\"hljs-string\">'map'<\/span>), {\n                            zoom: <span class=\"hljs-number\">10<\/span>\n                        });\n\n                        <span class=\"hljs-keyword\">const<\/span> bounds = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLngBounds();\n                        <span class=\"hljs-keyword\">const<\/span> locations = ${JSON.stringify(locations)};\n                        <span class=\"hljs-keyword\">const<\/span> coordinates = ${JSON.stringify(coordinates)};\n\n                        coordinates.<span class=\"hljs-keyword\">forEach<\/span>((coord, i) =&gt; {\n                            <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                                position: coord,\n                                map: map,\n                                title: locations&#91;i]&#91;<span class=\"hljs-number\">0<\/span>]\n                            });\n                            bounds.extend(coord); <span class=\"hljs-comment\">\/\/ Extend bounds for each marker<\/span>\n                        });\n\n                        map.fitBounds(bounds); <span class=\"hljs-comment\">\/\/ Auto-zoom to show all markers<\/span>\n                    &lt;\/script&gt;\n                &lt;\/body&gt;\n                &lt;\/html&gt;\n            `;\n            <span class=\"hljs-comment\">\/\/ Send the complete map to the Wix HTML iframe<\/span>\n            mapContainer.postMessage(mapHtml);\n        })\n        .<span class=\"hljs-keyword\">catch<\/span>(error =&gt; console.error(<span class=\"hljs-string\">\"Map Error: \"<\/span>, error));\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\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This code geocodes your addresses, creates a Google Map with markers, and automatically adjusts the view to fit all locations.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Why This Method is Problematic for Most Wix Users<\/strong><\/p>\n\n\n\n<p>While powerful, this DIY approach is fraught with challenges:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>API Key Management:<\/strong> You are responsible for <strong>securing your API key<\/strong>. A leaked, unrestricted key can lead to massive unexpected charges on your Google Cloud bill.<\/li>\n\n\n\n<li><strong>Coding Complexity:<\/strong> The solution requires a solid grasp of <strong>JavaScript, Promises, and the Google Maps API lifecycle<\/strong>. Debugging errors can be time-consuming.<\/li>\n\n\n\n<li><strong>Wix-Specific Limitations:<\/strong> Using `postMessage` with an HTML iframe is a workaround that can sometimes lead to display issues or slow loading times.<\/li>\n\n\n\n<li><strong>Design Inflexibility:<\/strong> Simply changing a marker icon or the map&#8217;s color scheme requires diving back into the code and redeploying.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Skip the Complexity: Use MapsFun.com for a Perfect Wix Map in Minutes<\/strong><\/p>\n\n\n\n<p>Why deal with the hassle of API keys, code, and potential billing issues? There&#8217;s a professional, codeless alternative designed specifically for this task.<\/p>\n\n\n\n<p><br><a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> eliminates every single one of these pain points:<\/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<ul class=\"wp-block-list\">\n<li><strong>1.&nbsp; Truly No-Code:<\/strong> Create your map through an intuitive visual editor. Search, click, and add pins\u2014no coding required.<\/li>\n\n\n\n<li><strong>2.&nbsp; No API Keys or Billing:<\/strong> We manage all the backend infrastructure. You just design your map; we handle the technical heavy lifting.<\/li>\n\n\n\n<li><strong>3.&nbsp; Effortless Wix Integration:<\/strong> Once your multi-location map is ready, you simply copy the provided embed code and paste it into the same Wix <strong>HTML iframe<\/strong> element. It works instantly.<\/li>\n\n\n\n<li><strong>4.&nbsp; Superior Customization: <\/strong>Easily apply custom map styles, upload your own marker icons, and design rich info windows with text and images \u2014 all through a simple point-and-click interface.<\/li>\n<\/ul>\n\n\n\n<p>Stop wrestling with Google Cloud and Velo code. Create a stunning, high-performance, multi-location Google Map for your Wix site in just a few clicks with <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>.<br><\/p>\n","protected":false},"excerpt":{"rendered":"How to Add a Custom Google Map with Multiple Locations to Your Wix Site Want to showcase your multiple store locations, event venues, or service areas directly on your Wix website using a custom Google Map? While Wix has a basic map element, it&#8217;s limited to a single pin. Creating a true multi-location Google Map [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,1],"tags":[],"class_list":["post-128","post","type-post","status-publish","format-standard","hentry","category-google-map-wix","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/128","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=128"}],"version-history":[{"count":6,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/128\/revisions"}],"predecessor-version":[{"id":195,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/128\/revisions\/195"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}