Circular Google Map using css and html

Question

I am trying to make a circular google map but, the map always appears in square.I am using fixed width css circle(http://codeitdown.com/css-circles/)

.circle-text {
width: 500px;
height: 380px;
-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
border-radius: 50%;
background: #4679BD;
 }

<div id="map-canvas" class="circle-text"></div>

With google Maps.

you can use `-webkit-mask`, have a look [here](http://stackoverflow.com/questions/6894439/transparent-rounded-corners-on-google-map) — paulitto, Sep 12 '14 at 10:16
http://jsfiddle.net/ttcho0sj/3/ . i am using this on cordova.Firstly map loads in circle then suddenly it changes its layout to square. — Aamir Mukaram, Sep 12 '14 at 10:35

Richa · Answer 1 · 2014-09-12T10:24:31.320

3

It is working fine

FIDDLE DEMO

<div id="map-canvas" class="circle-text"><div id="googleMap"></div></div>

CSs

.circle-text, #googleMap {
    width: 500px;
    height: 380px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #4679BD;
}

edited Sep 12 '14 at 10:24

answered Sep 12 '14 at 10:19

Richa

3,261
2
27
51

1

Removed my earlier comment because it seems to work without the outer div too - http://jsfiddle.net/ttcho0sj/3/ – Paulie_D Sep 12 '14 at 10:23
i am using this on cordova.Firstly map loads in circle then suddenly it changes its layout to square. – Aamir Mukaram Sep 12 '14 at 10:32
In that case will be better if you make a fiddle. – Richa Sep 12 '14 at 10:36
You can see it is working fine in fiddle.Something with cordova – Richa Sep 12 '14 at 10:38

Circular Google Map using css and html

1 Answers1

Linked