After researching various articles and posts on Stack Overflow about selecting multiple markers in Google Maps, I have been unable to find a solution for dragging two markers simultaneously. While I've managed to make it work so that one marker can trigger an event on its sibling and drag the related marker, it interrupts the dragging event on the original clicked marker.
Unfortunately, using complex polygons is not feasible as changing the color of just one path on a complex marker SVG poses challenges. Instead, I have to create two separate SVGs - one for the center fill and another for the outer fill - and then adjust the color of the outer fill accordingly.
This is the approach I've taken:
Firstly, I create the markers and position them at the same location.
Then, I pass these markers into the following function:
addMultiMarkerListener:function(id, outer, inner){
var arr = ['mousedown', 'mouseup', 'click','mouseover','mouseout', 'dragend','drag','dragstart'];
var evtArr = {};
_.each(arr, function(evt){
evtArr[evt] = {};
evtArr[evt][id] = false;
outer.addListener(evt, function(){
if(!evtArr[evt][id]){
evtArr[evt][id] = true;
google.maps.event.trigger(inner, evt);
evtArr[evt][id] = false;
}
})
inner.addListener(evt, function(){
if(!evtArr[evt][id]){
evtArr[evt][id] = true;
google.maps.event.trigger(outer, evt);
evtArr[evt][id] = false;
}
})
})
},
My goal is to trigger the mousedown event for both markers so that I can click and drag them at the same time. Currently, the method I'm using halts the first mousedown event when triggering the mousedown event on the sibling marker.
I have also considered implementing a separate event that would not interfere with the initial one. It may require some brainstorming, but I believe I can achieve a solution. Any insights or suggestions from others would be greatly appreciated.