Google отображает InfoBox (информационное окно) поверх карты (z-index), эффект подсказки Yelp.com - PullRequest
Новая
       20

Google отображает InfoBox (информационное окно) поверх карты (z-index), эффект подсказки Yelp.com

1 голос
/ 18 ноября 2011

Это карта Google с InfoBox, я хочу добиться эффекта div всплывающей подсказки карты Yelp. Другими словами, я хочу расположить информационный блок поверх карты Google , для этого я использую информационный блок карт Google с z-индексом выше, чем z-индекс карты, но это не работает, это помощь jsfiddle, пожалуйста,

http://jsfiddle.net/MdhzR/

В этом примере я хочу, чтобы желтый контейнер располагался поверх контейнера карты, а также поверх серого контейнера, возможно ли это? помогите пожалуйста!

Вот код:

CSS: 

#map_canvas{
    position: absolute;
    top: 50px; left: 20px;
    width: 300px;
    height: 300px;
    z-index: 1;}
#z_index_gray {
     position: absolute;
      top: 250px; left: 250px;
      height: 125px; width: 125px;
      background-color: gray;
      z-index: 10;}

HTML: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
    <div id="map_canvas"></div>
<div id="z_index_gray"></div>
    <p>

JS: 

function initialize() {
                var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

                var myMapOptions = {
                    zoom: 15
                    ,center: secheltLoc
                    ,mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


                var marker = new google.maps.Marker({
                    map: theMap,
                    draggable: true,
                    position: new google.maps.LatLng(49.47216, -123.76307),
                    visible: true
                });

                var boxText = document.createElement("div");
                boxText.style.cssText = "position: absolute;border: 1px solid black;  background: yellow; padding: 5px;z-index: 20;height: 100px; width: 300px;";
                boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

                var myOptions = {
                    content: boxText
                    ,disableAutoPan: false
                    ,maxWidth: 0
                    ,pixelOffset: new google.maps.Size(-140, 0)
                    ,zIndex: 1
                    ,boxStyle: {
                        background: "url('tipbox.gif') no-repeat"
                        ,opacity: 0.75
                        ,width: "280px"
                    }
                    ,closeBoxMargin: "10px 2px 2px 2px"
                    ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                    ,infoBoxClearance: new google.maps.Size(5, 5)
                    ,isHidden: false
                    ,pane: "floatPane"
                    ,enableEventPropagation: false
                };

                google.maps.event.addListener(marker, "click", function (e) {
                    ib.open(theMap, this);
                });

                var ib = new InfoBox(myOptions);
                ib.open(theMap, marker);
            }
            $(document).ready(function() {
                initialize();
            });

JSFiddle: http://jsfiddle.net/MdhzR/

Спасибо! Оплаченный Я следую этому примеру документации infoBox: http://google -maps-utility-library-v3.googlecode.com / svn / trunk / infobox / docs / examples.html

1 Ответ

4 голосов
/ 10 декабря 2011

Я нашел этот пример от Памелы Фокс, и он делает именно то, что я хочу.

http://gmaps -samples-v3.googlecode.com / SVN / багажник / smartinfowindow / smartinfowindow.html

Надеюсь, это поможет кому-то еще.

...