Geek Answers Handbook

Mac Safari 5.0.4 error when using the Google Maps API

I have a google map built from the Google Maps API v.3 on the website I am creating. It works great in all browsers. However, in Safari (at least for Mac) this affects other elements in an odd way. Apparently, this only applies to absolutely positioned elements, and this may have something to do with z-index. Has anyone had any experience with this? What was your decision? Sorry, I cannot post the URL yet.

Thank!!

+5
source share
8 answers

In the end, I found a solution to my problem. This is really related to the z-index. Interestingly, this only happened in Safari. Regardless, if someone notices something strange happening with Safari and google maps, this may have something to do with the z-index of the element on your page. This is where I will start. Thanks again!

+2
source

The solution that worked for me here (like -webkit-transform: none, stopping maps and other functions working on the page) was ajax in the content via jQuery after loading.

Hope this helps!

+1
source

, , URL-, , , Google Maps API, , , .

0

, Google, , z-indexing , webkit, .

, , .

1. . webkit-transform DOM, Google, z-index "auto". div z- "auto". CSS, :

    #googleMap{

        -webkit-transform: none !important; 
        z-index: auto !important;

        > div{
            z-index: auto !important;
        }

2. z- , ( z-index' Google Maps), z-index z-index: .

0

, . ( , -, , , ). div Google Map , , .

, , div div Google:

<div id="map" style="-webkit-transform: none; z-index: 10;"></div>

. , - !

0

. . . 103.

div[id*='marker_div_']{
-webkit-transform: translateZ(103px);

}

0

I had the same issue in Safari. In my safari, this caused my font on the affected div to become very thin and undefined. The reason I discovered is because the affected div cast a shadow over the div containing google maps. If I remove the drop, the problem will be solved.

0
source

More articles:


All Articles