2013-07-22 53 views
1

我做了一個風格的谷歌地圖,我想使用一些可視化Geocharts。我可以同時使用兩種嗎?谷歌地圖樣式和可視化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> 

感謝,

我會非常喜歡有我的地圖風格,另一種風格設定爲所有選定的國家。謝謝

回答

0

是的,你可以同時使用地圖和GeoCharts - 只需包括javascript和HTML。 Map和GeoChart樣式和代碼不會互相干擾(除非你想在兩者之間進行一些交互,在這種情況下,可以將它們連接在一起)。

編輯迴應的意見:

的GeoCharts和地圖無法合併在一起成爲一個單一的地圖;但Maps API確實支持自定義圖層,您可以使用這些圖層使用彩色矢量多邊形構建等值線地圖,該地圖應該可以提供您正在查找的結果。

+0

我希望他們在同一個圖表上。即可視化GeoCharts的特徵與風格地圖的風格。我如何將它們掛在一起? – IdeoREX

+0

啊,我明白了。 GeoCharts和Maps不支持彼此的功能,所以沒有內置的方法來處理這個問題。 Maps API支持自定義圖層,您可以使用該圖層使用彩色矢量多邊形構建等值線圖(GeoCharts是等值線圖)。 – asgallant