Dynamic Scrolling JavaScript and GoogleMaps

Question

anyone has an idea about how this could be done (JavaScript + GoogleMaps):

http://aqarmap.com/eg/Cairo/en

when you mouse-over the map, the table below is automatically set the view to the selected item.

thanks a lot in advance

Answer 1

You should take a look at the Google Maps API v3. With the new API you can add event listeners to markers and other UI components which is called "Overlays" that you've added to the map. To add the regions you should use an overlay called "Polygon". And for the "house object" you should probably use "Markers".

You add event listeners with the google.maps.event API:

google.maps.event.addListener(overlay, 'click', function() {
  // This is called when the overlay is clicked.
});

There are other events that you can listen for, such as 'dblclick', 'mouseup', 'mousedown' etc. look here: http://code.google.com/intl/da-DK/apis/maps/documentation/javascript/events.html for some examples.

About the table which scrolls automatically you can use the DOM property .scrollTop of the element that you need to scroll. It has been answered before here: How to scroll to an element inside a div?