API v3 rewrite the z-index of the map container

95 views
Skip to first unread message

sing

unread,
Jun 4, 2010, 6:05:00 AM6/4/10
to Google Maps JavaScript API v3
Code:
----------------------------------------------------------------------------------------------------
<div id="map-container" style="z-index:2;"></div>
<script>
var opts = {
zoom: 19,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-container'),
opts);
</script>
----------------------------------------------------------------------------------------------------

after loading the map, the "map-container" div's z-index is set to 0,
why should this happen?
I want to show the map in a layer over other DOM elements. But the API
made this change to destroy what I suppose to do.

P.S. Actually, I use v2 before, but after discovering the "unable to
scroll zoom level ladder in IE6" bug (see the image link, and bug
issue link below, the bug issue seems no one is working on it), I
switched to v3, but the API rewrite the z-index. Now, what should I
use in this case?

image:
http://gmaps-api-issues.googlecode.com/issues/attachment?aid=6548097374062818461&name=Zoom_Control.jpg&token=17ff40c668922dfe7cf1e9aab1ebbf9b&inline=1

bug issue: http://code.google.com/p/gmaps-api-issues/issues/detail?id=2317

Chad Killingsworth

unread,
Jun 5, 2010, 7:17:34 PM6/5/10
to Google Maps JavaScript API v3
Have you tried just wrapping your map container in another div and
setting the z-index on that outer div? Don't forget to change the
position style as well.

Chad Killingsworth

On Jun 4, 5:05 am, sing <sin...@gmail.com> wrote:
> Code:
> --------------------------------------------------------------------------- -------------------------
> <div id="map-container" style="z-index:2;"></div>
> <script>
> var opts = {
>                         zoom: 19,
>                         center: latlng,
>                         mapTypeId: google.maps.MapTypeId.ROADMAP
>                 };
> map = new google.maps.Map(document.getElementById('map-container'),
> opts);
> </script>
> --------------------------------------------------------------------------- -------------------------
>
> after loading the map, the "map-container" div's z-index is set to 0,
> why should this happen?
> I want to show the map in a layer over other DOM elements. But the API
> made this change to destroy what I suppose to do.
>
> P.S. Actually, I use  v2 before, but after discovering the "unable to
> scroll zoom level ladder in IE6" bug (see the image link, and bug
> issue link below, the bug issue seems no one is working on it), I
> switched to v3, but the API rewrite the z-index. Now, what should I
> use in this case?
>
> image:http://gmaps-api-issues.googlecode.com/issues/attachment?aid=65480973...
>
> bug issue:http://code.google.com/p/gmaps-api-issues/issues/detail?id=2317
Reply all
Reply to author
Forward
0 new messages