CODEWITHSUNDEEP
htmlgoogle-mapscsssvgclipping
Prithviraj Mitra
Prithviraj Mitra

Reputation: 11842

how to clip (or mask) google map

I have a google map running correctly.Now I want that map to be clipped to a bubble shape.It's not the pointer/market I am talking about, it's the entire map which has to be masked with a bubble overlay.Currently the map is in rectangular shape.

I have uploaded sample image.

http://s17.postimg.org/v26nk9p4f/mapbg.png

To be honest I am not sure if this is possible at all as before I explored some svg options and it doesn't seem to work with all browsers.

I could use the bubble as overlay at the top of the map but the overlay img has to be transparent and the background div has a different color.So that's the problem.

Is there any other trick or suggestions I can use to achieve the same out-put.

Many thanks in advance.

Upvotes: 0

Views: 3123

Answers (2)

André Ramos
André Ramos

Reputation: 101

Just saw this post and had a hard time trying to sort this out, but here is an example of what I came up with. I used the path of an SVG I exported from Sketch, it still needs a bit of tweaking but have fun with it.

index.html

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSDlMWErr_gwT5d5wze8oK9muKPuHLtKQ">
    </script>
<div id="map-canvas"></div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
  <clipPath id="chopChop">
    <path id="svgPath" d="M458.306721,357.359262 L458.306721,154.888126 C458.306721,154.888126 458.306721,123.735028 431.347502,108.158479 L330.082536,49.6444164 L330.082536,49.6684173 L256.112579,6.92291067 C256.112579,6.92291067 229.15336,-8.65363834 202.194141,6.92291067 L26.9592189,108.158479 C26.9592189,108.158479 1.13686838e-13,123.735028 1.13686838e-13,154.888126 L1.13686838e-13,357.359262 C1.13686838e-13,357.359262 1.13686838e-13,388.51236 26.9592189,404.088909 L202.194141,505.324477 C202.194141,505.324477 229.15336,520.901026 256.112579,505.324477 L351.765039,450.050529 L431.347502,404.088909 C431.347502,404.088909 458.306721,388.51236 458.306721,357.359262"/>
  </clipPath>
  <path id="svgMask" d="M458.306721,357.359262 L458.306721,154.888126 C458.306721,154.888126 458.306721,123.735028 431.347502,108.158479 L330.082536,49.6444164 L330.082536,49.6684173 L256.112579,6.92291067 C256.112579,6.92291067 229.15336,-8.65363834 202.194141,6.92291067 L26.9592189,108.158479 C26.9592189,108.158479 1.13686838e-13,123.735028 1.13686838e-13,154.888126 L1.13686838e-13,357.359262 C1.13686838e-13,357.359262 1.13686838e-13,388.51236 26.9592189,404.088909 L202.194141,505.324477 C202.194141,505.324477 229.15336,520.901026 256.112579,505.324477 L351.765039,450.050529 L431.347502,404.088909 C431.347502,404.088909 458.306721,388.51236 458.306721,357.359262"  />
</svg>

script.js

  function initialize() {
    var mapOptions = {
      center: { lat: 52.517010, lng: 13.378540},
      zoom: 14,
      styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#193341"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2c5a71"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#29768a"},{"lightness":-37}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#3e606f"},{"weight":2},{"gamma":0.84}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":0.6},{"color":"#1a3541"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#2c5a71"}]}],
      disableDefaultUI: true
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);

style.css

html, body, #map-canvas { height: 530px;width: 460px; margin: 0; padding: 0;}
#map-canvas{
  /*Chrome,Safari*/
  -webkit-clip-path: url(#chopChop);

  /* Firefox*/
  clip-path: url(#chopChop);

  /* iOS support */
   -webkit-mask: url(#chopChop);
}

Upvotes: 1

Robert Longson
Robert Longson

Reputation: 124249

Create a bubble shaped clipPath and apply that to the map using the clip-path property.

The accepted answer to this question has an dynamic example which may be more complicated than you need but should show you the way to go.

Upvotes: 1

Related Questions