Google Maps APIを使用しているクリック可能な国

Question

私はちょうどGoogle Maps APIでダブリングを開始しましたが、私はすでに立ち往生しています。私はthisタイプのマップをGoogleマップで再現する方法を探しています。私はすべてのラベルを削除し、空白の背景を取得する必要があります（私はマップスタイルを使用しようとしましたが、私のためには動作しませんでした、下のコード例）。

私の検索で見逃したようなチュートリアルがありますか？誰かが私を助けてくれますか、誰かが正しい方向に向かうことができますか？ :)

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")); 
} 

EDIT これは、マップがために使用されるものである：私は私の人生の中でビットを旅し、それをより多くを行うことを期待しています。私の最初の大きな旅以来、私はブログを続けてきました。私は今、新しいブログを開発しました。クリックした国をクリックして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もご覧ください。

もう1つ興味のあることはNatural Earth Dataです。この場合、ポリゴンデータソースが必要です。そしてここにそれを使用する例はGViz API Example: Fusion Tables Data Sourceです。