{"id":731,"date":"2025-12-16T15:37:45","date_gmt":"2025-12-16T12:37:45","guid":{"rendered":"https:\/\/mapsfun.com\/?p=731"},"modified":"2025-12-16T15:37:46","modified_gmt":"2025-12-16T12:37:46","slug":"how-to-make-a-map-with-multiple-locations-quick-tutorial","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=731","title":{"rendered":"How to Make a Map with Multiple Locations (Quick Tutorial)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Map with Multiple Locations for Your Website<\/h2>\n\n\n\n<p>Whether you&#8217;re showing store locations, event venues, or service areas, displaying multiple points on a map significantly enhances your website&#8217;s usability. While Google Maps provides the tools to build this functionality, the process involves technical complexity that can challenge non-developers.<\/p>\n\n\n\n<p>Here&#8217;s your comprehensive guide to creating a multi-location map using the Google Maps JavaScript API.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0Method 1: The Technical Approach Using Google Maps API<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;Step 1: Set Up Google Cloud Project and API Keys<\/p>\n\n\n\n<p>First, you&#8217;ll need to configure access to Google&#8217;s mapping services:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Create a Google Cloud Project<\/strong><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Visit [Google Cloud Console](https:\/\/console.cloud.google.com\/)<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Create a new project or select an existing one<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Enable billing (requires credit card, though $200 monthly credit covers most basic usage)<\/li>\n\n\n\n<li><strong>2. Enable Required APIs<\/strong><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;Navigate to &#8220;APIs &amp; Services &gt; Library&#8221; and enable:<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Maps JavaScript API<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Geocoding API (converts addresses to coordinates)<\/li>\n\n\n\n<li><strong>3. Generate and Secure Your API Key<\/strong><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Go to &#8220;APIs &amp; Services &gt; Credentials&#8221;<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Click &#8220;Create Credentials&#8221; &gt; &#8220;API Key&#8221;<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Restrict the key to your domain and the specific APIs you&#8217;re using<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"628\" height=\"633\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-162.png\" alt=\"\" class=\"wp-image-732\" style=\"width:498px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-162.png 628w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-162-298x300.png 298w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-162-150x150.png 150w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;Step 2: Build the Map with HTML and JavaScript<\/p>\n\n\n\n<p>Create a new HTML file and implement the map with this complete code example:<\/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>Multi-Location Business 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\">margin-bottom<\/span>: <span class=\"hljs-number\">15px<\/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\">h2<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-title\"<\/span>&gt;<\/span>Our Locations<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    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-comment\">&lt;!-- Load Google Maps API --&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&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-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 initial map view<\/span>\n            <span class=\"hljs-keyword\">const<\/span> mapOptions = {\n                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">6<\/span>,\n                <span class=\"hljs-attr\">center<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">39.8283<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-98.5795<\/span> }, <span class=\"hljs-comment\">\/\/ Center of US<\/span>\n                <span class=\"hljs-attr\">styles<\/span>: &#91;\n                    {\n                        <span class=\"hljs-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"administrative\"<\/span>,\n                        <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"labels.text.fill\"<\/span>,\n                        <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{<span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#444444\"<\/span>}]\n                    }\n                ]\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>), mapOptions);\n\n            <span class=\"hljs-comment\">\/\/ Define your locations<\/span>\n            <span class=\"hljs-keyword\">const<\/span> locations = &#91;\n                {\n                    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"New York Office\"<\/span>,\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\">address<\/span>: <span class=\"hljs-string\">\"123 Manhattan Ave, New York, NY\"<\/span>\n                },\n                {\n                    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Chicago Branch\"<\/span>, \n                    <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">41.8781<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-87.6298<\/span> },\n                    <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"456 Michigan Ave, Chicago, IL\"<\/span>\n                },\n                {\n                    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Los Angeles Warehouse\"<\/span>,\n                    <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">34.0522<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-118.2437<\/span> },\n                    <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"789 Sunset Blvd, Los Angeles, CA\"<\/span>\n                },\n                {\n                    <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Miami Showroom\"<\/span>,\n                    <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">25.7617<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-80.1918<\/span> },\n                    <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"321 Ocean Dr, Miami, FL\"<\/span>\n                }\n            ];\n\n            <span class=\"hljs-comment\">\/\/ Create info window<\/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 for each location<\/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>: location.position,\n                    <span class=\"hljs-attr\">map<\/span>: map,\n                    <span class=\"hljs-attr\">title<\/span>: location.name\n                });\n\n                <span class=\"hljs-comment\">\/\/ Add click listener to show location details<\/span>\n                marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                    infoWindow.setContent(<span class=\"hljs-string\">`\n                        &lt;div style=\"padding: 10px;\"&gt;\n                            &lt;h3 style=\"margin: 0 0 8px 0; color: #1a73e8;\"&gt;<span class=\"hljs-subst\">${location.name}<\/span>&lt;\/h3&gt;\n                            &lt;p style=\"margin: 0; color: #5f6368;\"&gt;<span class=\"hljs-subst\">${location.address}<\/span>&lt;\/p&gt;\n                        &lt;\/div&gt;\n                    `<\/span>);\n                    infoWindow.open(map, marker);\n                });\n            });\n\n            <span class=\"hljs-comment\">\/\/ Adjust map bounds to show all markers<\/span>\n            <span class=\"hljs-keyword\">const<\/span> bounds = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLngBounds();\n            locations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> {\n                bounds.extend(location.position);\n            });\n            map.fitBounds(bounds);\n        }\n\n        <span class=\"hljs-comment\">\/\/ Handle API loading errors<\/span>\n        <span class=\"hljs-built_in\">window<\/span>.gm_authFailure = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            alert(<span class=\"hljs-string\">'Google Maps failed to load. Please check your API key.'<\/span>);\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><strong>Replace `YOUR_API_KEY_HERE` with your actual Google Maps API key.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"499\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-163.png\" alt=\"\" class=\"wp-image-733\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-163.png 658w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-163-300x228.png 300w\" sizes=\"auto, (max-width: 658px) 100vw, 658px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;Step 3: Embed on Your Website<\/p>\n\n\n\n<p>For static HTML sites, upload your file. For CMS platforms:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WordPress<\/strong>:<\/li>\n\n\n\n<li>&#8211; Use a Custom HTML block<\/li>\n\n\n\n<li>&#8211; Or install a &#8220;Custom Code&#8221; plugin<\/li>\n\n\n\n<li><strong>Shopify:<\/strong><\/li>\n\n\n\n<li>&#8211; Edit your theme code<\/li>\n\n\n\n<li>&#8211; Add the HTML to a new section or page<\/li>\n\n\n\n<li><strong>Wix\/ Squarespace:<\/strong><\/li>\n\n\n\n<li>&#8211; Use an HTML embed widget<\/li>\n\n\n\n<li>&#8211; Paste your complete code<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0The Challenges of This Approach<\/strong><\/p>\n\n\n\n<p>While powerful, the manual method presents significant hurdles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Complex Setup: Google Cloud Console has a steep learning curve<\/li>\n\n\n\n<li>&#8211; Billing Management: You must monitor usage to avoid unexpected charges<\/li>\n\n\n\n<li>&#8211; Security Risks: Improperly secured API keys can lead to substantial costs<\/li>\n\n\n\n<li>&#8211; Code Maintenance: Every location change requires editing code<\/li>\n\n\n\n<li>&#8211; Browser Console Errors: Common issues like `InvalidKeyMapError` or `RefererNotAllowed` require technical troubleshooting<\/li>\n\n\n\n<li>&#8211; Mobile Responsiveness: Additional CSS and JavaScript needed for optimal mobile viewing<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0The Simple Alternative: <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>\u00a0<\/strong><\/p>\n\n\n\n<p>Why spend hours configuring APIs and writing code when you can create beautiful, interactive maps in minutes?<\/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>&nbsp; eliminates all the technical complexity:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 Truly No-Code &#8211; Visual editor with drag-and-drop functionality&nbsp;&nbsp;<\/li>\n\n\n\n<li>\u2705 No API Setup &#8211; We handle all the backend infrastructure&nbsp;&nbsp;<\/li>\n\n\n\n<li>\u2705 Instant Updates &#8211; Change locations in seconds without touching code&nbsp;&nbsp;<\/li>\n\n\n\n<li>\u2705 Pre-designed Templates &#8211; Professional styles optimized for conversion&nbsp;&nbsp;<\/li>\n\n\n\n<li>\u2705 Automatic Mobile Optimization &#8211; Perfect display on all devices&nbsp;&nbsp;<\/li>\n\n\n\n<li>\u2705 Cost-Effective &#8211; No hidden costs or billing surprises&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Create your perfect multi-location map today at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>&nbsp; &#8211; the simplest way to showcase your locations without the technical headache.<\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Map with Multiple Locations for Your Website Whether you&#8217;re showing store locations, event venues, or service areas, displaying multiple points on a map significantly enhances your website&#8217;s usability. While Google Maps provides the tools to build this functionality, the process involves technical complexity that can challenge non-developers. Here&#8217;s your comprehensive guide [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[95,1],"tags":[],"class_list":["post-731","post","type-post","status-publish","format-standard","hentry","category-making-a-map-with-multiple-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/731","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=731"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/731\/revisions"}],"predecessor-version":[{"id":734,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/731\/revisions\/734"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}