Creating a selectable/clickable overlay on Google Maps

The background purpose is that I want to divide a country into different regions. For example, divide USA into all its states. Each state shoul开发者_如何学运维d be clickable or selectable in a checkbox way, so that I can select multiple states. All this is a part of a searching filter.

The purpose of dividing a country into regions is that each region contains for example a number of hotels, so that when I select a region, I narrow down the filter to only hotels that exist in that region.

Is there a way to accomplish this using Google Maps? Most likely I won't create very many regions, so if the only way is to draw the lines manuelly, thats acceptable.

If your solution is something else then what I'm suggestion, please write your solution anyway!

---

This is an old question, but I'll answer anyways if anyone encounters this kind of problem too. I'm currently working on a similar kind of task where I have to create selectable roads. I came up with a solution by using JavaScript "classes" containing properties, listeners and methods, and adding them to map canvas with setMap(map) function in a loop.

Basically this creates the map canvas with selectable areas dynamically, but you still have to create a data set manually that contains the areas, their name and other information and their coordinate boundaries.

I think it's also easy to create selectable rectangles, circles, road etc. other objects with hover effects using this method.

Pseudocode:

function initialize() {
    // initialize Google Maps canvas normally

    // areaDataSet variable is an array of containing all areas to be 
    // drawed and the necessary information needed to create polygon areas
    // (coordinate boundaries, and so on)

    // For example var areaDataSet = [{ "name" : "Texas", "coords" : [latitudes and longitudes], "hasHotelsInCoords" : [...] }, { ... } ]

    var areas = [];

    for ( i in areaDataSet ) {
         var area = new google.maps.Polygon({ 
             path: [coordinates as google.maps.LatLng objects] 
         });
         areas.push(new MyAreaClass(area));
    }

    for ( i in areas ) {
        areas[i].setMap(map);
    }
}

function MyAreaClass(areaData) {
    this.area = areaData;
    var selected = false; // not selected by default
    // + all other data you want the areas to contain

    // Add listeners using google.maps.event.addListener to all class instances
    // when they are constructed.

    // for instance:

    google.maps.event.addListener(area, 'mouseover', function() {
        if (selected == false) {
           area.setOptions( { [options you want to set when area is hovered 
           but not selected, for instance, color change] });
        };
        else {
            area.setOptions({ [options you want to set when area is hovered 
            and selected] });
        };
    });

    // Add listeners also for when area is not hovered anymore, respectively,
    // and other methods you might want to call when areas are being interacted with.
};

Hopefully this helps!

Best regards