Javascript 谷歌地图成圆形div

我需要把谷歌地图放到一个div中，这个div必须是一个圆形div，但我有两个问题

在加载时，我看到了标准的矩形div，半秒钟后，这个div变成了圆形 当以拖拽方式使用此地图时，我总是看到一个标准div，只有在鼠标离开后，我才能再次看到圆形

---

我认为主要的想法是在你的站点中加载文件的顺序：html、css、js。 看看这个： . 只需将中的背景色更改为容器div的颜色

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

添加css位置：相对；，z-索引：和地图持有者的父div的边界半径，它将屏蔽子divmapCanvas

演示

css

html

请看这个

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

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

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