CODEWITHSUNDEEP
javascriptcsshtmlgoogle-mapsgoogle-chrome
Jinx
Jinx

Reputation: 867

Black blocks on Google map API v3

I have problems with embedded Google map. I'm using API v3, and for some reason black blocks are rendered behind map controls and marker.

Here's the screenshot:

Black boxes on google map

I only have HTML5 doctors reset stylesheet, and some very simple custom styling for layout and typography. when I refresh page whole map blinks for a moment and then black blocks are rendered.

Here's codepen, but map is not displayed there for some reason. I have marked it with: [GOOGLE MAP] so it's easier to find. http://codepen.io/Jinx/pen/bcrpn

[UPDATE]

I have created new html without any content except map div element and all scripts and css files from original html are included and map works properly.

This confuses me because it would appear that this bug is due to HTML surrounding the map?

[UPDATE2]

I got map to render on code pen but it has no controls and no marker. Still same result on local version.

Could it be because I'm working locally?

[UPDATE3]

I just checked in Firefox, Internet Explorer 9, Opera and Safari and map is rendered perfectly. This seems like Chrome bug.

Also, I have noticed that chrome is offsetting all element boxes out of browser window visible area. Here's a screenshot.

Inspectors in other browsers show boxes normally.

enter image description here

Upvotes: 2

Views: 1014

Answers (2)

Jinx
Jinx

Reputation: 867

It would seem this was indeed Chrome bug. I have just made copy of my project folder, and opened index.html from there and everything is fine.

I guess this was some cache problem/bug.

Upvotes: 2

Xeoncross
Xeoncross

Reputation: 57184

It is black because you have a CSS style setting it to black with a color or image that is being inherited. Check your CSS for #000000 as a background color or url() for an image.

Upvotes: -1

Related Questions