.map-wrap

  .googleMap#googleMap
  
  
View Compiled
html,
bod {
  width: 100%;
  height: 100%;
}


body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.map-wrap {
  width: 100%;
  height: 100%;
  max-width: 500px;
  max-height: 500px;
  width: 500px;
  height: 500px;
  
  // background-color: #383838;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 100px rgba(12, 26, 36, 0.25);
  
  position: relative;
  
}

.googleMap {
  width: 100%;
  height: 100%;
  // max-width: 500px;
  // max-height: 500px;
  
  border-radius: 50%;
  overflow: hidden;
  
  // hack for Chrome/Safari/Opera
  // makes rounding
  // http://stackoverflow.com/questions/6894439/transparent-rounded-corners-on-google-map
  // https://webkit.org/blog/181/css-masks/
  //-----------------------------------------------
  // -webkit-mask-image: url(http://voxweb.ru/projects/danceworld/img/cutting-corners-hack.svg)
  
  //   NEW HACK: use gradient
  -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,1)));
  
}

.round-wrap {
  width: 500px;
  height: 500px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}




















View Compiled
function initialize() {
  
  var coordinates = new google.maps.LatLng(51.508742,-0.120850);
  
  // map style
  var styles = [
    {
      stylers: [
        { hue: "#34495e" },
        { saturation: -50 },
        // { lightness: 30 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];
  
  var styleElse = [{"featureType":"administrative","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"simplified"}]},{"featureType":"transit","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"water","stylers":[{"color":"#84afa3"},{"lightness":52}]},{"stylers":[{"saturation":-17},{"gamma":0.36}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#3f518c"}]}]
  
  var styledMap = new google.maps.StyledMapType(styleElse,
      {name: "Styled Map"});

   
  var mapProp = {
    center: coordinates,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
      }
    };
  
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
  
  // create marker
  //-------------------------------------------
  var marker = new google.maps.Marker({
    position: coordinates,
    animation: google.maps.Animation.BOUNCE,
    // icon: 'http://voxweb.ru/projects/danceworld/img/map-icon.png'
  });
  
  marker.setMap(map);
  
  // create infowindow
  //-------------------------------------------
  var infowindow = new google.maps.InfoWindow({
    content: 'Hi all!'
  });
  
  infowindow.open(map, marker);
  
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });

  
}




google.maps.event.addDomListener(window, 'load', initialize);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://maps.google.com/maps/api/js