Add Multiple Custom Markers to Google Maps in ReactJS

Today we will show you how to add multiple custom markers to google maps in ReactJS. We will simply use the Google Maps API to add custom markers without using the npm plugins.

Add multiple markers in React JS, Google Maps and React With a Custom Marker without plugin, React google maps with multiple markers, only one info window, How to Add Multiple Custom Markers to Google Maps in ReactJS, Create custom marker in ReactJS, Customizing a Google Map marker in React JS, React Google Maps add marker, Change the marker icon size.

Checkout more articles on ReactJS

• Validate Image Content in ReactJS
• Render an Array in ReactJS
• Scroll to the top of the page after render in ReactJS
• Image zoom in ReactJS
• Image upload in ReactJS

Way to add multiple custom markers to Google Maps

1. Implement Google Maps in ReactJS
2. Add multiple custom markers
3. Output

1. Implement Google Maps in ReactJS

Let’s start with implement Google Maps in ReactJS. If you don’t know how to do this then refer link below for your reference.

Implement Google Maps in ReactJS

2. Add multiple custom markers

To add multiple custom markers, we will consider the predefined list of the markers with the icon image.

We will loop through each object and generate marker on map. Also we need to fit the map which contains the all markers.

GMap.js

import React, { useEffect, useRef } from 'react';

const GMap = () => {
  const googleMapRef = useRef(null);
  let googleMap = null;

  // list of icons
  const iconList = {
    icon1: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Flag--Right-Chartreuse.png',
    icon2: 'https://cdn2.iconfinder.com/data/icons/IconsLandVistaMapMarkersIconsDemo/256/MapMarker_Marker_Outside_Chartreuse.png',
    icon3: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Ball-Right-Azure.png',
    icon4: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Marker-Outside-Pink.png'
  }

  // list of the marker object along with icon
  const markerList = [
    { lat: 59.2967322, lng: 18.0009393, icon: iconList.icon1 },
    { lat: 59.2980245, lng: 17.9971503, icon: iconList.icon2 },
    { lat: 59.2981078, lng: 17.9980875, icon: iconList.icon3 },
    { lat: 59.2987638, lng: 17.9917639, icon: iconList.icon4 }
  ]

  useEffect(() => {
    googleMap = initGoogleMap();
    var bounds = new window.google.maps.LatLngBounds();
    markerList.map(x => {
      const marker = createMarker(x);
      bounds.extend(marker.position);
    });
    googleMap.fitBounds(bounds); // the map to contain all markers
  }, []);


  // initialize the google map
  const initGoogleMap = () => {
    return new window.google.maps.Map(googleMapRef.current, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8
    });
  }

  // create marker on google map
  const createMarker = (markerObj) => new window.google.maps.Marker({
    position: { lat: markerObj.lat, lng: markerObj.lng },
    map: googleMap,
    icon: {
      url: markerObj.icon,
      // set marker width and height
      scaledSize: new window.google.maps.Size(50, 50)
    }
  });

  return <div
    ref={googleMapRef}
    style={{ width: 600, height: 500 }}
  />
}

export default GMap;

Rest of the code will remain the same.

3. Output

Output - Add Multiple Custom Markers to Google Maps in ReactJS - Clue Mediator

Thank you for reading. Happy Coding!

Demo & Source Code

Github Repository StackBlitz Project