Google地图正在后台加载，但未显示在页面上

Question

我有一张自定义的地图，我对其进行了样式化，一次可以正常工作，但由于某种原因现在不会显示。 我可以使用firebug并找到应该加载地图的Div，它显示了正在插入的地图代码。 但是问题是有一些东西阻止了它的显示。

这是用于创建和样式化地图的JavaScript。

function initialize() {



        var latlng = new google.maps.LatLng(44.98730,   -93.27591);

        var image = '../wp-content/uploads/2013/11/mapMarker.png';

        var styles = [
            {
                featureType: "landscape.natural",
                                    elementType: 'geometry', 
                stylers: [
                    { color: '#56595c' }        
                ]
            },
                            {
                featureType: "landscape.man_made",
                                    elementType: 'geometry', 
                stylers: [
                    { color: '#56595c' } 
                ]
            },
                            {
                featureType: "road.highway",
                                    elementType: 'geometry.stroke', 
                stylers: [
                    { color: '#b2bb1c' },
                                            { weight: '1' }
                ]
            },
                            {
            featureType: "road.highway",
                                    elementType: 'geometry.fill', 
                stylers: [
                    { color: '#56595c' } 
                ]
            },
                            {  
                featureType: 'road.local',  
                elementType: 'geometry.stroke',  
                stylers: [  
                    { color: '#b2bb1c' },
                                            { weight: '1' }

                ]  
            } ,
                            {
            featureType: "road.local",
                                    elementType: 'geometry.fill', 
                stylers: [
                    { color: '#56595c' } 
                ]
            },
                            {

                featureType: "road.arterial",
                elementType: "geometry.stroke",
                stylers: [
                    { color: '#b2bb1c' },
                                            { weight: '1' }
                ]
            },
                           {
            featureType: "road.arterial",
                                    elementType: 'geometry.fill', 
                stylers: [
                    { color: '#56595c' } 
                ]
            },
                                                           {
            featureType: "road.arterial",
                                    elementType: 'geometry.fill', 
                stylers: [
                    { color: '#56595c' } 
                ]
            },
                            {
                featureType: "poi", 
                elementType: 'geometry',
                stylers: [
                    { color: '#6e7073' }
                ]
            },
                            {
                featureType: "water", 
                elementType: 'geometry',
                stylers: [
                    { color: '#a2a5a9' }
                ]
            }
        ];

        var myOptions = {
            zoom: 16,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            styles: styles
        };

        var map = new google.maps.Map(document.getElementById('map'), myOptions);       
        var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          icon: image
        });


    }
    google.maps.event.addDomListener(window, 'load', initialize);

我知道这是可行的，因为如果我使用Firebug并清除“ position：relative;”的嵌入式样式， 您可以部分查看地图。 任何建议将不胜感激。

Answer 1

您是否尝试过强制刷新？

google.maps.event.trigger(map, 'resize');

Answer 2

请参考链接。

http://jsfiddle.net/UeP2f/

  var mapOptions = {
    zoom: 12,
    center: latlog,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
  };

  map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var styledMapOptions = {
    name: 'Custom Style'
  };

  var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

  map.mapTypes.set(MY_MAPTYPE_ID, customMapType);