Google मानचित्र के साथ CSS3 गोलाकार कोने

मैं Google मानचित्र में सीएसएस 3 सीमा-त्रिज्या संपत्ति के साथ गोलाकार सीमा लागू करने की कोशिश कर रहा हूं लेकिन यह क्रोम में काम नहीं करता है, अन्य ब्राउज़र में इसका काम बढ़िया है। कोई विचार या सुझाव? यहां मैं अपना कोड डाल रहा हूं और सकारात्मक उत्तर का इंतजार कर रहा हूं। धन्यवादGoogle मानचित्र के साथ CSS3 गोलाकार कोने

<!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>

स्रोत

2013-04-30 Rajnikanth

-1

जितना हम चाहते हैं कि, हम वर्तमान में नहीं कर सकता।

विकल्प कोनों के चारों ओर घूमने के लिए, प्रत्येक कोनों पर गोलाकार कोने कट-आउट ओवरलेइंग है। असल में एक गोलाकार वर्ग बनाएं, इसे उलटा करें ताकि यह एक कट-आउट आकार बन जाए, 4 कोने के टुकड़ों में विभाजित हो, प्रत्येक कोने को एक मूल कंटेनर के अंदर रखें।

उदाहरण

.container { width: 400px; height: 300px; position: relative; } 
.map { width: 100%; height: 100%; } 
.corner { width: 30px; height: 30px; position: absolute; background-image: url(my/corners.png) } 
.corner.topleft { top: 0; left: 0; background-position: 0 0; } 
.corner.topright, etc.

स्रोत

2013-04-30 05:02:27 Jared

-1

आप गूगल मानचित्र v3 किसी वैकल्पिक समाधान बॉर्डर-त्रिज्या संपत्ति जो आप उपयोग करना चाहते हैं, उसका उपयोग का समर्थन नहीं कर रहा है पता लगाने के लिए होगा।

स्रोत

2013-04-30 06:07:36

यदि आप किसी भी छवि के उपयोग के बिना समान प्रभाव प्राप्त करना चाहते हैं, तो यहां jsfiddle http://jsfiddle.net/alxscms/3Kv99/ पर एक समाधान है। यदि आप चाहें तो नक्शा के अंदर नेविगेशन को तोड़ने के बिना आप एक फीका आंतरिक सीमा भी जोड़ सकते हैं।

<div class="wrapper"> 
    <div class="map" id="map"></div> 
    <i class="top"></i> 
    <i class="right"></i> 
    <i class="bottom"></i> 
    <i class="left"></i> 
    <i class="top left"></i> 
    <i class="top right"></i> 
    <i class="bottom left"></i> 
    <i class="bottom right"></i> 
</div>

और शैली (एससीएसएस):

$radius: 10px; 
$thickness: 5px; 
$border-color: rgba(black, 0.15); 
$background-color: white; 

.wrapper { 
    position: relative; 
    width: 400px; 
    height: 200px; 
    overflow: hidden; 
    margin: 50px; 

    & > i { 
    display: block; 
    position: absolute; 

    &.top { 
     top: 0; 
     border-top: $thickness solid $border-color; 
     &:after { 
     top: -$radius/2 - $thickness; 
     border-top: $radius/2 solid $background-color; 
     } 
    } 
    &.right { 
     right: 0; 
     border-right: $thickness solid $border-color; 
     &:after { 
     right: -$radius/2 - $thickness; 
     border-right: $radius/2 solid $background-color; 
     } 
    } 
    &.bottom { 
     bottom: 0; 
     border-bottom: $thickness solid $border-color; 
     &:after { 
     bottom: -$radius/2 - $thickness; 
     border-bottom: $radius/2 solid $background-color; 
     } 
    } 
    &.left { 
     left: 0; 
     border-left: $thickness solid $border-color; 
     &:after { 
     left: -$radius/2 - $thickness; 
     border-left: $radius/2 solid $background-color; 
     } 
    } 

    &.top:not(.right):not(.left), 
    &.bottom:not(.right):not(.left) { 
     height: $thickness; 
     left: $radius+$thickness; 
     right: $radius+$thickness; 
    } 

    &.left:not(.top):not(.bottom), 
    &.right:not(.top):not(.bottom) { 
     width: $thickness; 
     top: $radius+$thickness; 
     bottom: $radius+$thickness; 
    } 

    &.top.right, 
    &.top.left, 
    &.bottom.right, 
    &.bottom.left { 
     width: $radius; 
     height: $radius; 

     &:after { 
     content:""; 
     position: absolute; 
     width: 1.5*$radius; 
     height: 1.5*$radius; 
     } 
    } 

    &.top.right { 
     border-top-right-radius: $radius; 
     &:after { border-top-right-radius: 1.5*$radius; } 
    } 
    &.top.left { 
     border-top-left-radius: $radius; 
     &:after { border-top-left-radius: 1.5*$radius; } 
    } 
    &.bottom.right { 
     border-bottom-right-radius: $radius; 
     &:after { border-bottom-right-radius: 1.5*$radius; } 
    } 
    &.bottom.left { 
     border-bottom-left-radius: $radius; 
     &:after { border-bottom-left-radius: 1.5*$radius; } 
    } 
    } 
} 

