Custom Shape Div with google maps inside

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 HTML canvas to make the custom shape on the div and use in CSS 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.

PS: It can be with jQuery too.