Is there any trick to put rounded corners on a Google map?

Question

Possible Duplicate:
Transparent rounded corners on Google Map

I've tried using the usual style sheet properties for specific browsers, but none seem to work. Is there a trick to making this happen? I know I've seen it in the wild, but can't recall where.

maybe if you add the style once the document is ready that might work — Breezer, Jan 02 '11 at 16:59
Yes! Try this answer: http://stackoverflow.com/questions/16292026/css3-rounded-corner-with-google-map/30523342#30523342 — teradyl, Aug 10 '16 at 01:12

score 10 · Accepted Answer · edited Jul 01 '12 at 16:10

In this thread discussing this topic, there is a link to this page, which has an example of exactly what you're looking for.

The strategy seems to be to overlay the map with rounded corner images.

EDIT: Here is the sample code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rounded Map Corners - Google Maps Javascript API v3</title>
<style>
    html, body {height: 100%; margin: 0;}
    #Container {position:relative;width:400px;margin:20px;}
   .TopLeft, .TopRight, .BottomLeft, .BottomRight {position:absolute;z-index:1000;background-image: url(corners.png);width:20px;height:20px;}
   .TopLeft {left: 0; top: 0;}
   .TopRight {right: 0; top: 0; background-position: top right;}
   .BottomRight {right: 0; bottom: 0; background-position: bottom right;}
   .BottomLeft {left: 0; bottom: 0; background-position: bottom left;}
   #map_canvas {width: 400px; height: 400px;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function Initialize() {
    var MapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(37.20084, -93.28121),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        sensor: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), MapOptions);
}
</script>
</head>
<body onload="Initialize()">
<div id="Container">
    <div class="TopLeft"></div>
    <div class="TopRight"></div>
    <div id="map_canvas"></div>
    <div class="BottomLeft"></div>
    <div class="BottomRight"></div>
</div>
</body></html>

@jb. I think my answer is more or less in line with the meta post on answering with links. I gave the basic strategy and linked to an example. http://meta.stackexchange.com/a/13370 — goric, Jun 30 '12 at 15:38
Well I'd rather go with this answer on the subject: http://meta.stackexchange.com/a/8259. First link is outdated altogether second works --- but presents an example from which you have to extract response by yourself --- which is a considerable effort. — jb., Jun 30 '12 at 21:46
If anyone wants to achieve the same effect without the use of any image, i've done a jsfiddle here http://jsfiddle.net/alxscms/3Kv99/ — alxscms, Dec 05 '13 at 20:24

Is there any trick to put rounded corners on a Google map?

1 Answers1

Linked