Ionic-native-google-maps: Map border radius on iOS

[ulver2812]

Hi, is it possible to have the map border with radius property?

I'm trying to set the border radius of the map canvas to 40px, it works on browser but it doesn't work on iOS 9.3.5, seems that the overflow isn't hidden.

I'm submitting a ... (check one with "x")

• [x] question
• [x] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [ ] Android
• [x] iOS
• [ ] Browser

Environment information

• Cordova CLI version
  
  
  
  • 9.0.0 [email protected]
  
  
• Cordova platform version
  
  
  
  • ios 5.1.1
  
  
• Plugins & versions installed in project (including this plugin)
  
  
  
  • cordova-plugin-whitelist 1.3.3
  
  
  • cordova-plugin-statusbar 2.4.2
  
  
  • cordova-plugin-device 2.0.2
  
  
  • cordova-plugin-splashscreen 5.0.2
  
  
  • cordova-plugin-ionic-webview 4.1.3
  
  
  • cordova-plugin-ionic-keyboard 2.2.0
  
  

• Dev machine OS and version, e.g.
  
  
  
  • OSX
    
    
    
    
    
    • Mac OS X 10.14.3
    
    
    
  
  

_iOS build issue:_

• Node JS version
  
  
  
  • node 10.11.0
  
  
• XCode version
  
  
  
  • xcode 10.2.1
  
  

Screen capture or video record:
(the screenshot is taken from browser just to explain what is going wrong but it is identical on iOS 9.3.5)

[wf9a5m75]

Not possible, because the map on Android/iOS are not HTML element

[ulver2812]

Ok, thank you very much!

[maxtomczyk]

Hello!

Actually I faced same issue and created some "dirty" walkaround. Maybe it will be useful for somebody who visit this issue. It's a bit hacky, but if someone really needs such styling I think it's better than nothing.

Solution

Main idea of the solution is to create 4 divs placed on corners of map element. All divs will have cropped round area to simulate our border radius.

HTML:
We are creating wrapper for map and 4 corners.

<div class="ps-basic__map-wrapper">
    <div class="ps-basic__map-corner ps-basic__map-corner--top-left"></div>
    <div class="ps-basic__map-corner ps-basic__map-corner--top-right"></div>
    <div class="ps-basic__map-corner ps-basic__map-corner--bottom-right"></div>
    <div class="ps-basic__map-corner ps-basic__map-corner--bottom-left"></div>
    <div id="map" class="ps-basic__map"></div>
</div>

SCSS:

.ps-basic {
  &__map {
    display: block;
    height: 31vh;
    overflow: hidden;
  }

  &__map-wrapper {
    position: relative;
  }

  &__map-corner {
    width: 30px;
    height: 30px;
    position: absolute;
    overflow: hidden;
    z-index: 5;

    &:before {
      content: "";
      position: absolute;
      width: 200%;
      height: 200%;
      box-shadow: -20px 40px 0px 50px #121212; // #121212 is color of our corner
      border-radius: 8px; // This is our border radius which we want to set
    }

// we can omit &--top-left as top: 0; left: 0 are defaults

    &--top-right {
      right: 0;
      &:before {
        right: 0;
      }
    }

    &--bottom-left {
      bottom: 0;
      &:before {
        bottom: 0;
      }
    }

    &--bottom-right {
      right: 0;
      bottom: 0;
      &:before {
        right: 0;
        bottom: 0;
      }
    }
  }
}

Actual effect