CODEWITHSUNDEEP
cssapigoogle-maps-api-3
BenRV
BenRV

Reputation: 45

google maps api full screen

Hi i'm working on a project that requires a specific full screen google map to sit between a header and footer. I'm sure the answer is quite simple but thought i'd ask anyway. The project consists of a form where users can drop markers once they've filled in their address etc, not sure if any of the customisation might have interfered or anything...

When I've worked with the google map API in the past I'd normally just change the css height to 100% but for some reason instead of changing the size it removes the map entirely.

#map {
height:500px;
width:1200px;
}

Here's the code.

var map;
var marker;
var Longitude = -1.8822221000000354;
var Latitude = 50.72569620000001;
var zoom = 20;
var bounds = new google.maps.LatLngBounds();
var markers;
var new_marker;
var C;
var popupbubblepath = <%= this.popupbubble.ToString() %>;
var infowindow = new google.maps.InfoWindow();
var ib;

function LoadMap() {

    // Create an array of styles.
    var styles = [
        {
            stylers: [
                { saturation: -100 }, { lightness: -100 }
            ]
        },{
            featureType: "all",
            elementType: "all",

        }
    ];

    // Create a new StyledMapType object, passing it the array of styles,
    // as well as the name to be displayed on the map type control.
    //var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});

    var myOptions = {
        zoom: zoom,
        center: new google.maps.LatLng(Latitude, Longitude),
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: true,
        overviewMapControl: false,
        zoomControl: true,
        mapTypeControlOptions: {
            style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            position:google.maps.ControlPosition.LEFT_BOTTOM 
        },
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        panControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

Upvotes: 2

Views: 26671

Answers (5)

dma
dma

Reputation: 1809

The Google Maps API docs explain this effect rather neatly:

Note that some CSS that works within quirks mode is not valid in standards mode. In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail to specify a size, they are assumed to be sized at 0 x 0 pixels.

Upvotes: 3

Smeegs
Smeegs

Reputation: 9224

The issue is with your html not with your javascript. try the follow

<div id='wrapper'>
     <div id='header'>header stuff<div>
     <div id='map-canvas'></div>
     <div id='footer'>footer stuff<div>
</div>

Add the following css

html, body, #wrapper{
    height: 100%;
    width: 100%;
}
#header{
    height: 100px; //or whatever. Note px not %.
    width: 100%;
}
#footer{
    height: 100px; //or whatever. Note px not %.
    width: 100%;
}
#map-canvas{
    height: 100%;
    width: 100%;
    margin-top: 100px;
    margin-bottom: 100px;

}

I didn't get a chance to test this yet, but this should give you an idea of what needs to be done.

Upvotes: 3

James Wagoner
James Wagoner

Reputation: 323

Take a look here http://alistapart.com/article/conflictingabsolutepositions using absolute positioning with setting top, left, bottom, right vaules. 

#map-canvas{
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 100px;
    right: 0;
}

Now drag your window to your heart's content and watch your map stay full size. Great when doing responsive designs too.

Upvotes: 6

Florent Vielfaure
Florent Vielfaure

Reputation: 126

When you want to have an empty div that take all the screen in height, you have to define the min-height value, as below :

html, body {
    height: 100%;
}

#map {
    min-height: 100%; 
}

But again, that's not really related to 'google-maps-api-3'...

Upvotes: 0

Richard Askew
Richard Askew

Reputation: 1237

I think the problem isn't with the map as much but with the containing div. If you set the height of the div to 100% make sure that all containing divs have a height defined. You can tell if this is the problem by putting a border around the div, you may see that the height is the problem.

It would be easier to fix if you can get it up for us to play with.

Upvotes: 0

Related Questions