CODEWITHSUNDEEP
cssgoogle-chromegoogle-maps-api-3zurb-foundation
user699242
user699242

Reputation: 1833

Google Map v3 Initializing with horizontal gray line w/ Foundation in Chrome

Seems to be CSS related because initializing the map in a simple HTML page works just fine. I have added suggested CSS to fix known issues (below), but can't seem to get rid of this.

#map {
    *, *:before, *:after {
        -moz-box-sizing: content-box!important;
        -webkit-box-sizing: content-box!important;
        box-sizing: content-box!important;
    }
    img {
        max-width: none;
        height: auto;
    }
    label {
        width: auto;
        display: inline;
    }
}

enter image description here

Upvotes: 14

Views: 3402

Answers (12)

adamrosloniec
adamrosloniec

Reputation: 1

#map *, #map *:before, #map *:after { 
    -webkit-transform: none !important;
}

it's right way if you don't use parallax effect, but if you want to hide horizontal line with parallax effect, here is fix:

.gm-style > div:first-child {
    background-color: #000000;
}

color #000000 if your google map background color is black, if is other - change this color.

work fine with google maps parallax effect

Upvotes: 0

Henk-Martijn
Henk-Martijn

Reputation: 2024

In my case, I needed a simple way showing the location for a restaurant. All solutions didn't work for me and so I went for the following solution, using a iFrame, with the dimensions specified in my css class:

<div class="fluid google_maps">
    <iframe
      width="100%"
      height="100%"
      frameborder="0" style="border:0"
      src="https://www.google.com/maps/embed/v1/place?key=PLACE_APIKEY_HERE
        &q=eiffel tower">
    </iframe>
</div>

Thats all to it, no javascript or anything, just a few lines of html. Since I don't expect over 2kk visitors a day (google's free limit), it's perfect for me. You do need to create a google API key, but that 1 minute work.

The eiffel tower, can be any address or known location, you normally fill in the google maps website.

Upvotes: 0

optimiertes
optimiertes

Reputation: 4212

.gm-style div div *{ 
    -webkit-transform: none !important;
}

Note: Does the same as Nathans solutions, but also guarantees that the maps is still dragable. However it's just a temporary solution.

Upvotes: 1

Paul Thomas
Paul Thomas

Reputation: 2776

The solution suggested by Optimiertes seems to be unfairly marked down as it worked for me.

I'd suggest caution as there may be cases when something on that level needs to be transformed, but I did the following and it worked great.

#map .gm-style div div *:not(.something-that-needs-transforming){
  -webkit-transform: none !important;
}

I'm sure in time it'll be fixed in Chrome, but annoyed me enough for now to want to fix it.

Other solutions I tried didn't allow the map to pan.

Upvotes: 0

sashk0
sashk0

Reputation: 821

Simply switch onto newer version of API:

<script src="http://maps.googleapis.com/maps/api/js?v=3.14&sensor=false"></script>

it worked for me!

Upvotes: 0

user1274763
user1274763

Reputation:

It seems to be a rendering bug with Chrome (I can replicate it in v 34.0.1847.131), rather than with your CSS. It's been fixed in Canary (v 36.0.1973.2 canary).

According to this bug thread on gmaps-api-issues:

The fix is in Chrome 35, which is currently scheduled for release in mid-May (you can switch to the beta channel to get the fix now or verify it in a Canary build - http://www.chromium.org/getting-involved/dev-channel).

Until then, like @user699242 suggested, removing any heading tags (h1, h2, etc.) in your page seems to fix it. Of course, that's semantically unappealing though, might be better just to wait.

Upvotes: 3

smilly92
smilly92

Reputation: 2443

If -webkit-transform: none !important; doesn't work make sure your browser isn't zoomed in. Having it zoomed into 110% causes the same grey line.

Upvotes: 0

Turnip
Turnip

Reputation: 464

For anyone else looking for a temp solution for this bug:

CSS

.map *, .map *:before, .map *:after {
    -webkit-transform: none !important; 
}

SASS

.map {
  *, *:before, *:after {    
    -webkit-transform: none!important;
  }  
}

Upvotes: 6

Mike
Mike

Reputation: 1

.gmap-container,
.gmap-container > div.gm-style,
.gmap-container > div.gm-style > div:first-child,
.gmap-container > div.gm-style > div:first-child > div > div:last-child,
.gmap-container > div.gm-style > div:first-child > div > div:last-child * {
    -webkit-transform: none!important;
}

Upvotes: 0

Eric MORAND
Eric MORAND

Reputation: 6786

I encountered this problem but with a vertical gray line, and it was a rounding issue.

This was due to the fact that the div containing the map canvas was set to fluid-width (50% in my case) and more often than not did lead to a subpixel width.

To fix my problem, I had to listen to the map canvas resize event, retrieve and round the inner width of the container of the canvas (the one with width set to 50%) and set the rounded width back to map canvas - all of this in JavaScript of course.

Here is my HTML markup :

<div id="mapContainer">
    <div id="mapCanvas"></div>
</div>

Here are my CSS rules :

#mapContainer {
  width: 50%;
}

#mapCanvas {
  height: 100%;
  width: 100%;
  float: right;
}

Here is the JavaScript fix :

var isResizing = false;

var fixMapCanvasRoundingIssue = function () {
    if (isResizing == false) {
        isResizing = true;

        var width = Math.floor(document.getElementById("mapContainer").getBoundingClientRect().width);

        $("#mapCanvas").width(width);

        // is this needed ?
        google.maps.event.trigger(map, "resize");

        isResizing = false;
    }
}

And here is the Google Map initialization :

var mapCanvas = document.getElementById("mapCanvas");

google.maps.event.addDomListener(mapCanvas, "resize", function () {
    fixMapCanvasRoundingIssue();
});

map = new google.maps.Map(mapCanvas , {
    ...
});

fixMapCanvasRoundingIssue();

Note that I set the map canvas to float to the right to prevent any tearing issue on resize. This may not be needed in your case.

Upvotes: 0

stecooper
stecooper

Reputation: 48

It is happening for me on my site http://www.shortwave.am/ as well, but only in the newest version of Chrome (I had Version 33.x before which was for some reason not updating and the problem was not there, but since I changed to the newest I have the issue).

It is fine on Firefox though.

Can you post a link to your site as an example please?

Upvotes: 0

user699242
user699242

Reputation: 1833

Seems like it has something to do with the following which is added inline to images by Google: 

-webkit-transform: translateZ(0px)

Finally narrowed it down to h tags. If I removed all the h tags (h1, h2, etc.), the gray line disappears. So, seems like a Chrome bug (v 34.0.1847.116).

Upvotes: 0

Related Questions