У меня есть простой макет страницы с двумя элементами: один сверху и один снизу.В нижней части находится раздел, в котором я хочу загрузить свою карту Google.Я хочу, чтобы карта заполняла нижний элемент div и автоматически меняла его размер при изменении размера окна.
У меня есть небольшой скрипт, который также регулирует высоту элемента div.Он работает нормально, но по какой-то причине есть 29 «загадочных пикселей», которые я должен вычесть из общей высоты, чтобы все работало правильно.
Есть идеи, откуда взялись эти загадочные пиксели?Я использовал инспектор DOM в Chrome, но не смог найти никаких подсказок.
Вот HTML-код на странице:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
rel="stylesheet" type="text/css" />
<link href="css/jquery.loadmask.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.loadmask.min.js"></script>
<script type="text/javascript" src="js/map.js"></script>
</head>
<body style="height: 0px !important">
<div id="search" style="margin-left: 8px; font-family: Arial, Helvetica, sans-serif; font-size: small">
<h3>
New Districts for the 2012 Election</h3>
<p>
Enter your home address including street address, city and zip code in the boxes
below and press the Find My District button. Once you have completed the search,
click on the map to display district information. For information about how redistricting
may affect you, please go to <a href="http://www.leg.wa.gov/LIC/Documents/EducationAndInformation/Redistricting%20Information%20for%20Voters.pdf"
target="_blank">Redistricting Information for Voters</a> (PDF file).
</p>
<p>
Address:
<input id="Address" type="text" />
City:
<input id="City" type="text" />
State:
<input id="State" type="text" disabled="disabled" value="WA" style="width: 25px" />
Zip:
<input id="Zip" type="text" style="width: 50px" />
</p>
<p>
District Type:
<input type="radio" id="legislativeLayer" name="legislativeLayer" checked="checked"
onclick="Map.setLayer()" />Legislative
<input type="radio" id="congressionalLayer" name="legislativeLayer" onclick="Map.setLayer()" />Congressional
<input type="submit" value="Find My District" onclick="Map.codeAddress()" />
</p>
</div>
<div id="map_canvas" />
</body>
</html>
Вот соответствующий скрипт:
// Initialize the map
initialize: function () {
// Resize the map to fit the window
Map.resizeMapDiv();
$(window).resize(Map.resizeMapDiv);
},
// Resizes the height of the map div so it fits the window
resizeMapDiv: function () {
$("#map_canvas").height($(window).height() - $("#search").height() - 29);
// Notify the map a resize has occurred, and center on that point
google.maps.event.trigger(Map.map, 'resize');
if (Map.currentPosition)
Map.map.setCenter(Map.currentPosition);
else
Map.map.setCenter(Map.initialPosition);
}