the interactive inside the map tiles of google map

I have asked this question in stackoverflow,however I do not get the final answer what I wanted.

So I want to post it again,and give more details.

The orignal post can be found here

When the mosue over a feature in the map tiles(img),the cursor will be changed to "pointer",and you can click the right place,then you will get the informatin window. This is what I mean the "interactive".

In my opinion,when we drag or zoom the map,google will make a request to the server to get the features inside the current map view. Then when the mouse move inside the Bound of one feature,the effect will occur.

But what I wonder is that how can it be so precise?

Take this tile as exmaple:

The area of the feature "Ridley...." is not a regular rect,if your mouse is not in the area of this feature,the cursor will not change.

But once your mouse come to the right place(inside the area of this feature),the effect will come out,check this:

Since the mouse's position is precisly inside the area of the feature,so I can click it and get the information window.

I 开发者_如何学编程just want to know how to implement this?

Update:

The effect only come out when the mouse over the certain area,check this:

The effect come out only if the mouse move inside the hightlighted rect area,very precisly.

This uses javascript and the actual content to show is already populated from the available server in a div element with display none style property. Each 256 x 256 image at zoom level 16 contains information about x and y as well as server. When viewing google maps use firebug to look at what changes the code and you will notice many div elements with class "css-3d-bug-fix-hack" at the bottom of image list. One of these elements will have childrens as well. First child is hidden. Simply remove display none off that child and it will appear.

To implement such functionality you need to know how to obtain cursor position using javascript, how to find out if cursor is in a div element using javascript or you can use JQuery Selectors to test current hovered element of certain type. You also need to understand absolute positioning in CSS. Then use javascript to hide and show elements at cusrsor position.

Is it possible they are using a polygon-based AREA tag: http://www.w3.org/TR/html4/struct/objects.html#edef-AREA?

By definition, these tags do not need to be rectangles. They could use something like <area shape='poly' coords='...'> where the coordinates could be as precise as they desire.

UPDATE: I didn't have a chance to check http://maps.google.com before answering, but I can now tell they aren't using image maps, and therefore, the functionality is not based on AREA tags. However, if you desire the functionality of non-rectangular image map overlays, my initial response still stands.

A google.maps.Marker object can listen to the following user events, for example:

'click' 'dblclick' 'mouseup' 'mousedown' 'mouseover' 'mouseout'

http://code.google.com/apis/maps/documentation/javascript/events.html

GoogleMap uses InfoWindows to overlay the description of data over Marker.

InfoWindows displays content in a floating window above the map. The info window looks a little like a comic-book word balloon; it has a content area and a tapered stem, where the tip of the stem is at a specified location on the map. You can see the info window in action by clicking business markers on Google Maps. The InfoWindow constructor takes an InfoWindow options object, which specifies a set of initial parameters for display of the info window. Upon creation, an info window is not added to the map. To make the info window visible, you need to call the open() method on the InfoWindow, passing it the Map on which to open, and optionally, the Marker with which to anchor it. (If no marker is provided, the info window will open at its position property.)

http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

Create a Marker and attach the infowindow with a mouseover event

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
  zoom: 4,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, Test 
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Uluru (Ayers Rock)"
});

google.maps.event.addListener(marker, 'mouseover', function() {
  infowindow.open(map,marker);
});

EDITED after looking at your comment

Google Maps uses JavaScript extensively. As the user drags the map, the grid squares are downloaded from the server and inserted into the page. When a user searches for a business, the results are downloaded in the background for insertion into the side panel and map; the page is not reloaded. Locations are drawn dynamically by positioning a red pin (composed of several partially-transparent PNGs) on top of the map images.

A hidden IFrame with form submission is used because it preserves browser history. The site also uses JSON for data transfer rather than XML, for performance reasons. These techniques both fall under the broad Ajax umbrella. [From Wikipedia]