CODEWITHSUNDEEP
cssgoogle-maps
Stephen
Stephen

Reputation: 803

Google Map spilling out of containing div

I have a container div for all google maps on my site.

The css is as follows:

#map_canvas {
    border-radius: 50%;
    border: 0.625rem solid #e5e5e5;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    width: 300px;
}

On Desktop/Laptop machines in Chrome, Firefox and IE The map displays correctly within its container and observes the overflow: hidden.

When I view it on an Andriod device in Chrome or on an iPhone in Chrome and Safari the Map spills out over the edges of the container not observing the overflow: hidden.

Upvotes: 1

Views: 745

Answers (1)

dk_french032
dk_french032

Reputation: 648

I'd suggest putting the map in a container with the required width and height and set overflow to hidden.

HTML:
<div class="container">
    <div id="map_canvas"></div>
</div>

CSS:

.container{
    height: 300px;
    margin: 0 auto;
    width: 300px;
    border-radius: 50%;
    overflow:hidden;
    border: 0.625rem solid #e5e5e5;

#map_canvas {
    height: 300px;
    width: 300px;
}

Upvotes: 1

Related Questions