使用css和html的圆形Google地图 [英] Circular Google Map using css and html

问题描述

我试图制作一个圆形的Google地图，但地图总是出现在square.I使用固定宽度的CSS圈（ http://codeitdown.com/css-circles/ ）

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>

使用Google Maps。

With google Maps.

推荐答案

它工作正常

FIDDLE DEMO

FIDDLE DEMO

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

CS

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

这篇关于使用css和html的圆形Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！