javascript new グーグルマップインフォウィンドウZインデックス




var infowindow new google maps infowindow({ content contentstring}); (2)

infowindow.setZIndex(Number)を使用します。

InfoWindowがGoogleマップよりもZ-インデックスの高い要素をポップアップすることは可能ですか?

だから、GoogleマップのZ-インデックスがゼロであると言うことができます。 要素のZ-インデックスは100です。マーカーをクリックすると、要素と同じ領域にInfoWindowが表示されます。 このInfoWindowをどのようにして要素の上に置くのですか?

InfoWindowのz-Indexを高い値に設定しようとしましたが、これは何もしないようです。

私はこの問題を実証するデモをまとめました。 どんな援助もありがとう!

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


外部要素の代わりにカスタムコントロールを使用してマップに配置することができます。 カスタムコントロールは地図の上に配置され、InfoWindowを開くと、Googleマップはコントロールの位置を検出し、コントロールの下にあるInfoWindowを自動的に移動して開きます。 この場合、マップをドラッグまたはズームしたときにオーバーレイが移動し、コントロールは常に同じ位置にとどまるため、 カスタムオーバーレイの代わりにオーバーレイを使用する方が適しています。

だから、最初にあなたのhtmlでdivsとして地図とコントロールを追加してからマップを初期化し、その後にそのようなマップにコントロールを追加する必要があります:

var control = document.getElementById('control');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(control);

それはどれくらい簡単ですか?)







infowindow