remove circles from google map react

Question

I am using <GoogleMapReact> project, among the things I am rendering on the map, are circles called geoFences.

The problem is that I want to change the circles sometimes, but instead of chaning them, the map is rendering them on top of eachother.

    function renderGeoFences(map, maps) {
        const geoFencesSites = settings.geoFenceSites.filter((site) => !site.deleted);
        _.map(geoFencesSites, (site) => {
            let circle = new maps.Circle({
                strokeColor: tag.id!=='all-jobs' ? "orange":'#1aba8b26',
                strokeOpacity: 1,
                strokeWeight: 4,
                fillColor: '#1aba8b1f',
                fillOpacity: 1,
                map,
                center: { lat: Number(site.location.latitude), lng: Number(site.location.longitude) },
                radius: site.fenceSize,
            });
        });
    }

This function is called every time I change the value of tag (a state). Instead of just changing the stroke color like the function shows, they render on top of eachother, and you can tell by the fill color which should have opacity but it's getting darker and darker.

I tried removing it using the instructions here https://developers.google.com/maps/documentation/javascript/shapes#maps_circle_simple-typescript but it didn't work.

In this try, I created a list instead of just pushing them one at a time, and at the end, by the state called showJobsLocations. It seems that at first run, when the state is true, the circles won't render, which is good, but at the second run, they do, and then keep getting darker and darker, which means they won't render if I don't want them to, but once they are, they won't get deleted.

    function renderGeoFences(map, maps) {
    const geoFencesSites = punchClockStore.settings.geoFenceSites.filter((site) => !site.deleted);
    const circles = []
      _.map(geoFencesSites, (site) => {
        circles.push(new maps.Circle({
          strokeColor: '#1aba8b26',
          strokeOpacity: 1,
          strokeWeight: 4,
          fillColor: '#1aba8b1f',
          fillOpacity: 1,
          map,
          center: {lat: Number(site.location.latitude), lng: Number(site.location.longitude)},
          radius: site.fenceSize,
        }));
        if (showJobsLocations){
          // circle.setMap(null)
          if (circles.length) circles.map((circle) => circle.setMap(null));
        }
      });
  }

Anyone knows how to remove Circles from <GoogleMapReact> ?

HoangHieu · Answer 1 · 2021-08-14T17:01:45.997

You have to store the Circle to somewhere and use the function setMap(null) check the document here: https://developers.google.com/maps/documentation/javascript/shapes#circles

Here the sample changing the circle color (Run on Full screen mode)

var citymap = {
  chicago: {
    center: {
      lat: 41.878,
      lng: -87.629
    },
    fillColor: "#FF0000",
    population: 2714856,
  },
};


function replaceColorChicago(){
    citymap.chicago.cityCircle.setMap(null);
    citymap.chicago.cityCircle = null;
    citymap.chicago.fillColor = "blue";
    citymap.chicago.cityCircle = new google.maps.Circle({
       strokeColor: citymap.chicago.fillColor,
       strokeOpacity: 0.8,
       strokeWeight: 2,
       fillColor: citymap.chicago.fillColor,
       fillOpacity: 0.35,
       map: window.map,
       center: citymap.chicago.center,
       radius: Math.sqrt(citymap.chicago.population) * 100,
    });
}

function initMap() {
  // Create the map.
  window.map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: {
      lat: 37.09,
      lng: -95.712
    },
    mapTypeId: "terrain",
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    citymap[city].cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: citymap[city].fillColor,
      fillOpacity: 0.35,
      map: window.map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 200px;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Circles</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <button onclick="replaceColorChicago();">Replace Chicago Color</button>
    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=&v=weekly"
      async
    ></script>
  </body>
</html>

Sadly this is the example I tried and did not work. I guess because thsi code goes with and I use — Zusman, Aug 14 '21 at 13:38
You have to convert the sample to React here the JSFiddle https://jsfiddle.net/p0v9fbws/9/ — HoangHieu, Aug 14 '21 at 13:39
I tried it again, added an example, sadly it does not work , after the circle was drowned, it won't remove it next time. — Zusman, Aug 14 '21 at 16:50

score 1 · Answer 2 · answered Aug 17 '21 at 14:09

1

It looks like the idea of <GoogleMapReact> is that it's using the react component logic. Therefore the main structure looks like this:

<GoogleMapReact
    defaultCenter={this.props.center}
    defaultZoom={this.props.zoom}>

    <AnyReactComponent 
      lat={59.955413} 
      lng={30.337844} 
      text={'Im in the Map and visible'} />
  
  </GoogleMapReact>

To remove an item from the map, you have to remove the component from the GoogleMapReact Component.

Example: https://jsbin.com/xaderugare/edit?js,output If you remove the AnyReactComponent, its gone. Maybe this can help you.

answered Aug 17 '21 at 14:09

EleKadele

48
6

Thank you for your feedback. I do use this method to render other components on the map. however you are only able to render static component such as your example (it will stay the same size, no matter the zoom of the map) to render dynamic component it won't work (for example a that its radius is set by meters and we want it so grow if the map is zoomed in) – Zusman Aug 17 '21 at 14:13
Is there an opportunity to insert an `` component into the `` object, which changes its size by the scroll level? – EleKadele Aug 17 '21 at 14:18

score 1 · Answer 3 · answered Aug 18 '21 at 21:31

If you are dynamically rendering Circles on the Google Map, one thing you can do is save the data into a state. I am using the '@react-google-maps/api' package.

Take this code snippet as an example:

import { GoogleMap, LoadScript, Circle } from '@react-google-maps/api'

const [geoFences, setGeoFences] = useState([])
const [showCircles, setShowCircles] = useState(true)

<LoadScript googleMapsApiKey={YOUR_GOOGLE_API_KEY}>
 <GoogleMap {...config}>
  {showCircles && geoFences.map((fence, index) => (
    <Circle 
       key={index} 
       center={{lat: fence.lat, lng: fence.lng}} 
       options={options} 
       radius={()=>getRadiusFromZoomLevel(zoom)}
      />
    )
  )}
 </GoogleMap>
</LoadScript>

If you want a different radius based on the zoom level, you can define your own function by getting the current google map zoom level and calculate a custom radius. When you are trying to remove the circle on the map, just set the showCircle to false.

remove circles from google map react

3 Answers3