#map { 
    width: inherit; 
    height: inherit; 
    .gmnoprint { 
    display: none; 
    } 
}

स्रोत

2013-12-05 20:32:34 alxscms

मैं हाल ही में एक परियोजना मैं पर काम कर रहा था इस विचार को लागू किया

Google maps with rounded corners and border

यहाँ एचटीएमएल के लिए कोड है । यहाँ कैसे मैं यह काम किया जाता का एक उदाहरण है ...

लाइव पूर्वावलोकन: http://jsfiddle.net/h6Tkq/

एचटीएमएल ...

<div class="map" id="map"></div>

निम्नलिखित सीएसएस के साथ

...

#map { 
    width: 500px; 
    height: 200px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
}

स्रोत

2014-07-23 20:07:26

यह क्रोम पर अपने पूर्वावलोकन का उपयोग कर काम नहीं करता है। – evolutionxbox

ऐसा लगता है कि यह क्रोम के मौजूदा संस्करण (56.0.2 9 24.87) में काम कर रहा है। –

यह नहीं हुआ कि मैंने 7 महीने पहले उस टिप्पणी को लिखा था। – evolutionxbox

मुझे वर्तमान में सफारी और क्रोम के साथ एक ही समस्या थी।

-webkit-transform: translate3d(0px, 0px, 0px); 
-webkit-mask-image: -webkit-radial-gradient(white, black);

स्रोत

2015-05-29 07:11:18

यह काम करता है! अच्छा हैक। क्या यह केवल क्रोम और सफारी के लिए जरूरी है? – BenNov

आप मानचित्र तत्व के भीतर div, नहीं मैप तत्व शैली देने की आवश्यकता: मैं क्रोम के लिए शून्य करने के लिए translate3d रख दिया और सफारी के लिए एक वेबकिट-मुखौटा छवि को जोड़ने के लिए किया था।

map > div { 
    border-radius: 10px; 
}

स्रोत

2015-06-22 15:36:16 Guest1

इसमें अधिक अपवर्त होना चाहिए। – phadaphunk

यह पूरी तरह से काम किया। – Wjdavis5

मुझे उस div और उसके तत्काल बाल div दोनों को शैली बनाना था –

-1

यह एक और जवाब में प्रस्तावित किया गया था, लेकिन यह JSFiddle में तो भी यह काम नहीं किया सीएसएस में z-index:1 याद किया।

HTML है:

<div class="map" id="map"></div>

और सीएसएस:

#map { 
    width: 500px; 
    height: 200px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    z-index: 1; 
}

JSFiddle

स्रोत

2016-08-10 19:11:00 waah

यह मेरे लिए काम किया के रूप में मैं z- सूचकांक संपत्ति कहा:

#map { 
    ... 
    -webkit-border-radius:20px; 
    z-index:0; 
}

स्रोत

2017-02-14 16:14:18 16am

Google मानचित्र के साथ CSS3 गोलाकार कोने

उत्तर

संबंधित मुद्दे