Select Marker Located Below A Rectangle Selection Drawn By User Over Google Maps
code below includes appropriate comments for proper understanding. Please let me know if the question is not clear My requirement is to get the information of all markers under a r
Solution 1:
As suggested by Emmanuel Delay, reworked on this using map events and its working Here is the code for that, if it helps anyone. Please note we have to do control + mouse down + mouse move to draw a selection. Also the div element holding marker have a predefined name appended to identify it later
<!DOCTYPE html><html><head><metaname="viewport"content="initial-scale=1.0, user-scalable=no"><metacharset="utf-8"><title>Proto 1 displaying a list of cameras with custom markers.</title><style>html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#rectangle {
position: absolute;
border: 1px solid #c1e0ff;
z-index: 100000;
visibility: hidden;
background-color: #c1e0ff;
opacity: 0.5
}
</style></head><body><divid="map"></div><scriptsrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyBY_Jb6UGbhR1g9cM3uPGStdevUputZh5s"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script>var map;
var mapMouseMoveHandler;
var mapMouseDownHandler;
var mapMouseUpHandler;
document.addEventListener('keydown', controlKeyDown);
document.addEventListener('keyup', controlKeyUp);
functioncontrolKeyDown(e) {
if (e.ctrlKey) {
mapMouseDownHandler = google.maps.event.addListener(map, 'mousedown', cameraSelectionOnMouseDown);
}
}
functioncontrolKeyUp(e) {
if (e.key == 'Control') {
google.maps.event.removeListener(mapMouseDownHandler);
}
}
functiongetElementOffsetValues(elem) {
var left = 0,
top = 0;
while (elem) {
left += elem.offsetLeft;
top += elem.offsetTop;
elem = elem.offsetParent;
}
return {
leftValue: left,
topValue: top
};
}
functioninitMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 8.5241,
lng: 76.9366
}
});
overlay = newCameraLayer(map);
//setMarkers(map);
}
functioncameraSelectionOnMouseDown(e) {
map.setOptions({
draggable: false
});
var rectangleDiv = document.getElementById('rectangle');
var pixelPosition = overlay.getProjection().fromLatLngToDivPixel(e.latLng);
var initialX = pixelPosition.x;
var initialY = pixelPosition.y;
rectangleDiv.style.left = initialX + 'px';
rectangleDiv.style.top = initialY + 'px';
mapMouseMoveHandler = google.maps.event.addListener(map, 'mousemove', function(e) {
var newXY = overlay.getProjection().fromLatLngToDivPixel(e.latLng);
var wid = Math.abs(newXY.x - initialX);
var hei = Math.abs(newXY.y - initialY);
rectangleDiv.style.width = wid + 'px';
rectangleDiv.style.height = hei + 'px';
rectangleDiv.style.visibility = 'visible';
if (newXY.x < initialX && newXY.y >= initialY) {
rectangleDiv.style.left = newXY.x + 'px';
} elseif (newXY.y <= initialY && newXY.x >= initialX) {
rectangleDiv.style.top = newXY.y + 'px';
} elseif (newXY.y < initialY && newXY.x < initialX) {
rectangleDiv.style.left = newXY.x + 'px';
rectangleDiv.style.top = newXY.y + 'px';
}
})
mapMouseUpHandler = google.maps.event.addListener(map, 'mouseup', function(e) {
google.maps.event.removeListener(mapMouseMoveHandler);
google.maps.event.removeListener(mapMouseUpHandler);
var rectPosition = getElementOffsetValues(rectangleDiv);
$("div[id^='cameraDiv']").each(function(index, value) {
var elemToFind = value;
var elemToFindposition = getElementOffsetValues(elemToFind);
if ((((rectPosition.topValue + rectangleDiv.offsetHeight) > elemToFindposition.topValue) && (rectPosition.topValue < elemToFindposition.topValue || rectPosition.topValue <= (elemToFindposition.topValue + elemToFind.offsetHeight))) &&
(((rectPosition.leftValue + rectangleDiv.offsetWidth) > elemToFindposition.leftValue) && (rectPosition.leftValue < elemToFindposition.leftValue || rectPosition.leftValue <= (elemToFindposition.leftValue + elemToFind.offsetWidth)))) {
console.log(value);
}
})
rectangleDiv.style.visibility = 'hidden';
map.setOptions({
draggable: true
});
});
}
var overlay;
CameraLayer.prototype = new google.maps.OverlayView();
functionCameraLayer(map) {
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
CameraLayer.prototype.onAdd = function() {
var panes = this.getPanes();
var div = document.createElement('div');
div.style.position = 'absolute';
div.id = 'myCustomdiv';
this.div_ = div;
panes.overlayImage.appendChild(this.div_);
}
CameraLayer.prototype.draw = function() {
while (this.div_.firstChild)
this.div_.removeChild(this.div_.firstChild);
var msgContainer = document.createDocumentFragment();
for (i = 0; i < camerasToPlace.length; i++) {
var lat = camerasToPlace[i];
var lat1 = lat[1];
var lng1 = lat[2];
var latLng = new google.maps.LatLng({
lat: lat1,
lng: lng1
});
var pixelPosition = this.getProjection().fromLatLngToDivPixel(latLng);
var div1 = document.createElement('div');
div1.id = 'cameraDiv' + i;
div1.style.position = 'absolute';
var img = document.createElement('img');
img.src = 'camera.png';
img.style.position = 'absolute';
//img.style.width = '100%';//img.style.height = '100%';
div1.style.left = pixelPosition.x + 'px';
div1.style.top = pixelPosition.y + 'px';
//
div1.style.width = '32px';
div1.style.height = '32px';
div1.appendChild(img);
msgContainer.appendChild(div1)
}
var rectDiv = document.createElement('div');
rectDiv.id = 'rectangle';
rectDiv.style.position = 'absolute';
this.div_.appendChild(rectDiv);
this.div_.appendChild(msgContainer);
}
var camerasToPlace = [
['Camera1 located at TVM', 8.545394, 76.883503],
['Camera2 located at TVM', 8.7379, 76.7163],
['Camera3 located at TVM', 8.8932, 76.6141],
['Camera4 located at TVM', 8.7707, 76.8836],
['Camera5 located at TVM', 8.936906, 76.871831],
['Camera6 located at TVM', 8.485295, 76.916806]
];
google.maps.event.addDomListener(window, 'load', initMap);
</script></body></html>
Post a Comment for "Select Marker Located Below A Rectangle Selection Drawn By User Over Google Maps"