How to Add Multiple Points on Google Maps (2025 Easy Guide)

• How to Add Multiple Points on Google Maps (2025 Easy Guide), Без рубрики

How to Create a Google Map with Multiple Points: A Step-by-Step Developer’s Guide

Displaying multiple locations on a Google Map is a powerful way to showcase your business branches, event locations, or travel itineraries. While the end result is impressive, the process of creating a custom multi-point map involves several technical steps. This guide will walk you through the official method using the Google Maps JavaScript API.

This method requires a Google Cloud account, enabling APIs, and some basic coding knowledge.

Method: Using the Google Maps JavaScript API

This approach gives you full control over your map’s appearance and functionality. Follow these steps carefully.

Step 1: Set Up Your Google Cloud Project and API Key

The API key is your passport to use Google Maps services. Getting it is a multi-step process.

  • 1.  Go to the Google Cloud Console: Navigate to [https://console.cloud.google.com/](https://console.cloud.google.com/).
  • 2.  Create a Project: Click the project dropdown and create a new project. Give it a relevant name like “My Business Map”.
  • 3.  Enable Billing: You must enable billing on your project. Don’t worry—Google offers a **$200 monthly credit**, and a simple map with a few thousand views will likely cost nothing.
  • 4.  Enable the Necessary APIs: Go to “APIs & Services” > “Library”. Search for and enable these two critical APIs:
    • Maps JavaScript API
    • Geocoding API (to convert addresses into coordinates)

You must enable the correct APIs in your Google Cloud project.

  • 5.  Create Your API Key: Go to “APIs & Services” > “Credentials”. Click “Create Credentials” and select “API key”.
  • 6.  Restrict Your Key (VERY IMPORTANT): Click on the newly created API key and set restrictions. Under “Application restrictions,” choose “HTTP referrers,” and under “API restrictions,” restrict the key to the Maps JavaScript API and Geocoding API. This prevents others from using your key and running up your bill.

Step 2: Build the Web Page with the Map Code

Now, create an HTML file and use the following code. This code initializes a map, defines an array of locations, and uses a loop to place a marker for each one.

Create a file named `multi-point-map.html` and paste this code:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Service Locations</title>
    <!-- Include the Google Maps JS API with your key -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap"></script>
    <style>
        /* The map container must have a defined height */
        #map {
            height: 600px;
            width: 100%;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 20px auto;
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <h1>Find Our Services Near You</h1>
    <p>We have multiple locations to serve you better. Check the map below.</p>
    
    <!-- This is where the map will be rendered -->
    <div id="map"></div>

    <script>
        // The initMap function is called once the API library is loaded
        function initMap() {
            // Set the initial center of the map (often the first point or a central location)
            const mapCenter = { lat: 51.5074, lng: -0.1278 }; // London coordinates

            // Create a new map instance and attach it to the 'map' div
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 10,
                center: mapCenter,
                mapTypeControl: true,
                streetViewControl: false
            });

            // Define your locations in an array: [Title, Latitude, Longitude, Description]
            const locations = [
                ['Central London Office', 51.5074, -0.1278, 'Our main headquarters.'],
                ['North London Branch', 51.5853, -0.1283, 'Full services available.'],
                ['South London Warehouse', 51.4527, -0.1388, 'Logistics and distribution center.']
            ];

            // Create a single InfoWindow to be reused for all markers
            const infowindow = new google.maps.InfoWindow();

            // Loop through each location in the array and create a marker
            locations.forEach(([title, lat, lng, description]) => {
                // Create a new marker
                const marker = new google.maps.Marker({
                    position: { lat: lat, lng: lng },
                    map: map, // Attach marker to the map
                    title: title, // Tooltip on hover
                    // icon: 'custom_pin.png' // You could add a custom icon here
                });

                // Add a click listener to each marker to show an info window
                marker.addListener('click', () => {
                    infowindow.setContent(`
                        <div style="padding: 10px;">
                            <h3 style="margin: 0 0 8px 0;">${title}</h3>
                            <p style="margin: 0;">${description}</p>
                        </div>
                    `);
                    infowindow.open(map, marker);
                });
            });
        }
    </script>
</body>
</html>
Code language: HTML, XML (xml)

 Replace `YOUR_API_KEY_HERE` in the script tag with the restricted API key you generated in Step 1.

Step 3: Embed the Map on Your Website

Open the `multi-point-map.html` file in a web browser to test your map. If it works, you can embed it on your website. For static sites, upload the file. For CMS platforms like WordPress, use a custom HTML block to paste the entire code.

The Challenge with the Official Method

While powerful, this approach has significant barriers:

  • Technical Complexity: Requires comfort with code, cloud consoles, and API management.
  • Billing Setup: Mandatory billing activation is a hurdle for many, despite the free tier.
  • Security Concerns: Unsecured API keys are a major risk.
  • Manual Updates: Every change requires editing code and redeploying.

A Simpler, Faster Alternative

What if you could create a feature-rich, multi-point map without writing code or managing a cloud console?

MapsFun.com is designed specifically for this purpose. It eliminates all the technical headaches:

  • 1. No-Code Visual Editor: Click on the map to add points. Search for addresses. It’s as simple as using Google Maps itself.
  • 2.  Zero API Configuration: We handle all the backend complexity. No keys, no billing, no security risks.
  • 3.  Advanced Features: Easily customize map styles, marker icons, and info windows with a user-friendly interface.
  • 4.  Instant Publishing: Get a clean, secure embed code to paste into any website or CMS.

Why spend hours on code and configuration? Create a stunning, professional multi-point map in minutes with MapsFun.com.