{"id":775,"date":"2025-12-18T17:37:48","date_gmt":"2025-12-18T14:37:48","guid":{"rendered":"https:\/\/mapsfun.com\/?p=775"},"modified":"2025-12-18T17:37:49","modified_gmt":"2025-12-18T14:37:49","slug":"how-to-create-a-google-map-with-multiple-locations-2025-tutorial","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=775","title":{"rendered":"How to Create a Google Map with Multiple Locations (2025 Tutorial)"},"content":{"rendered":"\n

How to Create a Map with Multiple Locations for Free: The Technical Guide<\/h2>\n\n\n\n

Want to display multiple points on an interactive map without spending money? While Google Maps offers a powerful free tier, setting it up requires navigating technical hurdles. This guide will show you the official method to create a multi-location map for free using Google’s APIs.<\/p>\n\n\n\n

The service itself is free for moderate usage, but the setup requires a Google Cloud account and basic coding knowledge.<\/strong><\/p>\n\n\n\n

Method: Using the Google Maps Platform Free Tier<\/strong><\/p>\n\n\n\n

Google offers a $200 monthly credit for its Maps Platform, which effectively makes it free for most small to medium websites. Here’s how to use it.<\/p>\n\n\n\n

Step 1: Set Up Your Google Cloud Project and API Key<\/p>\n\n\n\n

This is the most complex but essential step. You cannot proceed without a properly configured API key.
1.\u00a0 Go to the Google Cloud Console: <\/strong>Navigate to https:\/\/console.cloud.google.com\/<\/a> .<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
    \n
  • 2.\u00a0 Create a New Project:<\/strong> Click the project dropdown and select “New Project”. Name it something recognizable like “Free-Multi-Location-Map”.<\/li>\n\n\n\n
  • 3.\u00a0 Enable Billing: <\/strong>This is required but you won’t be charged until you exceed the $200 monthly credit. For typical map usage, you’ll likely never pay anything.<\/li>\n\n\n\n
  • 4.\u00a0 Enable the Required APIs:<\/strong> Go to “APIs & Services” > “Library”. Search for and enable these two essential APIs:<\/li>\n<\/ul>\n\n\n\n
      \n
    • Maps JavaScript API <\/strong>(displays the map)<\/li>\n\n\n\n
    • \u00a0Geocoding API<\/strong> (converts addresses to coordinates)<\/li>\n<\/ul>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
        \n
      • 5.\u00a0 Create and Secure Your API Key: <\/strong>Go to “APIs & Services” > “Credentials”. Create a new API key and immediately restrict it<\/strong> to “HTTP referrers” and limit it to only the “Maps JavaScript API” and “Geocoding API”.<\/li>\n<\/ul>\n\n\n\n

        Step 2: Build Your Free Multi-Location Map<\/p>\n\n\n\n

        Create an HTML file called `free-multi-location-map.html` and use this complete code template:
        html<\/strong><\/p>\n\n\n

        <!DOCTYPE html<\/span>><\/span>\n<html<\/span>><\/span>\n<head<\/span>><\/span>\n    <title<\/span>><\/span>Free Multi-Location Map<\/title<\/span>><\/span>\n    <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\n    <!-- Load Google Maps API with your FREE key --><\/span>\n    <script<\/span> async<\/span> defer<\/span> src<\/span>=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_FREE_API_KEY&callback=initMap\"<\/span>><\/span><\/script<\/span>><\/span>\n    <style<\/span>><\/span>\n        #map<\/span> {\n            height<\/span>: 500px<\/span>;\n            width<\/span>: 100%<\/span>;\n            border-radius<\/span>: 10px<\/span>;\n            margin<\/span>: 20px<\/span> 0<\/span>;\n        }\n        .map-container<\/span> {\n            max-width<\/span>: 800px<\/span>;\n            margin<\/span>: 0<\/span> auto;\n            padding<\/span>: 20px<\/span>;\n        }\n    <\/span><\/style<\/span>><\/span>\n<\/head<\/span>><\/span>\n<body<\/span>><\/span>\n    <div<\/span> class<\/span>=\"map-container\"<\/span>><\/span>\n        <h1<\/span>><\/span>Our Locations<\/h1<\/span>><\/span>\n        <p<\/span>><\/span>Visit us at any of our convenient locations across the city.<\/p<\/span>><\/span>\n        <div<\/span> id<\/span>=\"map\"<\/span>><\/span><\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n\n    <script<\/span>><\/span>\n        function<\/span> initMap<\/span>(<\/span>) <\/span>{\n            \/\/ Initialize the map<\/span>\n            const<\/span> map = new<\/span> google.maps.Map(document<\/span>.getElementById(\"map\"<\/span>), {\n                zoom<\/span>: 8<\/span>,\n                center<\/span>: { lat<\/span>: 40.7128<\/span>, lng<\/span>: -74.0060<\/span> }, \/\/ New York as default center<\/span>\n            });\n\n            \/\/ Define your locations - add as many as you need!<\/span>\n            const<\/span> locations = [\n                {\n                    name<\/span>: \"Downtown Store\"<\/span>,\n                    position<\/span>: { lat<\/span>: 40.7128<\/span>, lng<\/span>: -74.0060<\/span> },\n                    address<\/span>: \"123 Main St, New York, NY\"<\/span>\n                },\n                {\n                    name<\/span>: \"Brooklyn Branch\"<\/span>, \n                    position<\/span>: { lat<\/span>: 40.6782<\/span>, lng<\/span>: -73.9442<\/span> },\n                    address<\/span>: \"456 Park Ave, Brooklyn, NY\"<\/span>\n                },\n                {\n                    name<\/span>: \"Queens Outlet\"<\/span>,\n                    position<\/span>: { lat<\/span>: 40.7282<\/span>, lng<\/span>: -73.7942<\/span> },\n                    address<\/span>: \"789 Broadway, Queens, NY\"<\/span>\n                }\n            ];\n\n            const<\/span> infowindow = new<\/span> google.maps.InfoWindow();\n            const<\/span> bounds = new<\/span> google.maps.LatLngBounds();\n\n            \/\/ Add markers for each location<\/span>\n            locations.forEach(location<\/span> =><\/span> {\n                const<\/span> marker = new<\/span> google.maps.Marker({\n                    position<\/span>: location.position,\n                    map<\/span>: map,\n                    title<\/span>: location.name\n                });\n\n                \/\/ Extend bounds to include each marker<\/span>\n                bounds.extend(marker.getPosition());\n\n                \/\/ Add click event to show location details<\/span>\n                marker.addListener('click'<\/span>, () => {\n                    infowindow.setContent(`\n                        <div style=\"padding: 8px;\">\n                            <h3 style=\"margin: 0 0 5px 0;\">${location.name}<\/span><\/h3>\n                            <p style=\"margin: 0; color: #666;\">${location.address}<\/span><\/p>\n                            <a href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=${location.position.lat}<\/span>,${location.position.lng}<\/span>\" \n                               target=\"_blank\" \n                               style=\"color: #1a73e8; text-decoration: none;\">\n                                Get Directions\n                            <\/a>\n                        <\/div>\n                    `<\/span>);\n                    infowindow.open(map, marker);\n                });\n            });\n\n            \/\/ Auto-zoom to show all markers<\/span>\n            map.fitBounds(bounds);\n        }\n\n        \/\/ Handle API loading errors<\/span>\n        window<\/span>.gm_authFailure = function<\/span>(<\/span>) <\/span>{\n            alert(\"There was an error loading the map. Please check your API key.\"<\/span>);\n        };\n    <\/span><\/script<\/span>><\/span>\n<\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
        Replace `YOUR_FREE_API_KEY` with the restricted API key you created in Step 1.<\/strong><\/p>\n\n\n\n
        Step 3: Deploy Your Free Map<\/p>\n\n\n\n
          \n
        • 1.\u00a0 Test Locally:<\/strong> Open your HTML file in a web browser. You should see your map with all locations marked.<\/li>\n\n\n\n
        • 2.\u00a0 Upload to Your Website:<\/strong><\/li>\n\n\n\n
        •     – For basic websites: Upload the HTML file to your web hosting<\/li>\n\n\n\n
        •     – For WordPress: Use a “Custom HTML” block<\/li>\n\n\n\n
        •     – For other platforms: Look for an “Embed Code” or “HTML” option<\/li>\n<\/ul>\n\n\n\n
          The Hidden Costs of the “Free” Method<\/strong><\/p>\n\n\n\n
          While technically free financially, this approach comes with other significant costs:<\/p>\n\n\n\n
            \n
          • – Time Investment:<\/strong> Setting up the Google Cloud project and API key can take beginners over an hour<\/li>\n\n\n\n
          • – Technical Complexity: <\/strong>Requires understanding of API restrictions, billing accounts, and JavaScript<\/li>\n\n\n\n
          • – Security Risks: <\/strong>Improperly secured API keys can lead to unexpected charges<\/li>\n\n\n\n
          • – Maintenance Burden: <\/strong>Every location change requires editing code and re-uploading files<\/li>\n\n\n\n
          • – Limited Features: <\/strong>Advanced styling and clustering require extensive additional coding<\/li>\n<\/ul>\n\n\n\n
            A Truly Simple Free Alternative<\/strong><\/p>\n\n\n\n
            What if you could create a professional multi-location map in under 5 minutes, with no technical setup whatsoever?<\/p>\n\n\n