Is this possible in Google Maps? Drawing a box manually on Google Maps - google-maps

Question

I am working on integrating Google Maps into a web application and I have a question of possibility.
I am using ASP .Net 4.0 as the basis for the code, but i suspect i will have to use JavaScript to achieve most of this, which is. Basically I want to display a bunch of markers on a map from Lat Long locations i have stored in a database, then have the user be able to draw a box on the map with the mouse, then get back the lat long of the four corners of the box.
If anyone knows how i could do this this would be of great help to me!
Thanks

Answer 1

The complexity of the Google Maps API has kept me scared for years. Recently I stumbled upon a jQuery plugin called GMap3 that does a lot of the heavy lifting for you.
I would suggest that after initializing and all that, you print a Javascript block from your .NET code, with something like this:
var markersFromDatabase = [
[60.164967,24.94758],
[59.956495, 10.764599]
//etc. This array should be printed from your serverside code
];
var markersToBeAdded = [];
jQuery.each(markersFromDatabase, function(indexOfItem, valueOfItem){
markersToBeAdded.push({
lat:valueOfItem[0],
lng:valueOfItem[1],
options: {
draggable: false,
icon: "img/your_awesome_icon.png",
title: "This is an icon from my database!"
}
});
});
jQuery("#map_canvas").gmap3(
{ action: 'addMarkers',
markers: markersToBeAdded
}
);
Edit: I realize now that I only answered half of your question. I'm afraid I have no apparent answer to the selection box. I suspect that you can use addRectangle or, in a worst case scenario, addFixPanel that lets you add a transparent <div> over your map canvas (and then trigger mouse events for that).

Answer 2

Here is one way to do it with Google Maps API 3's overlay editable feature.
Google Maps Overlay Editable

Answer 3

If your question is "How to select multiple markers with a rectangle", you can do something like this:
var markers = []; // This array must be filled with your data
var rectangles = [];
var triggeredMarkers = [];
google.maps.event.addListener(drawingManager, 'rectanglecomplete', updateSelection);
function updateSelection(rectangle){
var lat_max = rectangle.getBounds().getNorthEast().lat();
var lat_min = rectangle.getBounds().getSouthWest().lat();
var lng_max = rectangle.getBounds().getNorthEast().lng();
var lng_min = rectangle.getBounds().getSouthWest().lng();
rectangles.push(rectangle);
for(var i=0;i<markers.length;i++){
if((lat_min < markers[i].getPosition().lat() ? (markers[i].getPosition().lat() < lat_max ? true:false):false)
&& (lng_min < markers[i].getPosition().lng() ? (markers[i].getPosition().lng() < lng_max ? true:false):false)){
triggeredMarkers.push(markers[i]);
}
}
}
The rectangles array is used to hold rectangles in order to be able to erase them later.
But if you just want a simple function that handle Polygons, there is this one that really can be helpful for you. It can be used like this:
var markers = [];
var polygones = [];
var triggeredMarkers = [];
google.maps.event.addListener(drawingManager, 'polygoncomplete', updateSelection);
function updateSelection(polygon){
polygones.push(polygon);
for(var i=0;i<markers.length;i++){
if(google.maps.geometry.poly.containsLocation(markers[i].getPosition(),polygon)){
triggeredMarkers.push(markers[i]);
}
}
}
For rectangles and circles there's this answer that can help you.