Google मानचित्र तत्व

Question

पर इंसेट बॉक्स-छाया जोड़ें मैं Google मानचित्र तत्व वाले टैग में कुछ इन्सेट बॉक्स-छाया जोड़ने के इच्छुक हूं। हालांकि, ऐसा लगता है कि कुछ भी नहीं होता है, संभवतः क्योंकि Google मूल तत्व में कुछ अन्य divs लोड करता है, इसलिए जेनरेट किए गए बॉक्स-छाया को कवर करता है।

मैं इस आशय कैसे प्राप्त कर सकते हैं?

यहाँ कोड मैं है:

<section id="map-container"> 
    <figure id="map"></figure> 
</section> 

#map-container { 
    position: relative; 
    float: right; 
    width: 700px; 
    background-color: #F9FAFC; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
} 

#map { 
    position: relative; 
    height: 400px; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset; 
} 

धन्यवाद!

Answer 1

यह पता लगाया। यहां काम कर रहे सीएसएस:

#map-container { 
    position: relative; 
    float: right; 
    width: 700px; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    box-shadow: 0 1px 0 0 #F6F7FB inset, 0 -1px 0 0 #E0E5E1 inset, 0 -2px 0 0 #EBEBED inset, 0 -3px 0 0 #F4F4F6 inset; 
} 

#map { 
    position: relative; 
    height: 400px; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    z-index: -1 
} 

Answer 2

आपको उन तत्वों को देखना होगा जिन्हें Google जोड़ रहा है और लक्षित है और उन लोगों को अपने सीएसएस शैलियों के साथ ओवरराइड करें। जोड़े गए तत्वों और उनकी शैलियों को देखने के लिए फायरबग, वेबकिट "निरीक्षण तत्व" आदि का उपयोग करें।

Answer 3

यदि आप शैली को देखना चाहते हैं तो infowindow को this question पर एक नज़र डालें।

यह Google मानचित्र पर दिखाई देने वाली अधिकांश वस्तुओं पर लागू होता है। उन्हें अपने स्वयं के सीएसएस के साथ लक्षित करना संभव है लेकिन मुझे संदेह है कि किसी ने कभी ऐसा किया है क्योंकि यह हार्ड (मैंने कोशिश की) है।

Answer 4

मैंने एक अतिरिक्त जोड़ा जिसमें इन्सेट छाया शामिल थी। HTML: ... #mapContainer { स्थिति: रिश्तेदार; }

.map{ 
width:425px; 
height:350px; 
z-index:9999; 
position:absolute; 
top:0; 
left:0; 
@include borderAffect($pad:0,$borderCol:#00467F,$insetVal:true);   
} 

Answer 5

इस तरह मैंने इसे किया। निम्न विधि नक्शा नियंत्रण ओवरलैप नहीं करेंगे, तो आप नक्शा, यानी खींचें, क्लिक करें, ज़ूम, आदि

एचटीएमएल में हेरफेर करने में सक्षम हो जाएगा:

<div class="map-container"> 
    <div class="map"></div> 
</div> 

सीएसएस:

.map-container { 
    position: relative; 
    overflow: hidden; 
} 
.map-container:before, .map-container:after, .map:before, .map:after { 
    content: ''; 
    position: absolute; 
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); 
    z-index: 1; 
} 
.map-container:before { top: -5px; left: 0; right: 0; height: 5px; } 
.map-container:after { right: -5px; top: 0; bottom: 0; width: 5px; } 
.map:before { bottom: -5px; left: 0; right: 0; height: 5px; } 
.map:after { left: -5px; top: 0; bottom: 0; width: 5px; } 

डेमो:http://jsfiddle.net/dkUpN/80/

---

अद्यतन: वर्ष समाधान (1^st revision देखें) छद्म तत्वों का समर्थन किया है और वर्ष ब्राउज़रों के साथ संगत नहीं हो सका। डेमो अभी भी उपलब्ध है: http://jsfiddle.net/dkUpN/।

Answer 6

इस तरह की समस्या का सामना करते समय, मैं आमतौर पर कस्टम ओवरले का उपयोग करने के लिए वापस आ जाता हूं। (https://developers.google.com/maps/documentation/javascript/overlays#AddingOverlays)

मानचित्र के अंदर एक div जोड़ने के लिए एक कस्टम ओवरले का उपयोग करें जो भी परत आपको सबसे अच्छा लगा, आप सीएसएस के साथ इस div को स्टाइल करने में सक्षम होंगे।

Answer 7

एंड्री होराक उत्तर सबसे अच्छा काम करता है।

लेकिन कभी-कभी जेड-इंडेक्स का उपयोग करना आपके लेआउट के कारण एक विकल्प नहीं है।

#map_canvas .shadow{ 
    width:100%; 
    position:absolute; 
    left:0; 
    top:0px; 
    height:100%; 
    z-index:99999; 
    position:relative; 
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); 
    pointer-events: none; 
} 

अपने गूगल में

फिर स्क्रिप्ट नक्शे:

google.maps.event.addListener(map, 'idle', function() { 
     // Add shadow effect on map 
     $("#map_canvas .shadow").remove(); 
     $("#map_canvas").prepend('<div class="shadow">'); 

    }); 

pointer-events:none; पार ब्राउज़र संगतता की वजह से एक छोटा सा मुश्किल है एक अतिरिक्त div नक्शे गूगल को जोड़ना एक दूसरे सबसे अच्छा विकल्प है। सूचक-घटनाओं पर अधिक जानें here

Answer 8

सभी मामलों में काम नहीं करते समय एक अन्य विकल्प, मानचित्र के बगल में तत्व पर बॉक्स-छाया डालना है। Google ने स्वयं इसे here

Answer 9

एम्बेडेड मानचित्र के एक तरफ एक इन्सेट छाया जोड़ने की कोशिश करते समय मुझे एक ही समस्या थी। मैंने इसे मानचित्र-कैनवास तत्व में जोड़ने का प्रयास किया लेकिन कोई छाया दिखाई नहीं दे रही थी। इस व्यवहार के कारण के बारे में कोई जानकारी नहीं, शायद स्थिति है: मानचित्र के कुछ तत्वों का पूर्ण।

वैसे भी, कोड के लिए अन्य Unsemantic तत्वों को जोड़ने के बजाय, मैं नहीं बल्कि नक्शा करने के लिए ओवरले एक पतली (5px) पट्टी से बना एक pseudoelement के लिए जाना चाहते हैं:

यह बाईं ओर छाया कहते हैं:

#map-container:before { 
    box-shadow: 4px 0 4px -4px rgba(0, 0, 0, 0.5) inset; 
    content: ""; 
    height: 100%; 
    left: 0; 
    position: absolute; 
    width: 5px; 
    z-index: 1000; 
} 

डेमो: http://jsfiddle.net/marcoscarfagna/HSwQA/

---

एक सही के लिए बजाय पक्ष छाया:

#map-container:before { 
    box-shadow: -4px 0 4px -4px rgba(0, 0, 0, 0.5) inset; 
    content: ""; 
    height: 100%; 
    right: 0; 
    position: absolute; 
    width: 5px; 
    z-index: 1000; 
} 

Answer 10

पहले और बाद में छद्म तत्वों पर pointer-events: none; का उपयोग करते हुए आप बड़े छाया (है कि नक्शे में गड़बड़ी को प्रभावित करती है) की जरूरत है मदद करता है। इस प्रकार उन तत्वों को माउस पॉइंटर के लिए मौजूद नहीं लगता है ...