使用Google Maps API的可點擊國家/地區

Question

我剛開始涉足Google Maps API，但我已經陷入困境。我正在尋找一種方式來重新創建this類型的地圖與谷歌地圖。我需要刪除所有標籤，獲取空白背景（我嘗試使用地圖樣式，但這對我來說不起作用，下面的代碼示例），並在我將鼠標懸停在其上時點亮這些國家。

是否有任何教程，我似乎錯過了我的搜索，可以幫助我或任何人都可以指向正確的方向？ :)

var _mapstyle = [ 
    { 
    featureType: "all", 
    elementType: "labels", 
    stylers: [ 
     { visibility: "off" } 
    ] 
    } 
]; 

function create_map() 
{ 
    _map = new google.maps.Map(document.getElementById("eyewebz-map"), 
    { 
     zoom: 2, 
     center: new google.maps.LatLng(20, 0), 
     navigationControl: true, 
     navigationControlOptions: { 
      style: google.maps.NavigationControlStyle.DEFAULT 
     }, 
     mapTypeControl: true, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
     }, 
     scaleControl: true, 
     mapTypeIds: ['_mapstyle'] 
    }); 

    _display.setMap(_map); 
    _display.setPanel(document.getElementById("NavigationText")); 
} 

編輯 這就是地圖將用於：我已經在我的生活遊歷了一下，希望做的是多了很多。自從我第一次旅行以來，我一直在寫博客。我現在已經開發了一個新博客，並且希望讓我去過的國家可以點擊並點擊一個URL。理想的情況是，當我點擊一個國家時，它會帶我到一個頁面，只有那個特定的國家在地圖上顯示，並帶有一些標記（要訪問的地方）。一旦你點擊這些標記，它應該顯示一個特定的帖子/一些信息。

Answer 1

這樣的事情可以嗎？複製並粘貼到HTML頁面主體（JSFiddler here）中。

<style type="text/css"> 
    #map-canvas { 
    height: 600px; 
    width: 800px; 
    } 
</style> 

<script type="text/javascript" 
    src="https://maps.google.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 
    // the map 
    var map; 

    function initialize() { 
    var myOptions = { 
     zoom: 2, 
     center: new google.maps.LatLng(10, 0), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // initialize the map 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     myOptions); 

    // these are the map styles 
    var styles = [ 
     { 
      stylers: [ 
      { hue: "#00ffe6" }, 
      { saturation: -20 } 
      ] 
     }, 
     { 
      featureType: "landscape", 
      stylers: [ 
      { hue: "#ffff66" }, 
      { saturation: 100 } 
      ] 
     },{ 
      featureType: "road", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "administrative.land_parcel", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "administrative.locality", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "administrative.neighborhood", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "administrative.province", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "landscape.man_made", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "landscape.natural", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "poi", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "transit", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     } 
     ]; 

    map.setOptions({styles: styles}); 

    // Initialize JSONP request 
    var script = document.createElement('script'); 
    var url = ['https://www.googleapis.com/fusiontables/v1/query?']; 
    url.push('sql='); 
    var query = 'SELECT name, kml_4326 FROM ' + 
     '1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ'; 
    var encodedQuery = encodeURIComponent(query); 
    url.push(encodedQuery); 
    url.push('&callback=drawMap'); 
    url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ'); 
    script.src = url.join(''); 
    var body = document.getElementsByTagName('body')[0]; 
    body.appendChild(script); 
    } 

    function drawMap(data) { 
    var rows = data['rows']; 
    for (var i in rows) { 
     if (rows[i][0] != 'Antarctica') { 
     var newCoordinates = []; 
     var geometries = rows[i][1]['geometries']; 
     if (geometries) { 
      for (var j in geometries) { 
      newCoordinates.push(constructNewCoordinates(geometries[j])); 
      } 
     } else { 
      newCoordinates = constructNewCoordinates(rows[i][1]['geometry']); 
     } 
     var country = new google.maps.Polygon({ 
      paths: newCoordinates, 
      strokeColor: '#ff9900', 
      strokeOpacity: 1, 
      strokeWeight: 0.3, 
      fillColor: '#ffff66', 
      fillOpacity: 0, 
      name: rows[i][0] 
     }); 
     google.maps.event.addListener(country, 'mouseover', function() { 
      this.setOptions({fillOpacity: 0.4}); 
     }); 
     google.maps.event.addListener(country, 'mouseout', function() { 
      this.setOptions({fillOpacity: 0}); 
     }); 
     google.maps.event.addListener(country, 'click', function() { 
      alert(this.name); 
     }); 

     country.setMap(map); 
     } 
    } 
    } 

    function constructNewCoordinates(polygon) { 
    var newCoordinates = []; 
    var coordinates = polygon['coordinates'][0]; 
    for (var i in coordinates) { 
     newCoordinates.push(
      new google.maps.LatLng(coordinates[i][1], coordinates[i][0])); 
    } 
    return newCoordinates; 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

<div id="map-canvas"></div> 

這是本 Fusion Tables Layer Example: Mouseover Map Styles的修改版本。

您還應該看看Styled Maps。

您可能感興趣的另一件事是Natural Earth Data。這在你需要一個多邊形數據源的情況下。這裏有一個使用它的例子GViz API Example: Fusion Tables Data Source。