13
क्या यह जानकारी के लिए एक जानकारी है कि पर एक तत्व है जिसमें Google मानचित्र की तुलना में ज़ेड-इंडेक्स उच्च है?Google मानचित्र InfoWindow Z-Index
तो मान लें कि Google मानचित्र में ज़ीरो का ज़ेड-इंडेक्स है। तत्व में 100 का जेड-इंडेक्स है। मार्कर पर क्लिक करने से तत्व के समान क्षेत्र में एक InfoWindow प्रदर्शित होता है। हम इस जानकारीविंडो को तत्व पर होवर करने के लिए कैसे प्राप्त करते हैं और इसके तहत नहीं?
मैंने इन्फोविंडो के जेड-इंडेक्स को उच्च मूल्य पर सेट करने का प्रयास किया है, लेकिन ऐसा कुछ भी नहीं दिख रहा है।
मैंने इस मुद्दे को प्रदर्शित करने के नीचे एक डेमो रखा है। किसी भी सहायता की सराहना की जाएगी!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Infowindow Z-Index Test</title>
<script language="Javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
var coords = [[35.50733, 35.12768, 3]]; //, [-23.806549, 133.96059, 13], [68.169002, -134.425964, 10], [69.529715, -132.109222, 10], [80.231047, -22.730713, 7], [35.108675, -117.961578, 12]];
var map;
function mapChoose(coords) {
var current = coords[Math.floor(Math.random() * (coords.length))];
//mapShow(current[0], current[1], current[2], document.getElementById('map'));
mapShow(current[0], current[1], current[2], document.getElementById('map_canvas'));
};
function initialize() {
mapChoose(coords);
}
function mapShow(lat, lng, zoom, div) {
var myOptions = {
'zoom': zoom,
'center': new google.maps.LatLng(lat, lng),
'mapTypeId': google.maps.MapTypeId.SATELLITE,
'disableDefaultUI': true,
'scrollwheel' : false,
'draggable': false
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// markers
// load markers - us
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(40.71435, -74.00597),
map: map,
icon: 'http://google-maps-icons.googlecode.com/files/kitesurfing.png',
draggable: true
});
marker3.setTitle("New York");
// info windows
var contentString = $("#divContentForInfoWindow").html();
$("#divContentForInfoWindow").html('');
infowindow3 = new google.maps.InfoWindow({
content: contentString, zIndex: 5000 // this ZIndex property doesnt appear to do anything.
});
google.maps.event.addListener(marker3, 'click', function() {
infowindow3.open(map, marker3);
});
};
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<!-- Google canvas element | Z-Index of 0 -->
<div id="map_canvas" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;"></div>
<!-- Floating block of text | Z-Index of 100 -->
<div id="FloatingBlock" style='z-index: 100;position: absolute;left: 50px;top:75px;font-size: 16px;width: 525px;text-align: left;color: #111;background-color:#fff;opacity:.80;filter:alpha(opacity=80);'>
<b>This layer is floating above the google map because the Z-Index has been set higher. <br /></b>
Hello world hello world hello world hello world hello world hello world hello world<br />
hello world hello world hello world hello world hello world hello world hello world<br />
Hello world hello world hello world hello world hello world hello world hello world<br />
hello world hello world hello world hello world hello world hello world hello world<br />
Hello world hello world hello world hello world hello world hello world hello world<br />
hello world hello world hello world hello world hello world hello world hello world<br />
<div class="text">
<!-- <input type="button" id="btntest" value="Open Info Window" onclick="showInfoWindow2();" /><input type="button" id="btntest2" value="hide Info Window" onclick="hideInfoWindow2();" />-->
</div>
<div style="clear:both;"></div>
</div>
<!--/can delete this, not used -->
<!-- everything IN here will appear in the google maps info window -->
<div id="divContentForInfoWindow">
This is popup content. <br />This is popup content. <br />
This is popup content. <br />This is popup content. <br />
This is popup content. <br />This is popup content. <br />
This is popup content. <br />This is popup content. <br />
This is popup content. <br />This is popup content. <br />
This is popup content. <br />This is popup content. <br />
</div>
<br /><br /><br />
<!--/everything in here will appear in the google maps info window -->
</body>
आप वास्तव में जेड-इंडेक्स को जिस तरीके से आप कोशिश कर रहे हैं उसे समायोजित करने में सक्षम नहीं होंगे। सीएसएस पैरेंट बच्चों के रिश्ते आपको नहीं देंगे। असल में जब तक नक्शा एक निचला जेड-इंडेक्स होता है तब फ्लोटिंग ब्लॉक, जानकारी विंडो इस सेटअप के साथ कभी भी ऊपर नहीं हो सकती है। आपकी सबसे अच्छी शर्त, [कस्टमऑवरलेज़] (https://developers.google.com/maps/documentation/javascript/examples/overlay-simple) को आजमाएं या DOM – jassok