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
Way to add multiple custom markers to Google Maps
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 ReactJS2. 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 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
Thank you for reading. Happy Coding!
