{"id":787,"date":"2025-12-19T10:51:08","date_gmt":"2025-12-19T07:51:08","guid":{"rendered":"https:\/\/mapsfun.com\/?p=787"},"modified":"2025-12-19T10:51:09","modified_gmt":"2025-12-19T07:51:09","slug":"how-to-create-map-showing-multiple-locations-complete-guide","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=787","title":{"rendered":"How to Create Map Showing Multiple Locations (Complete Guide)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Google Map with Multiple Locations: A Step-by-Step Guide<\/h2>\n\n\n\n<p>Embedding a map with multiple locations\u2014like store fronts, event venues, or service areas\u2014can significantly enhance your website&#8217;s usability. While Google offers the tools to do this for free, the process can be technical. This guide will walk you through the two main methods.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: The Manual Google My Maps Way (No Coding)<\/strong><\/p>\n\n\n\n<p>This method is great for non-developers who need a quick, simple map and don&#8217;t mind the somewhat dated interface.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Access Google My Maps<br><\/p>\n\n\n\n<p class=\"has-text-align-left\">1.\u00a0 Go to <a href=\"https:\/\/www.google.com\/mymaps\">https:\/\/www.google.com\/mymaps<\/a>\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"516\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-187-1024x516.png\" alt=\"\" class=\"wp-image-788\" style=\"width:673px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-187-1024x516.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-187-300x151.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-187-768x387.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-187-1536x775.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-187.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>2.&nbsp; Sign in with your Google account.<\/p>\n\n\n\n<p>3.\u00a0 Click on <strong>&#8220;Create a New Map&#8221;.<\/strong><br><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"303\" src=\"blob:https:\/\/mapsfun.com\/7a34682b-d699-4cba-bfbd-ea0151fe7663\"><\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Create Your Map and Add Locations<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.&nbsp; Click on the map title (&#8220;Untitled map&#8221;) to give it a name and description.<\/li>\n\n\n\n<li>2.\u00a0<strong> To add a location:<\/strong> Use the search bar under the title, or click the marker pin icon below it and then click on a spot on the map.<\/li>\n\n\n\n<li>3.\u00a0 In the pop-up window, you can name the location, add a description, and even upload images.<\/li>\n\n\n\n<li><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"320\" src=\"blob:https:\/\/mapsfun.com\/389f6fb7-ab26-4f8a-83b6-08b5a0dc312a\"><\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Customize and Style (Optional)<\/p>\n\n\n\n<p>You can style your markers by changing their color and icon shape directly from the location pop-up window. You can also create different layers to group locations (e.g., &#8220;Coffee Shops&#8221; vs. &#8220;Bookstores&#8221;).<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 4: Embed the Map on Your Website<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.\u00a0 In your map menu, click the three-dot menu (\u22ee) next to the map name and select &#8220;<strong>Embed on my site&#8221;.<\/strong><\/li>\n\n\n\n<li>2.&nbsp; A pop-up will appear with an HTML `&lt;iframe&gt;` code. Copy this code.<\/li>\n\n\n\n<li>3.&nbsp; Paste this code into the HTML section of your website page or post.<\/li>\n<\/ul>\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-tag\">&lt;<span class=\"hljs-name\">iframe<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/www.google.com\/maps\/d\/embed?mid=1YOUR_UNIQUE_MAP_ID&amp;ehbc=2E312F\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"640\"<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"480\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">iframe<\/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\"><strong>Limitations of this method:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The embedded map has a default, generic design that might not fit your website&#8217;s branding.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Customization options are very limited.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The interface can be clunky for managing a large number of locations.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 2: Using the Google Maps JavaScript API (Full Control)<\/strong><\/p>\n\n\n\n<p>For a fully customized, seamless experience, you need to use the API. This requires technical knowledge.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Get a Google Maps API Key<\/p>\n\n\n\n<p>1.&nbsp; Go to the [Google Cloud Console](https:\/\/console.cloud.google.com\/).<\/p>\n\n\n\n<p>2.\u00a0 Create a project, enable billing, and then enable the <strong>&#8220;Maps JavaScript API&#8221;.<\/strong><\/p>\n\n\n\n<p>3.\u00a0 Go to &#8220;Credentials&#8221; and create an <strong>API Key<\/strong>. <strong>Crucially, restrict this key<\/strong> to your website&#8217;s domain for security.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Implement the Code<\/p>\n\n\n\n<p>Create an HTML file and use the following code as a template. This creates a map with three predefined locations.<\/p>\n\n\n\n<p><strong>html<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" 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>Custom Multi-Location 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<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>; <span class=\"hljs-comment\">\/* Optional: for rounded corners *\/<\/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\">h2<\/span>&gt;<\/span>Find Us Here<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/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\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\">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\">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\">\/\/ Set the initial center of the map<\/span>\n            <span class=\"hljs-keyword\">const<\/span> center = { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">51.5074<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-0.1278<\/span> }; <span class=\"hljs-comment\">\/\/ London<\/span>\n\n            <span class=\"hljs-comment\">\/\/ Create 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\">11<\/span>,\n                <span class=\"hljs-attr\">center<\/span>: center,\n                <span class=\"hljs-attr\">styles<\/span>: &#91;] <span class=\"hljs-comment\">\/\/ You can add custom map styles here<\/span>\n            });\n\n            <span class=\"hljs-comment\">\/\/ Define your locations<\/span>\n            <span class=\"hljs-keyword\">const<\/span> locations = &#91;\n                { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">51.5074<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-0.1278<\/span>, <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"London Office\"<\/span> },\n                { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">51.5155<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-0.0723<\/span>, <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"East London Branch\"<\/span> },\n                { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">51.4623<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-0.1147<\/span>, <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"South London Warehouse\"<\/span> }\n            ];\n\n            <span class=\"hljs-comment\">\/\/ Create an InfoWindow<\/span>\n            <span class=\"hljs-keyword\">const<\/span> infowindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow();\n\n            <span class=\"hljs-comment\">\/\/ Loop through locations and add markers<\/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.title\n                });\n\n                <span class=\"hljs-comment\">\/\/ Add a click listener to open the InfoWindow<\/span>\n                marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                    infowindow.setContent(<span class=\"hljs-string\">`&lt;strong&gt;<span class=\"hljs-subst\">${location.title}<\/span>&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\">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-2\"><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\"><strong>The Challenges with the API Method:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Technical Barrier:<\/strong> Requires comfort with HTML, CSS, and JavaScript.<\/li>\n\n\n\n<li><strong>API Management: <\/strong>You must set up and securely manage a Google Cloud project with billing enabled.<\/li>\n\n\n\n<li><strong>Complex Customization:<\/strong> Adding features like custom marker icons, clustering for many locations, or advanced info windows requires significant additional code.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Simple, Powerful Alternative: MapsFun.com<\/strong><\/p>\n\n\n\n<p>As you can see, creating a truly customized, professional multi-location map involves a steep learning curve, whether you&#8217;re wrestling with the limited &#8220;My Maps&#8221; interface or diving deep into API documentation and code.<\/p>\n\n\n\n<p><strong>There&#8217;s a better way.<\/strong><\/p>\n\n\n\n<p><a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> is built specifically to solve this problem. It gives you the power and customization of the JavaScript API without any of the complexity.<\/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>No Coding or API Keys: <\/strong>Create beautiful, interactive maps in minutes using an intuitive visual editor.<\/li>\n\n\n\n<li><strong>Powerful Customization:<\/strong> Easily add custom markers, apply stylish map themes, and design rich info windows with images and text.<\/li>\n\n\n\n<li><strong>Direct Embedding<\/strong>: Get a simple embed code to paste into your website, just like the &#8220;My Maps&#8221; method, but with a design that looks professional and integrated.<\/li>\n<\/ul>\n\n\n\n<p><strong>Stop spending hours on complex setups. Create a stunning Google Map with multiple locations in just a few clicks. Visit <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> to get started for free.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Google Map with Multiple Locations: A Step-by-Step Guide Embedding a map with multiple locations\u2014like store fronts, event venues, or service areas\u2014can significantly enhance your website&#8217;s usability. While Google offers the tools to do this for free, the process can be technical. This guide will walk you through the two main methods. [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[107,1],"tags":[],"class_list":["post-787","post","type-post","status-publish","format-standard","hentry","category-create-map-showing-multiple-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/787","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=787"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/787\/revisions"}],"predecessor-version":[{"id":789,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/787\/revisions\/789"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}