Menu
I am trying to apply rounded border using with css3 border-radius property in Google map but its not work in chrome, in other browser its work great. Any ideas or suggestions? Here i am putting my code and waiting positive reply. Thanks
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<style type="text/css" >
#map {
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom:0;
z-index: 1;
overflow: hidden;
border:solid 3px #00FF33;
border-radius:15px;
width: 500px;
height: 200px;
margin:0 auto;
-moz-border-radius:15px;
-webkit-mask-border-radius:15px;
-webkit-border-radius:15px;
}
#wrapper {
position:absolute;
}
</style>
<div id="wrapper">
<div id="map" ></div>
</div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var i,marker;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: 'marker_icon.png',
borderRadius: 20,
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]+' <img src="map-pin.png" /> <div style="background:#090;height:100px;width:200px;">yeah its working perfect ..!!!</div><a href="http://www.google.com">Google</a><form><a href="javascript: alert(\'foo!\');">Click Me</a></form>');
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
850
I currently had the same problem with Safari and Chrome. I had to put translate3d to zero for Chrome and add a webkit-mask-image for Safari:
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
What I found useful was to wrap the agm map around a div and change the div CSS to provide that rounded corner.
.map {
height: 391px;
width: 784px;
display: inline-block;
border-radius: 24px;
overflow: hidden;
}<div style="text-align: center;">
<div class="map">
<agm-map [zoom]="15" [latitude]="latitude" [longitude]="longitude">
<agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
