風景/水にカスタム カラーを使用して Google ヒート マップを作成しようとしています。「カスタムカラー」または「ヒートマップ」のみを使用すると機能しますが、両方を一緒に使用すると機能しません。これで、map-div に大きなベージュの画面しか表示されなくなりました。
このコードに問題がある人はいますか?
var map, pointarray, heatmap;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);
var heat_map = 'custom_style';
var taxiData = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),
new google.maps.LatLng(37.782919, -122.442815),
new google.maps.LatLng(37.782992, -122.442112),
new google.maps.LatLng(37.783100, -122.441461),
new google.maps.LatLng(37.783206, -122.440829),
new google.maps.LatLng(37.783273, -122.440324),
new google.maps.LatLng(37.783316, -122.440023),
new google.maps.LatLng(37.783357, -122.439794),
new google.maps.LatLng(37.783371, -122.439687),
new google.maps.LatLng(37.783368, -122.439666),
new google.maps.LatLng(37.783383, -122.439594),
new google.maps.LatLng(37.783508, -122.439525),
new google.maps.LatLng(37.783842, -122.439591),
new google.maps.LatLng(37.784147, -122.439668),
new google.maps.LatLng(37.784206, -122.439686),
new google.maps.LatLng(37.784386, -122.439790),
new google.maps.LatLng(37.751266, -122.403355)
];
function initialize() {
var featureOpts = [
{
"featureType": "administrative.country",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.province",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.locality",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.neighborhood",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "administrative.land_parcel",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.land_parcel",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape.man_made",
"stylers": [
{ "visibility": "on" },
{ "lightness": 43 },
{ "color": "#000000" }
]
},{
"featureType": "landscape.natural.terrain",
"stylers": [
{ "color": "#808080" }
]
},{
"featureType": "landscape.natural.landcover",
"stylers": [
{ "color": "#808080" }
]
},{
"featureType": "landscape.natural.terrain",
"elementType": "geometry.fill",
"stylers": [
{ "lightness": 100 },
{ "color": "#ffffff" }
]
},{
"featureType": "poi.attraction",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi.government",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi.medical",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi.park",
"stylers": [
{ "visibility": "on" },
{ "color": "#f0f0f0" }
]
},{
"featureType": "poi.place_of_worship",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi.school",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi.sports_complex",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road.highway",
"stylers": [
{ "color": "#000000" }
]
},{
"featureType": "road.arterial",
"stylers": [
{ "color": "#808080" }
]
},{
"featureType": "road.local",
"stylers": [
{ "color": "#b4b4b4" }
]
},{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{ "color": "#d5d5d5" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "simplified" }
]
},{
"featureType": "transit.station",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#222222" }
]
},{
"featureType": "poi.business",
"stylers": [
{ "visibility": "off" }
]
},{
},{
"featureType": "landscape.natural.landcover" },{
"featureType": "landscape.natural",
"stylers": [
{ "visibility": "on" },
{ "color": "#ffffff" }
]
},{
},{
}
]
var mapOptions = {
zoom: 2,
center: brooklyn,
scrollwheel:true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, heat_map]
},
mapTypeId: heat_map
};
map = new google.maps.Map(document.getElementById('heat_map'),
mapOptions);
var marker = new google.maps.Marker({
position: brooklyn,
animation: google.maps.Animation.DROP,
title:"Hello World!"
});
marker.setMap(map);
var styledMapOptions = {
name: 'Heat Map'
};
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions).MVCArray(taxiData).HeatmapLayer({
data: pointArray
});
;
map.mapTypes.set(heat_map, customMapType);
}
google.maps.event.addDomListener(window, 'load', initialize);