CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Frank Hoffman
Frank Hoffman

Reputation: 950

Sizing a Google map to fit the div--mystery pixels?

I have a simple page layout with two divs--one on top, and one on the bottom. The div on the bottom is where I want my Google map to load. I want the map to fill the bottom div and resize automatically when the window is resized.

I have a bit of script that adjusts the height of the div as well. It works fine, but for some reason there are 29 "mystery pixels" that I have to subtract from the overall height to make everything work right.

Any idea where those mystery pixels are coming from? I used Chrome's DOM inspector but couldn't find any clues.

Here's the HTML on the page:

<!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
            &nbsp;
            <input type="submit" value="Find My District" onclick="Map.codeAddress()" />
        </p>
    </div>
    <div id="map_canvas" />
</body>
</html>

Here's the relevant script:

// 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);
}

Upvotes: 1

Views: 2849

Answers (1)

Chris Green
Chris Green

Reputation: 4427

Try using jQuery's offset() method: 

$("#map_canvas").height($(window).height() - $("#map_canvas").offset().top));

The mystery 29px you are encountering is the height of your browsers navigation bar which is included in the $(window).height().

If you are still finding that the height extends the window size you might have to offset padding/margin as well.

$("#map_canvas").height($(window).height() - ($("#map_canvas").offset().top + ($("#map_canvas").outerHeight(true) - $("#map_canvas").height())));

Any padding or margins on the body will effect the height also. Make sure these are set to 0px also. 

<body style="padding:0; margin:0;">

Upvotes: 5

Related Questions