Google Maps in Kreis div

Question

ich eine Google setzen müssen Karten in ein div und diese muss man eine kreisförmige div sein, aber ich habe zwei Probleme

1. zur Ladezeit I-Standard rechteckigen div sehen und nach einer halben zweite div dies wurde Kreis
2. , wenn die Verwendung dieser Karte in ziehbar Art und Weise habe ich immer ein Standard-div und erst nach der Maus verlassen sehe ich Kreis wieder

Answer 1

sehen glaube ich, dass die Hauptidee ist, die Reihenfolge der das Laden von Dateien auf Ihrer Website: html, css, js. Werfen Sie einen Blick auf diese: http://jsfiddle.net/nfng1sm4/ . Sie müssen nur die Hintergrundfarbe in die Farbe Ihres Container-DIVs ändern.

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

Answer 2

Hinzufügen css position: relative;, z-index: und border-radius an die Mutter div des Kartenhalters, wird es das Kind div (#mapCanvas) maskieren

Fiddle Demo

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>