17

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.)

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
Ricardo Fiorani
  • 803
  • 1
  • 7
  • 19
  • I'm not sure it can be done without some very ugly hacks. But I'd love to see what people come up with. – Madara's Ghost Jul 04 '12 at 20:36
  • 2
    There's a way with KMLs but then you have to line everything up with the actual background. And it only loads after the map so for a moment the map will look rectangular. Maybe if all else fails use this approach. See Google's [_Screen Overlay Example_](https://maps.google.com/maps?f=q&hl=en&q=http://kmlscribe.googlepages.com/SamplesInMaps.kml&ie=UTF8&ll=36.879621,-53.4375&spn=103.772916,208.476563&z=2&om=1) – Heitor Chang Jul 04 '12 at 20:40
  • Check this [**SO Answer**](http://stackoverflow.com/a/11336910/1195891) if you want to use a static Google Map or other content in a customized div container. Cheers! – arttronics Jul 05 '12 at 01:30

2 Answers2

5

You would need to create a frame with 4 different layers, top/right/left/bottom, and apply a higher z-index, background-image using a transparent PNG image than the map itself. Position would need to be absolute or fixed on those layers.

As you can see below, the 4 images are the black highlighted areas, and they would need to be individually sliced, then you can position them over the map layer. This keeps the middle area open without any overlapping layers so the map is still functional:

You can keep the entire orange background behind the maps layer, it won't matter because you'll be overlapping it first with the map, then with the 4 frame layers which if sliced properly and positioned properly would just overlap the background image. The entire background image would obviously be the full image, without any maps on it, but all orange with your stripes and gradient. Quite a task if you asked me, time consuming, but is possible.

enter image description here

NOTE: The transparent areas are only the white spaces you see in the black highlights, the rest would obviously be your image.

Ry-
  • 218,210
  • 55
  • 464
  • 476
Control Freak
  • 12,965
  • 30
  • 94
  • 145
  • Would that allow use of the map? – Theofanis Pantelides Jul 04 '12 at 21:12
  • Why wouldn't it, the new image layer would overlay your map. You would need to make sure the part of the image is transparent so you can see the layers behind it. Also setting the `background: transparent url(img);` – Control Freak Jul 04 '12 at 21:12
  • 1
    No.. The element on top will create a invisible layer that you will click on instead of the map.. – Love Dager Jul 04 '12 at 21:14
  • 1
    Then you would need 4 images, layers, top/right/left/bottom, and keep the middle open. – Control Freak Jul 04 '12 at 21:15
  • As I said, it can't be an "overlay" because I need the map to be clickable, and I can't use like "4 images overlay for each border" because the map is part of a parallax effect in the site ( the map isn't stick with the background) – Ricardo Fiorani Jul 04 '12 at 21:15
  • If the map is static why not use google static maps? https://developers.google.com/maps/documentation/staticmaps/#quick_example – Theofanis Pantelides Jul 04 '12 at 21:15
  • @ZeeTee I agree with the 4 layers with negative margins – Theofanis Pantelides Jul 04 '12 at 21:17
  • Again, thank you for your answers guys. But as I was saying can't be a 4 images overlay, because the map has a parallax effect, so it means the map can't be "stick" with the background. The background isn't only one color, it's a gradient with the "lines" effects. – Ricardo Fiorani Jul 04 '12 at 21:25
  • You would have a 5th image as the entire background, without the image of the map. Review the updated description in my answer. – Control Freak Jul 04 '12 at 21:40
  • **+1** for the only method in which I think this can work for interactive content. – arttronics Jul 04 '12 at 23:38
5

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 :D

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

arttronics
  • 9,957
  • 2
  • 26
  • 62
SMathew
  • 3,993
  • 1
  • 18
  • 10
  • This was EXACTLY what I was in need !!!!!!!! Thank you so much !!! I'll post the result soon. Done here using Mask Image – Ricardo Fiorani Jul 04 '12 at 23:56
  • 1
    You are welcome! I would like to see the end result, so I would appreciate a link when your are done :) – SMathew Jul 05 '12 at 00:05
  • But what worked for me is the webkit-mask-image, and Zee Tee's answer does not say about this css property. He says about using overlays but I'll overlay it with what ? since I CAN'T use some image that will blend with the background. – Ricardo Fiorani Jul 05 '12 at 01:03