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> ?
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>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.
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.