how to arrange the divs in the page like google map or other map site

We are now trying to build a map library like google/bing/yahoo,we will use it offline.

However I found that I have no idea about how to arange the divs in the page,since there are some many different types of divs.

1) the map tiles (small image 256X256)

2)the overlayer(marker/informationwindow/polygon...)

3)the control.

I have to try to read the html source codes of google and bing and etc. But I found it is difficult to understand them.

For exmaple,this frangment is copyed from another online map site of China.

As you can see,it is just a exmaple for how to adding a marker to the map.

But take the code,there are so many nested divs,most of them have the property of "width:0;height:0",I do not know why?

Since in my opinion,the marker is just an icon,just put it in the page.

Why use so many nested divs and even the "map" tag?

But I think they must have the advantages which I can not find.

Any one can gi开发者_运维知识库ve some suggestions?

Typically you insert a div in HTML when you want to create a block element but there is no more semantically-loaded element available with the correct meaning.

I think the answer to your question is to use just as many div elements as you need for your purposes. Do not add more just because you can. Sometimes you don't need any div elements at all - you can use other more meaningful elements such as img, ul, p, etc. You can sometimes avoid inserting a wrapping div by using CSS to change an inline element such as a into a block element.

If you need more later then add them later. Don't worry about what Google/Bing/Yahoo do. Their requirements are probably different to yours.

Have you looked at the Google Maps sample code and demo gallery?

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

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

I'm not sure how you would use this "offline" considering the sample you provided makes a call to the internet to get the map. Also all of these types of maps rely heavily on javascript and ajax calls to constantly update the map. Do you mean these pages would be secured and not public?

How about you just use maybe a 5x5 grid of divs, move them as they are dragged out of view, and then texture them dynamically with AJAX calls.

If I am understanding you correctly, all of the layers can be thrown on top of each other with z-index.

<div id="control" style="z-index:-1;"></div>
<div id="overlay" style="z-index:-2;"></div>
<div id="map" style="z-index:-3;"></div>

Then you can use each of these divs as containers for different parts of your map.

As you drag 1 div off to, say, the right, then it will automatically bump itself to the left side of your grid and retexture itself (background-image) through an ajax call.

That's what I would do, at least.

Use the Google Maps API you can see an example of custom tiles here: http://code.google.com/apis/maps/documentation/javascript/examples/maptype-base.html

You would need to copy all the files to your computer to be exceccible offline. Your javascript would look something like this:

function CoordMapType() {
}

CoordMapType.prototype.tileSize = new google.maps.Size(256,256);
CoordMapType.prototype.maxZoom = 19;

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('DIV');
  div.style.backgroundImage=coord+'.js';
  return div;
};

CoordMapType.prototype.name = "Tile #s";
CoordMapType.prototype.alt = "Tile Coordinate Map Type";

var map;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
var coordinateMapType = new CoordMapType();

function initialize() {
  var mapOptions = {
    zoom: 10,
    streetViewControl: false,
    mapTypeId: 'coordinate',
    mapTypeControlOptions: {}
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  google.maps.event.addListener(map, 'maptypeid_changed', function() {
    var showStreetViewControl = map.getMapTypeId() != 'coordinate';
    map.setOptions({'streetViewControl': showStreetViewControl});
  });

  // Now attach the coordinate map type to the map's registry
  map.mapTypes.set('coordinate', coordinateMapType);
}