谷歌地图样式和可视化地理图表答案

【问题标题】：Google Maps Styled & Visualization GeoCharts谷歌地图样式和可视化地理图表
【发布时间】：2013-07-21 17:55:27
【问题描述】：

我制作了一个风格化的谷歌地图，我想使用一些可视化的 Geocharts。可以同时使用吗？

  html, body, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  </style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mateo = new google.maps.LatLng(37.53, -122.343);

var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

var featureOpts = [...MY STYLE...];

var mapOptions = {
    zoom: 10,
    center: mateo,
    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);

现在，我也想使用可视化，GeoCharts

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

谢谢，

理想情况下，我希望为所有选定的国家/地区设置我的地图样式和另一种样式设置。谢谢

【问题讨论】：

标签： javascript jquery html google-maps google-maps-api-3

【解决方案1】：

是的，您可以同时使用 Maps 和 GeoCharts - 只需包含两者的 javascript 和 HTML。 Map 和 GeoChart 样式和代码不会相互干扰（除非您希望在两者之间进行一些交互，在这种情况下，有办法将它们挂钩）。

编辑以响应 cmets：

GeoCharts 和 Maps 不能合并为一张地图；但 Maps API 确实支持自定义图层，您可以使用这些图层使用彩色矢量多边形构建等值线地图，这应该会为您提供所需的结果。

【讨论】：

我希望它们在同一个图表上。 IE。以 Styled Maps 风格可视化 GeoCharts 的功能。如何将它们连接在一起？
啊，我明白了。 GeoCharts 和 Maps 不支持彼此的功能，因此没有内置的方法来处理这个问题。 Maps API 确实支持自定义图层，您可以使用这些图层使用彩色矢量多边形构建等值线图（GeoCharts 是等值线图）。