July 05, 2021

Add a Google Map with Multiple Markers

Google Maps is important for websites that intend to show locations, events or points of interest on an interactive map. Learn how to add a google map with multiple markers to a website step by step.

Add Google Map with Multiple Markers
Download

One of the most common uses of google maps with multiple markers is highlighting different stores as pickup points, branches, properties, venues or points of interest. In this post, we will add a google map with multiple markers in simple steps.

 

How to Add a Google Map to a Website (Step-by-Step)

Integrating a google map into a website provides users with an easy-to-navigate map, which enhances user experience. To add a google map to a website, there are some steps to follow. 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 map fitBounds to center the map and display all markers.

 

Step 1: Get Google Maps API Key

Before integrating google map into the website, we need a Google Maps JavaScript API key, which allows us to access google services and display a map on the website. Steps to get Google Maps API key:

  • Go to Google Cloud Console after login.
  • 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 which can be used in our website to render google maps. 
 

Step 2: Integrate a Google Map into an HTML Page

Now that we have our google maps API key, we can include google's JavaScript on our webpage.

  • Create an HTML page with all required elements.
  • Add the element with an ID of google-map, where the map will be rendered.
  • Include the google API script along with the API key we generated earlier.

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 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 google are:

  • Define an initial map without any value.
  • Create a function initMap as the main function to utilize the map.
  • Add bounds constant to adjust the map's lat/lng bounds. 
  • Add a static locations array to display as markers on google map.
  • For each location, add a marker to google map at the correspondent co-ordinates.
  • Create an infoWindow for each marker, which will be displayed when a marker is clicked.
  • Add the position of the maker to the bounds.
  • At the end, center the map and apply fitBounds to the google map. This will ensure all markers are visible on the map.

javascript.js

let map;

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

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

    // Static locations as an example
    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.getElementById("google-map"), mapOptions);

    // Add all locations as markers on map
    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 maker options. For example, the code snippet below 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'
});

That's it! We just added a google map with multiple markers, each representing a different location. Adding google map to a website not only enhances the user experience but also helps visitors to easily find the locations of branches, stores or any points of interest. Google maps can be easily customized using features like custom icons, info windows and more.

Home