Remove google maps background-color

Question

I am trying to make my google maps transparent. I have managed to changed the opacity of the map tiles (markers are also transparent but I need to sort that out later).I wanted to add a gradient to the that would look like folds in the page and then have the transparent maps overlaying it so it looks fold lines in a map.

I noticed that google is adding a background color to the div containing the maps... a slight obstical in my plan.

I tried targeting the div with jquery to set the background to none. Unfortunatly for me Google won and I couldn't change it.

$('div div#example').css("background-color","#000");

Here is a fiddle showing how I have things set up http://jsfiddle.net/pTuQ4/

Solution

There is a map option to change the background color: backgroundColor

For example:

var mapOptions = {
    zoom: 4,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    backgroundColor: "black"
};

Comments

[Daimz]

Thanks so much that is exactly what I was looking for worked like a charm even with gmap3. thanks for the help! Here is the version with background color set to none jsfiddle.net/daimz/pTuQ4/4