谷歌地图为圆形的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>