Google 应用自定义样式后地图不显示

Question

我几乎完成了下面显示数组标记的代码，每个标记都有自己的信息框。

最后一步是设置地图样式，但尽管遵循了许多在线教程（更改相关位以匹配我的代码），但我得到的只是一张完全灰色的地图。

这是我的代码：

// Set up map    

    var map;
    var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";

    google.maps.event.addDomListener(window, 'load', initialize);
    
    function initialize() {
        var store_pins  = new Array();
        var pin_marker  = new Array();
        var pin_info    = new Array();
        var pin_infoop  = new Array();
        var pin_infotxt = new Array();
        
        // Style Map

        var style_map = [
          {
            "featureType": "administrative",
            "stylers": [
              { "visibility": "off" }
            ]
          },{
            "featureType": "poi",
            "stylers": [
              { "visibility": "off" }
            ]
          },{
            "featureType": "transit",
            "stylers": [
              { "visibility": "off" }
            ]
          },{
            "featureType": "road",
            "stylers": [
              { "visibility": "off" }
            ]
          },{
            "featureType": "landscape",
            "stylers": [
                { "visibility": "on" },
                { "color": "#ffffff" }
            ]
          },{
            "featureType": "water",
            "stylers": [
                { "visibility": "on" },
                { "color": "#00ffff" }
            ]  
          }
        ];
        
        var styledMap   = new google.maps.StyledMapType(style_map,{name: "Styled Map"});
        
        store_pins = [
            [‘Test Pin 1’, 55.144178, -2.254122,'pin','bellinghamcoop.jpg’,’Test Pin 1’],
            [‘Test Pin 2’, 55.018754, -1.672230,'rugby','kingparktigers.jpg’,’Test Pin 2’]
        ];

        var myOptions = {
            zoom:                   3,
            minZoom:                3,
            center:                 google.maps.LatLng(55.144178,-2.254122),
            mapTypeControlOptions: 
            {
                                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
            }
        }

        map = new google.maps.Map(document.getElementById("trackingT-map"), myOptions);
        
        map.mapTypes.set('map_style', styledMap);
        map.setMapTypeId('map_style');

    
        // Main Loop
        
        
        for(i=0;i<store_pins.length;i++)
        {
        var pos = new google.maps.LatLng(store_pins[i][1], store_pins[i][2]);
        var pinIcon = {
            url: 'icons/shirtpin.png',
            //The size image file.
            size: new google.maps.Size(50, 55),
            //The point on the image to measure the anchor from. 0, 0 is the top left.
            origin: new google.maps.Point(0, 0),
            //The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
            anchor: new google.maps.Point(25, 20)
        };
        var pinShape = {
            coord: [0,0,50,55],
            type: 'rect'
        };

        pin_marker[i] = new google.maps.Marker(
        {
                position:       pos,
                map:            map,
                title:          store_pins[i][0],
                icon:           pinIcon,
                shape:          pinShape,
                zIndex:         107
           } 
        );
            
        //Creates the information to go in the pop-up info box.
        pin_infotxt[i] = document.createElement("div");
        pin_infotxt[i].style.cssText = pop_up_info;
            
            
        pin_infotxt[i].innerHTML = '<span class="pop_up_box_text"><img src="content/TShirts/'+store_pins[i][4]+'" border="0" id="imgid'+i+'"/><h align="center">'+store_pins[i][5]+'</h></span>';

        pin_infoop[i] = {
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-241, 0),
                zIndex: null,
                boxStyle: { 
                background: "url('infobox/pop_up_box_top_arrow.png') no-repeat",
                opacity: 1,
                width: "380px"
                },
                closeBoxMargin: "10px 2px 2px 2px",
                closeBoxURL: "icons/button_close.png",
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false,
                content:   pin_infotxt[i]
        };
            
        google.maps.event.addListener(pin_marker[i], 'click', (function(marker, i) {
            return function() {
                
                for ( h = 0; h < pin_marker[i].length; h++ ) {
                    pin_marker[h].infobox.close();
                }
                
                map.panTo(this.position);
                map.setZoom(15);
                pin_info[i].open(map, this);
            }
        })(pin_marker[i], i));
        
        pin_info[i] = new InfoBox(pin_infoop[i]);
} 
};

我相信这会很简单。

希望有人能提供帮助。

吉姆

Answer 1

最简单的方法是将样式应用到地图：

var myOptions = {
    zoom: 3,
    minZoom: 3,
    center: map_center,
    styles: style_map,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("trackingT-map"), myOptions);

proof of concept fiddle（除非你真的想要另一种地图类型）

代码片段：

var map;
var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";


google.maps.event.addDomListener(window, 'load', initialize);
var store_pins = [];
var pin_marker = [];
var pin_info = [];
var pin_infoop = [];

function initialize() {
  var map_center = new google.maps.LatLng(55.144178, -2.254122);

  // Style Map

  var style_map = [{
    "featureType": "administrative",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "transit",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "road",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "landscape",
    "stylers": [{
      "visibility": "on"
    }, {
      "color": "#ffffff"
    }]
  }, {
    "featureType": "water",
    "stylers": [{
      "visibility": "on"
    }, {
      "color": "#00ffff"
    }]
  }];

  // var styledMap   = new google.maps.StyledMapType(style_map,{name: "Styled Map"});

  store_pins = [
    ['Test Pin 1', 55.144178, -2.254122, 'pin', 'bellinghamcoop.jpg', 'Test Pin 1'],
    ['Test Pin 2', 55.018754, -1.672230, 'rugby', 'kingparktigers.jpg', 'Test Pin 2']
  ];

  var myOptions = {
    zoom: 3,
    minZoom: 3,
    center: map_center,
    styles: style_map,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("trackingT-map"), myOptions);

  // Main Loop


  for (i = 0; i < store_pins.length; i++) {
    var pos = new google.maps.LatLng(store_pins[i][1], store_pins[i][2]);
    var pinIcon = {
      url: 'icons/shirtpin.png',
      //The size image file.
      size: new google.maps.Size(50, 55),
      //The point on the image to measure the anchor from. 0, 0 is the top left.
      origin: new google.maps.Point(0, 0),
      //The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
      anchor: new google.maps.Point(25, 20)
    };
    var pinShape = {
      coord: [0, 0, 50, 55],
      type: 'rect'
    };

    pin_marker[i] = new google.maps.Marker({
      position: pos,
      map: map,
      title: store_pins[i][0],
      // icon:           pinIcon,
      // shape:          pinShape,
      zIndex: 107
    });

    pin_infoop[i] = {
      disableAutoPan: false,
      maxWidth: 0,
      pixelOffset: new google.maps.Size(-75, 0),
      zIndex: null,
      boxStyle: {
        background: "white",
        opacity: 1,
        width: "150px"
      },
      closeBoxMargin: "10px 2px 2px 2px",
      closeBoxURL: "icons/button_close.png",
      infoBoxClearance: new google.maps.Size(1, 1),
      isHidden: false,
      pane: "floatPane",
      enableEventPropagation: false,
      content: store_pins[i][5]
    };

    pin_info[i] = new InfoBox(pin_infoop[i]);



    google.maps.event.addListener(pin_marker[i], 'click', (function(marker, i) {
      return function() {
        map.panTo(this.position);
        map.setZoom(10);
        pin_info[i].open(map, this);
      }
    })(pin_marker[i], i));
  }
};

#trackingT-map {
  height: 400px;
  width: 400px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="http://www.staff.org.au/infobox.js"></script>
<div id="trackingT-map"></div>

Google 应用自定义样式后地图不显示

Google Map not displaying after applying custom style

google-maps

styling