{"id":798,"date":"2025-12-19T11:41:23","date_gmt":"2025-12-19T08:41:23","guid":{"rendered":"https:\/\/mapsfun.com\/?p=798"},"modified":"2025-12-19T11:41:24","modified_gmt":"2025-12-19T08:41:24","slug":"how-to-embed-a-google-map-with-multiple-locations-2025-guide","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=798","title":{"rendered":"How to Embed a Google Map with Multiple Locations (2025 Guide)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Embed a Google Map with Multiple Locations on Your Website: A Developer&#8217;s Guide<\/h2>\n\n\n\n<p>Want to show multiple store locations, event venues, or delivery zones on your site? Embedding a multi-location Google Map requires technical workarounds since there&#8217;s no direct &#8220;embed&#8221; button for custom maps. Here\u2019s the working method that developers use.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Technical Method: Using Google Maps Platform API<\/strong><\/p>\n\n\n\n<p>This approach gives you full control but requires programming knowledge. You&#8217;ll create a custom map with JavaScript.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Create a Google Cloud Project &amp; Enable Billing<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Go to <strong>[Google Cloud Console](https:\/\/console.cloud.google.com\/)<\/strong><\/li>\n\n\n\n<li>2. Create a new project (e.g., &#8220;Multi-Location Map&#8221;)<\/li>\n\n\n\n<li><strong>3. Enable billing<\/strong> &#8211; Google offers $200 monthly credit for Maps<\/li>\n\n\n\n<li>4. Enable these APIs in &#8220;APIs &amp; Services&#8221;:<\/li>\n\n\n\n<li>\u00a0\u00a0<strong>\u00a0&#8211; Maps JavaScript API<\/strong><\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0&#8211; Geocoding API<\/strong> (to convert addresses to coordinates)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"667\" height=\"386\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-193.png\" alt=\"\" class=\"wp-image-799\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-193.png 667w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-193-300x174.png 300w\" sizes=\"auto, (max-width: 667px) 100vw, 667px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Generate and Secure Your API Key<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Navigate to <strong>Credentials > Create Credentials > API Key<\/strong><\/li>\n\n\n\n<li><strong>2. CRITICAL: <\/strong>Restrict your key immediately:<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; Application: <strong>HTTP referrers<\/strong><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Websites: `yourdomain.com\/*`<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; APIs: <strong>Maps JavaScript AP<\/strong>I only<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"746\" height=\"672\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-194.png\" alt=\"\" class=\"wp-image-800\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-194.png 746w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-194-300x270.png 300w\" sizes=\"auto, (max-width: 746px) 100vw, 746px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Create the HTML File with JavaScript<\/p>\n\n\n\n<p>Create `multi-location-map.html` with this code:<\/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-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Store Locator Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/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\">#map-container<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">800px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">20px<\/span> auto;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">12px<\/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 class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">500px<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n        }\n        <span class=\"hljs-selector-class\">.map-title<\/span> {\n            <span class=\"hljs-attribute\">text-align<\/span>: center;\n            <span class=\"hljs-attribute\">font-family<\/span>: Arial, sans-serif;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#333<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/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-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"map-container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-title\"<\/span>&gt;<\/span>Our Store Locations<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/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\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-comment\">&lt;!-- Replace YOUR_API_KEY with your actual 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&amp;callback=initMap\"<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">defer<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/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-comment\">\/\/ Store locations data<\/span>\n        <span class=\"hljs-keyword\">const<\/span> locations = &#91;\n            {\n                <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Downtown Store\"<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"123 Main St, New York, NY\"<\/span>,\n                <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7128<\/span>,\n                <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-74.0060<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"Mon-Fri: 9AM-8PM\"<\/span>\n            },\n            {\n                <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Brooklyn Branch\"<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"456 Park Ave, Brooklyn, NY\"<\/span>,\n                <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.6782<\/span>,\n                <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-73.9442<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"Mon-Sun: 10AM-9PM\"<\/span>\n            },\n            {\n                <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Queens Warehouse\"<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"789 Broadway, Queens, NY\"<\/span>,\n                <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7282<\/span>,\n                <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-73.7949<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"Mon-Fri: 8AM-6PM\"<\/span>\n            }\n        ];\n\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\">\/\/ Center map on average coordinates<\/span>\n            <span class=\"hljs-keyword\">const<\/span> center = {\n                <span class=\"hljs-attr\">lat<\/span>: locations.reduce(<span class=\"hljs-function\">(<span class=\"hljs-params\">sum, loc<\/span>) =&gt;<\/span> sum + loc.lat, <span class=\"hljs-number\">0<\/span>) \/ locations.length,\n                <span class=\"hljs-attr\">lng<\/span>: locations.reduce(<span class=\"hljs-function\">(<span class=\"hljs-params\">sum, loc<\/span>) =&gt;<\/span> sum + loc.lng, <span class=\"hljs-number\">0<\/span>) \/ locations.length\n            };\n\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\">11<\/span>,\n                <span class=\"hljs-attr\">center<\/span>: center,\n                <span class=\"hljs-attr\">styles<\/span>: &#91;\n                    {\n                        <span class=\"hljs-attr\">featureType<\/span>: <span class=\"hljs-string\">\"poi.business\"<\/span>,\n                        <span class=\"hljs-attr\">stylers<\/span>: &#91;{ <span class=\"hljs-attr\">visibility<\/span>: <span class=\"hljs-string\">\"off\"<\/span> }]\n                    }\n                ]\n            });\n\n            <span class=\"hljs-comment\">\/\/ Create markers with info windows<\/span>\n            locations.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">location<\/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>: location.lat, <span class=\"hljs-attr\">lng<\/span>: location.lng },\n                    <span class=\"hljs-attr\">map<\/span>: map,\n                    <span class=\"hljs-attr\">title<\/span>: location.name,\n                    <span class=\"hljs-attr\">animation<\/span>: google.maps.Animation.DROP\n                });\n\n                <span class=\"hljs-keyword\">const<\/span> infoWindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow({\n                    <span class=\"hljs-attr\">content<\/span>: <span class=\"hljs-string\">`\n                        &lt;div style=\"padding: 10px; min-width: 200px;\"&gt;\n                            &lt;h4 style=\"margin-top: 0; color: #1a73e8;\"&gt;<span class=\"hljs-subst\">${location.name}<\/span>&lt;\/h4&gt;\n                            &lt;p style=\"margin: 5px 0;\"&gt;\ud83d\udccd <span class=\"hljs-subst\">${location.address}<\/span>&lt;\/p&gt;\n                            &lt;p style=\"margin: 5px 0; color: #5f6368;\"&gt;\u23f0 <span class=\"hljs-subst\">${location.hours}<\/span>&lt;\/p&gt;\n                            &lt;a href=\"https:\/\/maps.google.com\/?q=<span class=\"hljs-subst\">${<span class=\"hljs-built_in\">encodeURIComponent<\/span>(location.address)}<\/span>\" \n                               target=\"_blank\" \n                               style=\"color: #1a73e8; text-decoration: none;\"&gt;\n                               Get Directions \u2192\n                            &lt;\/a&gt;\n                        &lt;\/div&gt;\n                    `<\/span>\n                });\n\n                marker.addListener(<span class=\"hljs-string\">\"click\"<\/span>, () =&gt; {\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\">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 4: Test and Embed<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Open the HTML file in your browser<\/strong><\/li>\n\n\n\n<li><strong>2. If markers appear, your API key works<\/strong><\/li>\n\n\n\n<li><strong>3. To embed on WordPress or other CMS:<\/strong><\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; Use a Custom HTML block<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Paste the entire code<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Or host the file and embed via iframe<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"751\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-195.png\" alt=\"\" class=\"wp-image-801\" style=\"width:325px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-195.png 420w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-195-168x300.png 168w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>Why This Method Is Problematic for Most Users<\/strong><\/p>\n\n\n\n<p>While powerful, this approach has significant drawbacks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Technical Barrier:<\/strong> Requires JavaScript knowledge<\/li>\n\n\n\n<li><strong>2. Billing Complexity:<\/strong> Even with free credits, you must monitor usage<\/li>\n\n\n\n<li><strong>3. API Key Management:<\/strong> Security risks if not properly restricted<\/li>\n\n\n\n<li><strong>4. Manual Updates: <\/strong>Need to edit code for every location change<\/li>\n\n\n\n<li><strong>5. No Visual Editor: <\/strong>All coordinates must be found and entered manually<\/li>\n\n\n\n<li><strong>6. Responsive Issues:<\/strong> May need additional CSS for mobile devices<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Simple Alternative: MapsFun.com<\/strong><\/p>\n\n\n\n<p>What if you could create the same professional map<strong> in 2 minutes without coding<\/strong>?<\/p>\n\n\n\n<p>[MapsFun.com](https:\/\/mapsfun.com) solves all these problems:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u2705 No Code Required <\/strong>&#8211; Visual drag-and-drop editor\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> No API Keys<\/strong> &#8211; We handle all technical backend\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Live Search<\/strong> &#8211; Type addresses, no coordinate hunting\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Rich Customization<\/strong> &#8211; Choose icons, colors, map styles visually\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Auto-Responsive<\/strong> &#8211; Works perfectly on all devices\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Easy Updates<\/strong> &#8211; Edit locations anytime through simple dashboard\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Direct Embed<\/strong> &#8211; Copy-paste one line of code into any website\u00a0\u00a0<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Here&#8217;s the MapsFun.com workflow:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Sign up for free<\/li>\n\n\n\n<li>2. Click &#8220;Add Location&#8221; and type addresses<\/li>\n\n\n\n<li>3. Customize design with intuitive controls<\/li>\n\n\n\n<li>4. Copy your unique embed code<\/li>\n\n\n\n<li>5. Paste into your website &#8211; done!<\/li>\n<\/ul>\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>While the Google Maps API method works for developers,<strong> non-technical users often struggle<\/strong> with its complexity. For business owners, marketers, or anyone needing a reliable multi-location map quickly, <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> provides the same professional result without the technical headache.<\/p>\n\n\n\n<p><strong>Stop wrestling with code and API configurations<\/strong>. Create, customize, and embed your multi-location map in minutes at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"How to Embed a Google Map with Multiple Locations on Your Website: A Developer&#8217;s Guide Want to show multiple store locations, event venues, or delivery zones on your site? Embedding a multi-location Google Map requires technical workarounds since there&#8217;s no direct &#8220;embed&#8221; button for custom maps. Here\u2019s the working method that developers use. The Technical [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[108,1],"tags":[],"class_list":["post-798","post","type-post","status-publish","format-standard","hentry","category-embed-a-google-map-with-multiple-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/798","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=798"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/798\/revisions"}],"predecessor-version":[{"id":802,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/798\/revisions\/802"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}