Google Maps Gray

I would say I have a rather simple problem, which are driving me nuts. On my customers web page http://alminde-akupunktur.dk/ at the bottom of the landing page, I'm using a Google

Solution 1:

It's a CSS-issue, forced by the setting of max-height:100% for img in http://alminde-akupunktur.dk/wp-content/themes/Akupunkturklinikken/assets/css/style.css (this rule also affects the map-tiles)

Add this rule to your CSS:

.gm-styleimg{max-height:none;}

Solution 2:

try moving

<scripttype='text/javascript'src='https://maps.googleapis.com/maps/api/js'></script>

in the head section and not at the bottom of the html page. (is a library request and better if it is done before of the code use)

Solution 3:

related question: google maps refreshing grey

from that question:

make sure the div where the map is displayed has a valid size, if it is hidden, it will have zero size and you will need to display the div before it will have a valid size. If it is sized using percentages, make sure that all of its parent elements either have a percent size or a specific size (see Mike Williams' Google Maps API v2 tutorial on the subject for details).

Your map doesn't have a size. If I move your the relevant code to a fiddle and give the div with id="frontpage-maps-canvas" a size, it works for me. If I add the parent div with id="frontpage-maps" without any CSS it becomes grey. If I give that div a size:

#frontpage-maps {
    height: 100%;
    width: 100%;
}

the map appears.

proof of concept fiddle

code snippet:

functionmapLoad() {
  console.log("map load...");

  // Google maps on front pagefunctionmapOption(zoom, type, draggable, scrollwheel) {
    return map_options = {
      center: new google.maps.LatLng(55.5661181, 9.4885967),
      zoom: zoom,
      panControl: false,
      zoomControl: false,
      scaleControl: false,
      navigationControl: false,
      mapTypeControl: false,
      overviewMapControl: false,
      streetViewControl: false,
      scrollwheel: scrollwheel,
      draggable: draggable,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{
        "featureType": "landscape",
        "stylers": [{
          "saturation": -100
        }, {
          "lightness": 65
        }, {
          "visibility": "on"
        }]
      }, {
        "featureType": "poi",
        "stylers": [{
          "saturation": -100
        }, {
          "lightness": 51
        }, {
          "visibility": "off"
        }]
      }, {
        "featureType": "road.highway",
        "stylers": [{
          "saturation": -100
        }, {
          "visibility": "simplified"
        }]
      }, {
        "featureType": "road.arterial",
        "stylers": [{
          "saturation": -100
        }, {
          "lightness": 30
        }, {
          "visibility": "on"
        }]
      }, {
        "featureType": "road.local",
        "stylers": [{
          "saturation": -100
        }, {
          "lightness": 40
        }, {
          "visibility": "on"
        }]
      }, {
        "featureType": "transit",
        "stylers": [{
          "saturation": -100
        }, {
          "visibility": "simplified"
        }]
      }, {
        "featureType": "administrative.province",
        "stylers": [{
          "visibility": "off"
        }]
      }, {
        "featureType": "water",
        "elementType": "labels",
        "stylers": [{
          "visibility": "on"
        }, {
          "lightness": -25
        }, {
          "saturation": -100
        }]
      }, {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [{
          "hue": "#ffff00"
        }, {
          "lightness": -25
        }, {
          "saturation": -97
        }]
      }]
    }
  }

  var mapCanvas = document.getElementById('frontpage-maps-canvas');

  if (mapCanvas) {
    var map_obj = new google.maps.Map(mapCanvas, mapOption(16, 16, true, true));

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(55.56595843045612, 9.482338428497314)
    });

    marker.setMap(map_obj);

    google.maps.event.addDomListener(window, "resize", function() {
      var center = map_obj.getCenter();
      google.maps.event.trigger(map_obj, "resize");
      map_obj.setCenter(center);
    });
  };
}
google.maps.event.addDomListener(window, "load", mapLoad);

html,
body,
#frontpage-maps-canvas,
#frontpage-maps {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="frontpage-maps"><divid="frontpage-maps-canvas"></div></div>