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);

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

2 个答案: