Hi,
I took the example on the AJAX maps page where it says:
"You need at least one div container in which to place the map. Here,
it's called "map". By default, the map will expand to fit the size of
the div container. You should provide a height and width for the div
container or else the map may not size as expected."
Since I want to show my page in standards mode, I added a doctype to
it so that I got the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript"
src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=VvzHd8rV34GF1BoZV2QiN5cqGxra\
x0dBCF5RnIhTci06M_AEQFfn6EfiKmxf_Q--"></script>
<style type="text/css">
#map{
height: 75%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create a map object
var map = new YMap(document.getElementById('map'));
// Add map type control
map.addTypeControl();
// Set map type to either of: YAHOO_MAP_SAT, YAHOO_MAP_HYB,
YAHOO_MAP_REG
map.setMapType(YAHOO_MAP_REG);
// Display the map centered on a geocoded location
map.drawZoomAndCenter("San Francisco", 3);
</script>
</body>
</html>
This code produces a map of size 400x400 pixels, despite setting the
width and height. I also tried the following:
<div id="map" style="width: 100px; height: 75%"></div>
but that produced the same effect.
Can anyone tell me how I can get the correct behavior in standards
mode for this?
It would also be good to know how the ajax map actually calculates the
space that it needs. Where, for example, does the 400 pixels come from?