July 05, 2021

Add a Google Map with Multiple Markers

Google Maps is an API service that is used by a number of websites to display locations or points of interest on an interactive map. Learn how to add a Google map with multiple markers to a website.

Add Google Map with Multiple Markers
Download

Google Maps is most commonly used to show locations of different stores, business branches, properties, event venues or other places. In this post, we are going to add a Google map with multiple markers in simple steps.

 

How to Integrate a Google Map into a Website?

We can add a Google Map to a website by following a few steps. These steps involve retrieving an API key from Google, adding a map to an HTML and initializing the map in JavaScript. We will also use Google Maps fitBounds to center the map and display all markers.

 

Step 1: Get Google Maps API Key

We need a Google Maps JavaScript API key before the integration. This key will allow us to access Google services to display a map on the website. Steps to get a Google Maps API key are:

  • Go to Google Cloud Console after logging in.
  • Click on "Select a Project" or create one.
  • In the left sidebar, navigate to "API & Services" ➝ "Library".
  • Search for "Map JavaScript API" and click on it, then click "Enable" to enable this API.
  • After enabling the API, go to "Credentials" and click "Create Credentials" for this API.
  • Select the "API Key" and Google will generate an API key that can be used in our website to render Google Maps.
 

Step 2: Integrate a Google Map into an HTML Page

Now we can include a Google Maps script tag on our webpage after retrieving the API key.

  • Create an HTML page with a container element for the map.
  • Add a unique ID to the element to use when rendering the map. We are using google-map in this post.
  • Add the Google Maps script tag with the API key as a query parameter.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Add Google Map with Multiple Markers - Demo</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
        <link rel="stylesheet" href="css/style.css"/>
    </head>
    <body>
        <section class="section py-4">
            <div class="container">
                <div class="relative mb-4" style="padding-top: 56%;">
                    <div id="google-map" style="position: absolute; inset: 0;"></div>
                </div>
            </div>
        </section>
        <footer>
            <script src="https://maps.googleapis.com/maps/api/js?key={GOOGLE_MAPS_API_KEY}&callback=initMap" defer></script>
            <script src="js/javascript.js" type="text/javascript"></script>
        </footer>
    </body>
</html>
 

Step 3: Initialize Map and Add Multiple Markers

The next step is to initialize and render a Google map in the element with the ID of google-map using a small block of JavaScript code. We will add multiple points on Google map as markers. Steps to initialize the Google Map are:

  • Define an initial map with no initial value.
  • Create a function initMap to render the map.
  • Define a bounds constant to adjust the lat/lng bounds of the map.
  • Define a static locations array of markers for the map.
  • For each location, add a marker to Google map at the corresponding coordinates.
  • Create an infoWindow for each marker to display on click.
  • Add the marker position to the bounds.
  • Lastly, center the map and apply fitBounds to make sure all markers will appear on the map.

javascript.js

let map;

function initMap() {
    const mapOptions = {
        center: { lat: 37.7749, lng: -122.4194 }, // Main or initial location
        zoom: 12,
    };

    const bounds = new google.maps.LatLngBounds();

    // Static array of locations
    const locations = [
        {lat: 37.7749, lng: -122.4194, title: "San Francisco"},
        {lat: 37.8044, lng: -122.2712, title: "Oakland"},
        {lat: 37.3382, lng: -121.8863, title: "San Jose"}
    ];

    map = new google.maps.Map(document.querySelector("#google-map"), mapOptions);

    // Add markers on map for all locations
    locations.forEach(location => {
        const marker = new google.maps.Marker({
            position: {lat: location.lat, lng: location.lng},
            map: map,
            title: location.title
        });

        const infoWindow = new google.maps.InfoWindow({
            content: `<h3>${location.title}</h3><p>Some information or description about this location.</p>`,
        });

        bounds.extend(marker.position);

        marker.addListener("click", () => {
            infoWindow.open(map, marker);
        });
    });

    // Center the map and adjust size to show all markers
    map.setCenter(bounds.getCenter());
    map.fitBounds(bounds);
}
 

Step 4: Customize Google Map Markers

It is also possible to customize or change the marker by using the icon property of marker options. The following code will change the marker icon on Google map we added.

const marker = new google.maps.Marker({
    position: { lat: location.lat, lng: location.lng },
    map: map,
    title: location.title,
    icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
});

We just demonstrated with working code snippets how to add a Google map with multiple markers with each marker to a different location. Adding a Google map to a website not only helps visitors to get accurate directions to location(s) but also improves user experience. Google Maps can be easily customized using features like custom icons, info windows and more.

Home