Question

I have placed a custom map png on google map. I have removed everything from google maps to only display my custom map. The background color is a light blue and I want to change it to white. Here is the code:

function initialize() {

  var myLatLng = new google.maps.LatLng(39, -98.5);
  var myOptions = {
    maxZoom: 4,
    minZoom: 4,
    zoom: 4,

    panControl: false,
    draggable: false,
        center: myLatLng,
    disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    backgroundColor: '#FFFFFF'
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var mapStyles = [
  {
    featureType: "all",
    stylers: [
      { visibility: "off" }]
    }];

map.setOptions({styles: mapStyles});
}

It only flashes white then changes to a light blue. How do I set it to white or transparent?

Answer 1

although you removed everything there still be blank tiles present.

You may try to hide those tiles, the following CSS works for me:

  /*the desired background for the map*/
#map_canvas{background-color:#fff !important}

  /*hides the tiles (and maybe more^^)*/
#map_canvas div div div div div div img{visibility:hidden}