How To Insert A Googlemap In A Div With Mask

i need to put a google map into a div. No problem here...the problem is that i need to mask this div. I need to have a circular google map that i can navigate! I try Help pls?

Solution 1:

With the Maps API, create a Polygon that covers everything except the circles.

To create a circle that doesn't show line segments at every zoom level is challenging, but an approximation with a reasonable circular look should be possible.

As an alternative you could extend the OverlayView class to create a custom overlay type that show a circle with smoother edges. But this would be more work.

Solution 2:

One solution is to use jquery to get the absolute (x,y) coordinates of each map, and place a div with a png background over it, by positioning the div absolutely.

Solution 3:

I'm fairly sure this isn't possible I'm afraid - if you lay anything over the map (even if it is transparent) it will prevent you interacting with the map - as you will be clicking on that div, rather than on the map. Also IE seems to have some problems with masking google maps.

You could have an overlay that dissappears when you hover over it, using jquery or the :hover clss to move it to a negative z-index, but I really don't don't think you can do what you need to do.

(ps - I tried to comment on the answer above - but for some reason I couldn't - sorry for the new answer)