message: feat(map): draw service area directly
  Instead of using event listeners on the markers, just call
  a function to redraw the service areas.
diff: @@ -128,18 +128,22 @@ class Map extends React.Component<Props, {}> {
  map.setZoom(18);
  });
  - // The Marker Cluster app doesn't have events for when it renders a single marker without a cluster.
  - // We want to piggyback on an existing event so that we can render a circle of influence
  - // when the marker cluster lib tells us it's singled out a marker.
  - marker.addListener('title_changed', () => {
  - // Save some processing juice here by skipping on hidden markers (based on a filter users select for service types)
  - if (!marker.getVisible()) {
  - return;
  + return marker;
  + });
  +
  + if (markers.length) {
  + const position = markers[0].getPosition();
  + if (position)
  + map.setCenter(position);
  }
  +
  + const drawMarkerServiceArea = (marker: google.maps.Marker) => {
  if (m.clustering?.state !== 'idle') {
  return;
  }
  + const info: MarkerInfo = marker.get('info');
  +
  let color: string;
  const services = (marker.getTitle() || '').split(',')
  if (services.includes('mobility')) {
  @@ -159,7 +163,7 @@ class Map extends React.Component<Props, {}> {
  const topRight = mapBoundingBox.getNorthEast();
  const bottomLeft = mapBoundingBox.getSouthWest();
  const markerPosition = marker.getPosition();
  - const radius = location.serviceRadius;
  + const radius = info.serviceRadius;
  // Now compare the distance from the marker to corners of the box;
  if (markerPosition) {
  @@ -182,16 +186,7 @@ class Map extends React.Component<Props, {}> {
  }
  }
  }
  - });
  -
  - return marker;
  - });
  -
  - if (markers.length) {
  - const position = markers[0].getPosition();
  - if (position)
  - map.setCenter(position);
  - }
  + };
  // Add a marker clusterer to manage the markers.
  const markerCluster = new MarkerClusterer(map, markers, {
  @@ -213,6 +208,7 @@ class Map extends React.Component<Props, {}> {
  // The clusters have been computed so we can
  markerCluster.addListener('clusteringend', (newClusterParent: MarkerClusterer) => {
  + console.log('clusteringend');
  m.clustering = {
  state: 'idle',
  serviceCircles: []
  @@ -232,7 +228,7 @@ class Map extends React.Component<Props, {}> {
  // Draw a circle for the marker with the largest radius for each cluster (even clusters with 1 marker)
  if (maxMarker) {
  - maxMarker.setTitle(maxMarker.getTitle() || null) // Trigger Radius Drawing on max radius marker for the cluster
  + drawMarkerServiceArea(maxMarker);
  }
  });
  