谷歌地圖爲圓形的div

Question

我需要把谷歌地圖變成一個div和這一個必須是圓形的div，但我已經二題

1. 在加載時我看到標準的矩形格和後半第二這個div成了圓形
2. 時使用這種地圖在拖動方式，我看到總是一個標準的DIV只有經過鼠標離開我見圈再次

Answer 1

我認爲，主要的想法是加載文件的順序在你的網站：html，css，js。看看這個：http://jsfiddle.net/nfng1sm4/ 。您只需將背景顏色更改爲容器div的顏色即可。

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

Answer 2

添加CSS position: relative;，z-index:和border-radius到地圖持有人的父DIV，它會掩蓋孩子的div（#mapCanvas）

Fiddle演示

CSS

.mapCover { 
    position: relative; 
    width: 300px; 
    height: 300px; 
    border: 5px solid #000000; 
    border-radius: 400px; 
    overflow: hidden; 
    z-index: 1000; 
} 

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

html

<div class="mapCover"> 
    <div id="mapCanvas"></div> 
    </div>