获取酷炫的谷歌地图，如 42floors.com答案

【问题标题】：get cool google maps like 42floors.com获取酷炫的谷歌地图，如 42floors.com
【发布时间】：2013-04-18 22:47:18
【问题描述】：

我使用 google maps api，我想获得类似 42floors.com 的 google map UI 的 UI。

谁能帮助我他们如何更改 UI？

我猜他们正在使用地图样式 https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple

var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

  var featureOpts = [
    {
      featureType: 'road',
      elementType: 'geometry',
      stylers: [
        { hue: -45 },
        { saturation: 100 }
      ]
    },
    {
      featureType: 'landscape',
      elementType: 'geometry',
      stylers: [
        { hue: '#000000' },
        { saturation: 75 },
        { lightness: -100}
      ]
    }
  ];

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

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

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

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

  map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
}

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

【问题讨论】：

标签： google-maps google-maps-api-3

【解决方案1】：

这不是同一个解决方案，但它导致了正确的解决方案:)

var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

  var featureOpts = [
    {
      featureType: 'road',
      elementType: 'geometry',
      stylers: [
        { hue: -45 },
        { saturation: 100 }
      ]
    },
    {
      featureType: 'landscape',
      elementType: 'geometry',
      stylers: [
        { hue: '#000000' },
        { saturation: 75 },
        { lightness: -100}
      ]
    }
  ];

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

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

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

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

  map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
}

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

【讨论】：

【解决方案2】：

是的，这是地图样式的实现。看看他们的代码，在嵌入谷歌地图库后，你会发现一个custom Javascript file（链接可能会不时改变）。如果您开始搜索诸如“ROADMAP”之类的字符串，您将找到定义样式的部分。请注意，这个文件被缩小了，不是真正的人类可读的。

【讨论】：