How to Map Multiple Points on Map (Quick Guide)

• How to Map Multiple Points on Map (Quick Guide), Без рубрики

How to Map Multiple Points on a Map and Embed It on Your Website

Displaying multiple locations on a custom map is a powerful way to show your store network, event locations, or service areas. While Google Maps offers a powerful API, the process can be technically daunting. This guide will show you a functional method using the Google Maps Platform and then introduce a far simpler alternative.

The manual method requires a Google Cloud account, API keys, and some comfort with code.

The Manual Method: Using the Google Maps JavaScript API

This approach offers maximum control but involves several complex steps.

Step 1: Prerequisites – Get Your API Key

  • 1.  Create a Google Cloud Project: Go to the [Google Cloud Console](https://console.cloud.google.com/), create a new project, and enable billing (you get a $200 monthly credit, which covers most small-site usage).
  • 2.  Enable APIs: Navigate to “APIs & Services > Library” and enable both the Maps JavaScript API and the Geocoding API.
  • 3.  Create & Secure an API Key: Go to “APIs & Services > Credentials”, create an API key, and restrict it to the two APIs you just enabled. For security, you can also restrict it by your website’s domain (e.g., `https://yourwebsite.com/*`).

Step 2: Build the Map with Code

Create an HTML file and use the following code. This code creates a map, adds multiple markers, and even includes a clickable info window for each point.

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

html

<!DOCTYPE html>
<html>
<head>
    <title>Multi-Point Location Map</title>
    <!-- Load the Google Maps API with your key -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap"></script>
    <style>
        /* Set the size of the map div */
        #map {
            height: 500px;
            width: 100%;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <h2>Find Us Here</h2>
    <div id="map"></div>

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

            // Create a new map instance
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 10,
                center: centerPoint,
                mapId: 'DEMO_MAP_ID' // Optional: for custom map styles
            });

            // Define your locations in an array: [Title, Latitude, Longitude]
            const locations = [
                ['London HQ', 51.5074, -0.1278],
                ['Westside Store', 51.5160, -0.2100],
                ['Eastend Warehouse', 51.5250, -0.0500]
            ];

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

            // Loop through the locations and place a marker for each
            locations.forEach(([title, lat, lng]) => {
                const marker = new google.maps.Marker({
                    position: { lat, lng },
                    map: map,
                    title: title, // Appears on hover
                    // icon: 'custom-icon.png' // Uncomment to use a custom marker icon
                });

                // Add a click listener to open the InfoWindow
                marker.addListener('click', () => {
                    infowindow.setContent(`<strong>${title}</strong>`);
                    infowindow.open(map, marker);
                });
            });
        }
    </script>
</body>
</html>
Code language: HTML, XML (xml)

Replace `YOUR_API_KEY_HERE` in the script tag with the actual API key you generated.

Step 3: Embed the Map on Your Site

You can upload this HTML file directly to your web server. If you’re using a content management system like WordPress, Wix, or Squarespace, you will need to paste this code into an “HTML Embed” or “Code Block” module.

The Reality Check: Challenges of the Manual Method

While powerful, this approach is filled with friction:

Complex Setup: Managing Google Cloud projects and billing can be intimidating for non-developers.

Security Risks: An unrestricted API key can lead to massive unexpected charges if stolen.

Geocoding Hassle: You must manually find and input the latitude and longitude for every address.

Rigid Customization: Changing simple things like the map’s look or marker icons requires diving back into the code.

A Better, Faster Solution: Use MapsFun.com

What if you could create a beautiful, interactive map with multiple points in under five minutes, without writing a single line of code?

MapsFun.com is built specifically for this purpose. It streamlines the entire process:

  • 1.  Visual Point-and-Click Editor: Simply search for an address and click to add a point. No geocoding required.
  • 2.  Zero API Management: We handle all the technical backend, so you don’t need a Google Cloud account.
  • 3.  Instant Customization: Easily choose from different map styles, upload custom markers, and design rich info windows with text and images.
  • 4.  One-Click Embedding: Get a clean, simple embed code to paste into any website builder.

Stop dealing with complex code and API configurations. **Create a professional multi-point map effortlessly with MapsFun.com.