Can you assist me?
I am currently working on a project involving drawing shapes (circles, polygons, rectangles, etc.) on Google Maps and saving them to the database for future reference. To save a circle, I have implemented the following code:
if (event.type === 'circle') {
CIRCLES.push({
"centerLat": event.overlay.center.lat(),
"centerLng": event.overlay.center.lng(),
"radius": event.overlay.radius,
"fillColor": event.overlay.fillColor,
"fillOpacity": event.overlay.fillOpacity,
"strokeWeight": event.overlay.strokeWeight,
"zIndex": event.overlay.zIndex
});
var cirlceArea = Math.PI * Math.pow(event.overlay.radius, 2);
var circleInfoWindow = new google.maps.InfoWindow({
content:'<h5>Circle Area</h5><b>'+cirlceArea +'M²</b>',
position:event.overlay.center,
map:map
});
infoWindowArr.push(circleInfoWindow);
The code works fine until I try to submit the data using jQuery ajax, at which point it triggers an error: Uncaught RangeError: Maximum call stack size exceeded. Interestingly, when I comment out the line
infoWindowArr.push(circleInfoWindow);$("#map-form").on("submit", function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
dataType: 'json',
url: '/dash/store',
data: {
"circles": CIRCLES,
"polygons": POLYGONS,
"rectangles": RECTANGLES,
"polylines": POLYLINES,
"projectName": projectName,
"description": description,
"infoWindow": infoWindowArr
}
I have searched through similar questions but have yet to find a solution. I suspect the issue may be related to the AJAX request. Any assistance would be greatly appreciated. Thank you.