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).