GoogleマップAPIフュージョンテーブルとスタイルマップ

Question

ive私が作っているこのウェブサイト用のフュージョンテーブルオーバーレイをスタイル付きのGoogleマップで使用しようとしましたが、現在はオーバーレイが1つのマップで動作していますが、オーバーレイdoesntのは、適用したいされ、ihavent誰もがthatllは素晴らしいことを助けることができるので、もし、これはどこにでも私の検索をferom上の情報を見つける聞くことができたが、オーバーレイ

 var map; 
 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: -34.397, lng: 150.644}, 
 
      zoom: 3, 
 
\t  mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }); 
 
\t var world_geometry = new google.maps.FusionTablesLayer({ 
 
    \t \t query: { 
 
    \t \t select: 'geometry', 
 
    \t from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk' 
 
     }, 
 
     map: map, 
 
     suppressInfoWindows: true 
 
}); 
 
    }

とマップの私のスクリプトです

ここでは、スタイル付き地図のコードはありますが、オーバーレイが機能しない：

 var map; 
 
     function initMap() { 
 
     var styles = [ 
 
      { 
 
       "featureType": "administrative", 
 
       "elementType": "labels.text.fill", 
 
       "stylers": [ { "color": "#444444" } ] 
 
      }, 
 
      { 
 
       "featureType": "landscape", 
 
       "elementType": "all", 
 
       "stylers": [{"color": "#FF00FF"}] 
 
      }, 
 
      { 
 
       "featureType": "poi", 
 
       "elementType": "all", 
 
       "stylers": [{"visibility": "off"}] 
 
      }, 
 
      { 
 
       "featureType": "road", 
 
       "elementType": "all", 
 
       "stylers": [{"saturation": -100 
 
        }, 
 
        {"lightness": 45}] 
 
      }, 
 
      { 
 
       "featureType": "road.highway", 
 
       "elementType": "all", 
 
       "stylers": [{"visibility": "simplified"}] 
 
      }, 
 
      { 
 
       "featureType": "road.arterial", 
 
       "elementType": "labels.icon", 
 
       "stylers": [{"visibility": "off"}] 
 
      }, 
 
      { 
 
       "featureType": "transit", 
 
       "elementType": "all", 
 
       "stylers": [{"visibility": "off"}] 
 
      }, 
 
      { 
 
       "featureType": "water", 
 
       "elementType": "all", 
 
       "stylers": [{"color": "#00FF00" 
 
        }, 
 
        {"visibility": "on"}] 
 
      } 
 
     ]; 
 
    var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"}); 
 
    var mapOptions = { 
 
     zoom: 3, 
 
     center: {lat: -34.397, lng: 150.644}, 
 
     mapTypeControlOptions: { 
 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] } 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), 
 
     mapOptions); 
 
     map.mapTypes.set('map_style', styledMap); 
 
     map.setMapTypeId('map_style'); 
 
     map.setOptions({ minZoom: 3, maxZoom: 15 }); 
 
    }; 
 
    var world_geometry = new google.maps.FusionTablesLayer({ 
 
     query: { 
 
      select: 'geometry', 
 
     from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk' 
 
    }, 
 
     map: styledMap, 
 
     suppressInfoWindows: true 
 
});

Answer 1

（代わりmapを使用する）ことがgoogle.maps.Mapオブジェクトでない、styledMapにfusionTablesLayerのmapプロパティを設定しません。

また、initMap機能内のFusionTablesLayerの初期化を維持する必要があります（いくつか理由があります）。

function initMap() { 
 
    var styledMap = new google.maps.StyledMapType(styles, { 
 
    name: "Styled Map" 
 
    }); 
 
    var mapOptions = { 
 
    zoom: 3, 
 
    center: { 
 
     lat: -34.397, 
 
     lng: 150.644 
 
    }, 
 
    mapTypeControlOptions: { 
 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
 
    } 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), 
 
    mapOptions); 
 
    map.mapTypes.set('map_style', styledMap); 
 
    map.setMapTypeId('map_style'); 
 
    map.setOptions({ 
 
    minZoom: 3, 
 
    maxZoom: 15 
 
    }); 
 
    var world_geometry = new google.maps.FusionTablesLayer({ 
 
    query: { 
 
     select: 'geometry', 
 
     from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk' 
 
    }, 
 
    map: map, 
 
    suppressInfoWindows: true 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap); 
 
var styles = [{ 
 
    "featureType": "administrative", 
 
    "elementType": "labels.text.fill", 
 
    "stylers": [{ 
 
    "color": "#444444" 
 
    }] 
 
}, { 
 
    "featureType": "landscape", 
 
    "elementType": "all", 
 
    "stylers": [{ 
 
    "color": "#FF00FF" 
 
    }] 
 
}, { 
 
    "featureType": "poi", 
 
    "elementType": "all", 
 
    "stylers": [{ 
 
    "visibility": "off" 
 
    }] 
 
}, { 
 
    "featureType": "road", 
 
    "elementType": "all", 
 
    "stylers": [{ 
 
    "saturation": -100 
 
    }, { 
 
    "lightness": 45 
 
    }] 
 
}, { 
 
    "featureType": "road.highway", 
 
    "elementType": "all", 
 
    "stylers": [{ 
 
    "visibility": "simplified" 
 
    }] 
 
}, { 
 
    "featureType": "road.arterial", 
 
    "elementType": "labels.icon", 
 
    "stylers": [{ 
 
    "visibility": "off" 
 
    }] 
 
}, { 
 
    "featureType": "transit", 
 
    "elementType": "all", 
 
    "stylers": [{ 
 
    "visibility": "off" 
 
    }] 
 
}, { 
 
    "featureType": "water", 
 
    "elementType": "all", 
 
    "stylers": [{ 
 
    "color": "#00FF00" 
 
    }, { 
 
    "visibility": "on" 
 
    }] 
 
}];

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>