Currently, I am creating a traffic jam application using MeteorJS 1.4.4.2 + ReactJS. Previously, I have utilized the atmosphere google map package and two popular Google Map npm packages (istarkov and tomchentw), which worked well but did not offer the specific feature I required. Thus, I decided to integrate the Google Maps API directly in order to access its complete set of features.
My main objective was to have the ability to remove selected markers on the map
My Attempt:
// In the same file as the mapInit function
let addMarker = (location) => {
let marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP,
draggable: true
}).addListener('click', (e) => removeMarkerOnClick(e));
markers.push(marker);
};
let removeMarkerOnClick(marker) => {
let lat = marker.latLng.lat(),
lng = marker.latLng.ln(),
position = {};
markers = markers.reduce((new_markers, marker) => {
position = marker.f.position;
if (position.lat() !== lat && position.lng() !== lng) {
new_markers.push(marker);
} else {
marker.setMap(null);
}
return new_markers;
}, markers);
}
window.initMap = () => {
//.... body hidden
map.addListener('click', (e) => addMarker(e.latLng));
}
Error from client console:
Uncaught TypeError:
MapFunctions.jsx:74
marker.setMap is not a function
at http://localhost:3000/app/app.js?hash=1f01aac45aac6af0dd009bc4623183b2511f62bf:419:20
at Array.reduce (native)
at removeMarkerOnClick (http://localhost:3000/app/app.js?hash=1f01aac45aac6af0dd009bc4623183b2511f62bf:413:23)
at _.Ge.<anonymous> (http://localhost:3000/app/app.js?hash=1f01aac45aac6af0dd009bc4623183b2511f62bf:403:16)
...
Possible Solutions Tried:
Attempting to use setOnMap(null) also resulted in the same error, setOnMap() is not a function
Trying marker.setVisibility(false) also led to the same issue, ... not a function
After extensive searching online for an hour and a half, I have yet to find a solution. Any assistance would be greatly appreciated. Thank you for taking the time to read this.