CODEWITHSUNDEEP
firefoxgoogle-mapsgoogle-maps-api-3
R Saudlach
R Saudlach

Reputation: 388

Resize Google Map + API v3

I am using Google Maps API v3.

In Chrome, the map fits fine into the div element I set with width 200px and height 200px. In Firefox, it tries to take up the whole screen. I noticed the styling code that google maps uses there is this line:

<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">

I've been trying to modify this via the API to set the width to 190 and hieght to 190.

Does anyone know how to do this?

The CSS styling I used for the div was:
div.map {
height: 190px;
width: 190px;
}

I added this into my API call already thinking it would resize based on the div styling:
google.maps.event.trigger(map, 'resize')

Happy Holidays!!

Upvotes: 1

Views: 741

Answers (1)

NDBoost
NDBoost

Reputation: 10634

you have to hard code your width/height in an inline style. I ran into the same problem. The reason is it uses the width/height to create the other elements within the map.. try setting your code as follows:

<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 190px; height: 190px; z-index: 0;">

Upvotes: 2

Related Questions