CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps
Aaron
Aaron

Reputation: 4480

Using css to make google maps api circular

I am using border-radius: 50%; to make the map circular. The problem I am having is when the page loads the map is square for a second before the map becomes circular. Here is the jsfiddle I created https://jsfiddle.net/tnk240zb/2/. When you click the play button the map is square for a second. Is there a way to get the image to appear circular so it does not show up square for a second?

code snippet:

#bubble {
  margin: 0 auto;
  width: 400px;
  height: 85px;
  overflow: hidden;
  position: relative;
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
  border-bottom-right-radius: 40px;
  border-top-right-radius: 40px;
  background-color: #FFF;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 50px rgba(0, 0, 0, 0.05);
}

p {
  font-weight: bold;
  margin-top: -50px;
}

img {
  padding-bottom: 10%;
}

#map-canvas {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: 3px;
  margin-left: 3px;
}
<div id="bubble">
  <div id="map-canvas"></div>

  <div style="display: inline-block;">
    <p id="user"></p>
    <p id="plan"></p>
  </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

<script>
  (function(window, google, lat, lng) {
    var options = {
        center: {
          lat: lat,
          lng: lng
        },
        zoom: 5
      },
      element = document.getElementById('map-canvas')
    var map = new google.maps.Map(element, options)
  }(window, window.google, 37.791350, -122.436883));
</script>

Upvotes: 0

Views: 170

Answers (2)

yuriy636
yuriy636

Reputation: 11661

The div that renders the map per se (#map-canvas div .gm-style div) uses z-index: 0 in its inline style:

<div tabindex="0" style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; cursor: url(&quot;https://maps.gstatic.com/mapfiles/openhand_8_8.cur&quot;) 8 8, default;">

Set your #map-canvas's z-index higher than 0, and it will work fine:

#map-canvas {
  /* (...) */
  z-index: 1;
}

JSFiddle: https://jsfiddle.net/yuriy636/tnk240zb/3/

Upvotes: 2

I haz kode
I haz kode

Reputation: 1635

Put the map in a .wrapper div.

Then, add a pseudo-element to that div and give it a radial-gradient background with the middle part being transparent

The other background color has to match your document background. in this case it's white.

Then add pointer-events:none to the overlay so you can click through it.

this also prevents the problem from occuring when you move around and drag in the map.

It will always maintain the border-radius

Side-note: your design idea breaks Google maps terms and conditions as you are hiding the google logo. If you must go through with this, be sure to read the terms and conditions really well

Working example:

.wrapper {
  overflow: hidden;
  width: 400px;
  height: 400px;
  position: relative;
}

.wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(transparent 60%, white 40%);
}
<!-- initilize map -->
<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 40.674,
        lng: -73.945
      },
      zoom: 12,
    })
  }
</script>



<div class="wrapper">
  <div id="map" style='width: 100%; height: 100%;'></div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHu4QBgWONqtdOWVLTW5XZ51B1eOU6SWw&callback=initMap" async defer></script>

Upvotes: 1

Related Questions