Transparent Rounded Corners on Google Map

Transparent rounded corners on Google Map

It appears that you may be experiencing the same Webkit bug as noted here: Rounded corners fail to cut off content in webkit browsers if position:relative

Also here: CSS3 border-radius clipping issues

I tested this by (via a debugger) modifying your code to add a visible border to the node with the border radius, then I hide the contents. It clearly showed a circle for the outer element. Since Webkit is used in both Safari and Chrome, that would explain those. However, when testing it inside Opera, I seem to be seeing the same bug.

Now, some good news: you might be able to get Webkit to behave using -webkit-mask and an SVG circle. There is an example on this page: http://www.webkit.org/blog/181/css-masks/

This would get you support under Firefox, Safari, and (hopefully) Chrome. (And apparently IE9, since you just tested it!) Which, for all accounts, is about the best you can usually hope to achieve for CSS3 hacks. ;-)

Adding transparent rounded corners to google map

Well I guess you have stumbled on this question I asked regarding the same topic:

Is there a way to implement rounded corners to a Mapfragment?

But in this case I needed a solid color corners. I don't see an easy way to perform what you
ask for. There is no way to added rounded corners to the map "out of the box" so you will need to cover those corners with some other texture, typically it would be a 9-patch texture, that could stretch accordingly to the screen size.

You can take a look at this blog post on 9-patchs I wrote and maybe try to create a
semi-transparent texture that will fit you needs:

9-Patch guide

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

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>

Is there a way to implement rounded corners to a Mapfragment?

I haven't tried this, but I'd put a view with rounded corners and a transparent middle on top of the mapView / mapFragment.

That is, put the mapFragment and the rounded corner view in a FrameLayout with both filling the FrameLayout, then make the middle of the rounded corner view transparent.

For further clarification, you could do it in a layout as follows:-

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<fragment
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    class="com.google.android.gms.maps.MapFragment" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/rounded_background"
    android:orientation="vertical" >
</LinearLayout>

</FrameLayout>

The rounded_background is a 9-patch with rounded corners and a transparent middle. E.g.

rounded_background.9.png

Hope that helps,

Ryan

border-radius not respected after google map rendering

Thank you for help. It's a Chrome bug.

"Removing the position:absolute declaration from the img elements seems to resolve this issue. "– Boaz

More info here

Add rounded corners in border in Maps Fragment and remove the Fragment background

try add this line to RelativeLayout or fragment

android:background="@drawable/map_border_2"

I hope it will work with you

how to add border radius to google maps in flutter?

probably an expensive solution but you could use ClipRRect. Something like this:

Widget build(BuildContext context) {
    return Center(
      child: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30),
          topRight: Radius.circular(30),
          bottomRight: Radius.circular(30),
          bottomLeft: Radius.circular(30),
        ),
        child: Align(
          alignment: Alignment.bottomRight,
          heightFactor: 0.3,
          widthFactor: 2.5,
          child: GoogleMap(),
        ),
      ),
    );
  }

Transparent Rounded Corners on Google Map