Как сделать клип (или маску) google map

Question

У меня есть карта google, работающая правильно. Теперь я хочу, чтобы эта карта была привязана к форме пузыря. Это не указатель/рынок, о котором я говорю, это вся карта, которая имеет для маскировки с наложением пузырьков. В настоящее время карта имеет прямоугольную форму.

Я загрузил образец изображения.

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

Чтобы быть честным, я не уверен, если это вообще возможно, как и прежде, я исследовал некоторые варианты и SVG, кажется, не работает со всеми браузерами.

Я мог бы использовать пузырь как оверлей в верхней части карты, но наложение img должно быть прозрачным, а фон div имеет другой цвет. Так вот в чем проблема.

Есть ли какой-либо другой трюк или предложения, которые я могу использовать для достижения того же самого выхода.

Большое спасибо заранее.

Answer 1

Создайте пузырь в форме clipPath и примените его к карте, используя свойство клипа.

Принятый ответ this question имеет динамический пример, который может быть более сложным, чем вам нужно, но должен показать вам путь.

Answer 2

Только что увидел это сообщение и с трудом пытался разобраться в этом, но вот an example того, что я придумал. Я использовал путь SVG, который я экспортировал из Sketch, он по-прежнему нуждается в настройке, но получайте удовольствие от этого.

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); 
}