How to create and customize cluster markers in React
In this code-along, Leigh Halliday takes 500 advanced markers representing trees in Toronto and groups them into clusters on a map for a more pleasant user experience. Watch along as Leigh uses the vis.gl React components library for Maps JavaScript API to render the advanced markers, put them in state, and pass them along to a cluster.
npm install @vis.gl/react-google-maps
npm install @googlemaps/markerclusterer
Source code → https://goo.gle/47Ix7z7
Homepage for vis.gl/react-google-maps → https://goo.gle/47cOk38
Chapters:
00:00 - Intro
00:25 - Imports used in this tutorial
01:00 - How to add markers from a dataset
01:36 - Rendering a map
04:27 - How to add advanced markers
07:05 - Customizing an advanced marker
09:38 - Getting started with marker clusters
11:44 - Setting up a cluster reference
13:48 - Passing advanced markers to a cluster
16:48 - Solving for missing advanced markers
17:21 - Solving for unhandled runtime errors
19:45 - Grouping with clusters
21:13 - Seeing it all together
22:37 - Summary
Watch more Geocasts → https://goo.gle/Geocasts
Subscribe to Google Maps Platform → https://goo.gle/GoogleMapsPlatform
#GoogleMapsPlatform #Geocasts #React