{"id":226,"date":"2025-12-15T11:23:41","date_gmt":"2025-12-15T08:23:41","guid":{"rendered":"https:\/\/mapsfun.com\/?p=226"},"modified":"2025-12-15T11:23:41","modified_gmt":"2025-12-15T08:23:41","slug":"how-to-embed-google-maps-in-webflow","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=226","title":{"rendered":"How to Embed Google Maps in Webflow"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Add Google Maps to Webflow (The Complete, Yet Cumbersome, Guide)<\/h2>\n\n\n\n<p>Embedding an interactive Google Map into your Webflow site seems straightforward until you need a map with custom pins, multiple locations, or advanced styling. The native embed method has severe limitations. This guide walks you through the <strong>technically correct but complex process <\/strong>of adding a powerful custom map.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Part 1: The Basic (But Limited) Embed Method<\/strong><\/p>\n\n\n\n<p>For a single, static location, Webflow offers a quick fix.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.&nbsp; Go to Google Maps, find your location.<\/li>\n\n\n\n<li>2.&nbsp; Click <strong>&#8220;Share&#8221; &gt; &#8220;Embed a map&#8221;.<\/strong><\/li>\n\n\n\n<li>3.&nbsp; Copy the provided `&lt;iframe&gt;` code.<\/li>\n\n\n\n<li>4.&nbsp; In your Webflow Designer, add an <strong>Embed element <\/strong>(`&lt;\/&gt;`) from the Add panel.<\/li>\n\n\n\n<li>5.&nbsp; Paste the iframe code into the element settings.<\/li>\n<\/ul>\n\n\n\n<p><strong>Pasting a standard Google Maps iframe into a Webflow Embed element.<\/strong><\/p>\n\n\n\n<p>The Limitations Are Severe:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You <strong>cannot add multiple custom markers.<\/strong><\/li>\n\n\n\n<li>Styling options are <strong>non-existent<\/strong> (stuck with the default Google look).<\/li>\n\n\n\n<li>The iframe is often <strong>not fully responsive<\/strong> on all devices.<\/li>\n\n\n\n<li>It looks <strong>generic and unprofessional.<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Part 2: The Advanced Custom Map Method (Using the Google Maps API)<\/p>\n\n\n\n<p>This is the <strong>real <\/strong>way to get a fully customizable, multi-location map. Be warned: it involves code and multiple steps.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Get a Google Maps API Key (The Gatekeeper)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.&nbsp; Go to the<strong> [Google Cloud Console](https:\/\/console.cloud.google.com\/)<\/strong><\/li>\n\n\n\n<li>2.&nbsp; Create a project, enable billing (the $200 monthly credit usually covers this), and enable the <strong>&#8220;Maps JavaScript API&#8221;.<\/strong><\/li>\n\n\n\n<li>3.&nbsp; Under <strong>&#8220;Credentials,&#8221;<\/strong> create an <strong>API Key<\/strong>.<\/li>\n\n\n\n<li>4.&nbsp; CRITICAL: Restrict your key. Add your Webflow site&#8217;s domain (e.g., `https:\/\/your-site.webflow.io` and your custom domain) under <strong>&#8220;HTTP referrers&#8221;<\/strong> to prevent unauthorized use.<\/li>\n<\/ul>\n\n\n\n<p><strong>Restricting your API Key to your Webflow domains is mandatory for security.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"561\" height=\"301\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/Screenshot_7.png\" alt=\"\" class=\"wp-image-227\" style=\"width:637px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/Screenshot_7.png 561w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/Screenshot_7-300x161.png 300w\" sizes=\"auto, (max-width: 561px) 100vw, 561px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"693\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-50-1024x693.png\" alt=\"\" class=\"wp-image-228\" style=\"width:640px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-50-1024x693.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-50-300x203.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-50-768x520.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-50.png 1350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Create the Custom Map HTML\/JavaScript Code<\/p>\n\n\n\n<p>You&#8217;ll need to create the map code in a code editor. Below is a sample for a map with **two custom-marked locations.<\/p>\n\n\n\n<p><strong>html<\/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\"><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-comment\">&lt;!-- Load the Maps API with your key --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY_HERE\"<\/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\">style<\/span>&gt;<\/span><span class=\"css\">\n        <span class=\"hljs-selector-id\">#custom-map<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">500px<\/span>; <span class=\"hljs-comment\">\/* Adjust height as needed *\/<\/span>\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>; <span class=\"hljs-comment\">\/* Example custom styling *\/<\/span>\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">30px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.1<\/span>);\n        }\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-comment\">&lt;!-- The map container --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"custom-map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\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\">\/\/ Define the map center (often the midpoint of your locations)<\/span>\n            <span class=\"hljs-keyword\">const<\/span> center = { <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\">\/\/ NYC<\/span>\n\n            <span class=\"hljs-comment\">\/\/ Initialize the map in the 'custom-map' div<\/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\">\"custom-map\"<\/span>), {\n                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">12<\/span>,\n                <span class=\"hljs-attr\">center<\/span>: center,\n                <span class=\"hljs-attr\">styles<\/span>: &#91; <span class=\"hljs-comment\">\/\/ Optional: Custom map styling to match your brand<\/span>\n                    { <span class=\"hljs-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"all\"<\/span>, <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{ <span class=\"hljs-string\">\"saturation\"<\/span>: <span class=\"hljs-number\">-80<\/span> }] }\n                ]\n            });\n\n            <span class=\"hljs-comment\">\/\/ Define your locations with custom icon (optional)<\/span>\n            <span class=\"hljs-keyword\">const<\/span> locations = &#91;\n                {\n                    <span class=\"hljs-attr\">position<\/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> },\n                    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"Our Main Office\"<\/span>,\n                    <span class=\"hljs-attr\">icon<\/span>: <span class=\"hljs-string\">\"https:\/\/i.imgur.com\/your-custom-pin.png\"<\/span> <span class=\"hljs-comment\">\/\/ Optional custom pin<\/span>\n                },\n                {\n                    <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7489<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-73.9680<\/span> },\n                    <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"Flagship Store\"<\/span>\n                }\n            ];\n\n            <span class=\"hljs-comment\">\/\/ Loop through and add markers<\/span>\n            locations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> {\n                <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                    <span class=\"hljs-attr\">position<\/span>: location.position,\n                    <span class=\"hljs-attr\">map<\/span>: map,\n                    <span class=\"hljs-attr\">title<\/span>: location.title,\n                    <span class=\"hljs-attr\">icon<\/span>: location.icon <span class=\"hljs-comment\">\/\/ Uses default if not specified<\/span>\n                });\n            });\n        }\n\n        <span class=\"hljs-comment\">\/\/ Initialize the map once the page loads<\/span>\n        google.maps.event.addDomListener(<span class=\"hljs-built_in\">window<\/span>, <span class=\"hljs-string\">'load'<\/span>, initMap);\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\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\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 class=\"has-text-align-center\">Step 3: Integrate the Code into Webflow<\/p>\n\n\n\n<p>This is the tricky part. You can&#8217;t just paste the full HTML. You must:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.&nbsp; Split the Code:<\/strong>\n<ul class=\"wp-block-list\">\n<li>&nbsp;&nbsp;&nbsp;&nbsp;Take the `&lt;style&gt;` CSS and any `&lt;script&gt;` that doesn&#8217;t include your API key, and paste it into <strong>Project Settings &gt; Custom Code &gt; Footer Code<\/strong>.<\/li>\n\n\n\n<li>&nbsp;&nbsp;<strong>&nbsp;&nbsp;DO NOT PUT YOUR API KEY IN THE FOOTER.<\/strong> It will be exposed.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>2.&nbsp; Use a Third-Party Script Injector (More Complexity):<\/strong>\n<ul class=\"wp-block-list\">\n<li>&nbsp;&nbsp;&nbsp;&nbsp;To keep your API key semi-private, you need to host the main JavaScript logic (the `initMap` function with your key) on a separate service like **CodePen** or a secret GitHub Gist.<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&nbsp;You then load that external script in your Footer Code.<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&nbsp; In your Webflow page, you only place the simple `&lt;div id=&#8221;custom-map&#8221;&gt;&lt;\/div&gt;` container in an <strong>Embed element<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>The Result: <\/strong>A beautiful, custom map.<strong> The Cost:<\/strong> Hours of setup, ongoing API key management, and a fragile, technical workflow.<\/p>\n\n\n\n<p><strong>The convoluted architecture required for a custom map in Webflow<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"607\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-51-1024x607.png\" alt=\"\" class=\"wp-image-229\" style=\"width:595px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-51-1024x607.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-51-300x178.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-51-768x455.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-51.png 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>Why This Process is a Webflow Designer&#8217;s Headache<\/strong><\/p>\n\n\n\n<p>You&#8217;re a designer, not a full-stack developer. This process requires:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Managing <strong>Google Cloud billing and quotas<\/strong>.<\/li>\n\n\n\n<li><strong>Exposing or dangerously hard-coding<\/strong> your API key.<\/li>\n\n\n\n<li><strong>Creating fragile workarounds<\/strong> to inject code into Webflow.<\/li>\n\n\n\n<li>Writing and maintaining<strong> custom JavaScript <\/strong>for any change (adding a pin, changing a color).<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Professional &amp; Easy Alternative: <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a><\/strong><\/p>\n\n\n\n<p>There&#8217;s a tool built specifically for Webflow designers who need stunning, interactive maps without the code nightmare.<\/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><a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> integrates seamlessly with Webflow&#8217;s no-code philosophy:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.&nbsp; Truly No-Code Editor:<\/strong> Click to add unlimited pins, customize every detail (pins, colors, popups) in a visual editor. No APIs, no keys.<\/li>\n\n\n\n<li><strong>2.&nbsp; Native Webflow Integration:<\/strong> Get a clean, secure <strong>Embed Code<\/strong> or a <strong>Script snippet<\/strong> that you paste <strong>directly<\/strong> into a Webflow Embed element or Header\/Footer. It just works.<\/li>\n\n\n\n<li><strong>3.&nbsp; Built for Designers:<\/strong> Control styles, animations, and layouts to match your brand perfectly. Create multi-location maps, route maps, or interactive guides in minutes.<\/li>\n\n\n\n<li><strong>4.&nbsp; Fully Responsive &amp; Fast:<\/strong> Maps are optimized for performance on all devices, unlike bulky iframes.<\/li>\n<\/ul>\n\n\n\n<p>Stop patching together code and worrying about API limits. Create a map that elevates your Webflow design in minutes. Try <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> for free.<br><\/p>\n","protected":false},"excerpt":{"rendered":"How to Add Google Maps to Webflow (The Complete, Yet Cumbersome, Guide) Embedding an interactive Google Map into your Webflow site seems straightforward until you need a map with custom pins, multiple locations, or advanced styling. The native embed method has severe limitations. This guide walks you through the technically correct but complex process of [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,1],"tags":[],"class_list":["post-226","post","type-post","status-publish","format-standard","hentry","category-webflow-google-maps","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/226","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=226"}],"version-history":[{"count":2,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/226\/revisions"}],"predecessor-version":[{"id":231,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/226\/revisions\/231"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}