Home/ Questions/Q 8186001
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T02:03:01+00:00

I need to make a custom shape div holding a google maps map. The

  • 0

I need to make a custom shape div holding a “google maps” map. The custom border it’s fine, I can handle it using a png, but the shape itself, I have only some theories of how to do it, but nothing in practice. But I think there is a way to do it using html5 canvas to make the custom shape on the div and use in css a overflow:hidden to hide what goes out of the div.

right now I have the following structure:

<html>
  <body>
    <div class="Orange_Background"></div>
    <div class="FX_Lines_over_background"></div>
    <div class="GoogleMaps_Container"></div>
  </body>
</html>

So as you can se I can’t use the background as a png to only show the map, and because I need the map to be clickable.

Here is a image of what I was saying.

Teh Image

If anyone can help me, I’ll be grateful !!

Thank you all.

PS: It can be with jquery too ! (if someone knows a plugin that do it.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    RE: Zee Tee’s answer: If you do go this route, you can set pointer-events: none (in your css) for the div containing the images. this will send all mouse events to the layer below it. Sorry, I don’t have the privilege to comment on answers yet 😀

    If you don’t care about IE(6-8) support, then you can use CSS 3D transforms to do this directly on the map layer. But the map will look skewed, if that’s the effect you are after, if not previous answer is still the best approach

    Another solution is to use the mask image. sorry browser support sucks for this, but if you have a nice fallback until they catch up, you should be alright

    https://developer.mozilla.org/en/CSS/-webkit-mask-image

    • 0