July 05, 2021

Add Google Map with Multiple Markers

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

Add Google Map with Multiple Markers
Download

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

 

How to Add Google Map to Website

Integrating google map into website provides users an easy-to-navigate map which enhances user experience. In order to add a google map to website there are certain steps to follow. These steps involve retrieving 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 to website we need Google Maps JavaScript API key which allows to access google services and display map on 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 Google Map to an HTML Page

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

  • Create an HTML page with all required elements.
  • Add the element with an id 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 type="text/javascript" src="js/javascript.js"></script>
        </footer>
    </body>
</html>
 

Step 3: Initialize Map and Add Multiple Markers

Next step is to initialize and render google map in element with id of google-map using small block of JavaScript code. We will add multiple points on google map as markers.Steps to initialize google are:

  • Define initial map without any value.
  • Create a function initMap as a main function to utilize the map.
  • Add bounds constant to adjust map's lat/lng bounds. 
  • Add 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 maker to bounds.
  • At the end center position the map and apply fitBounds to google map. This will ensure all markers are visible on 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 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 website not only enhances the user experience but also helps visitor to easily find the locations of branches, stores or any points of interest. Google maps can be easily customized using the features like custom icons, info windows and more.

Home