-2
GoogleマップのFusionTablesLayerとポリゴンを使用してアメリカの州を設定しています。ポリゴンの領域に応じて、画面にフィットするようにGoogleマップのズームを設定する方法
a）マップが画面に収まるようにズームプロパティを設定します。私はマップが10進数のズーム値を受け入れていないことを知っています。これを行う他の方法はありますか？
b）状態領域に応じてラベル（つまり状態名）を配置します。たとえば。カリフォルニア州のラベルはポリゴンの上に置くべきですが、ニュージャージー州のラベルはポリゴンの領域の下に置いてください。
予想される出力：
現状：
マイコード：
var map;
var clientId = '{CLIENT_ID}';
var apiKey = '{API_KEY}';
var scopes = 'https://www.googleapis.com/auth/fusiontables';
var zoom = 4;
var labels = [];
var USAStates = '';
var infobox = {};
jQuery.get("http://recruiters.wpsitesbuilder.com/wp-json/myplugin/v1/firms_data", function(data) {
USAStates = jQuery.parseJSON(data);
}).done(function(data) {
function initMap() {
var latlng = new google.maps.LatLng(37.09024, -95.712891);
var myOptions = {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
disableDoubleClickZoom: false,
draggable: true,
keyboardShortcuts: true,
panControl:true,
zoomControl:false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl:false,
scaleControl:false,
scrollwheel: false,
streetViewControl:false,
overviewMapControl:true,
rotateControl:false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var styles=[{featureType:"administrative",elementType:"all",stylers:[{hue:"#000000"},{lightness:-100},{visibility:"off"}]},{featureType:"landscape",elementType:"all",stylers:[{color:"#2c8ecd"},{visibility:"on"}]},{featureType:"landscape",elementType:"geometry",stylers:[{saturation:-100},{lightness:-3},{visibility:"on"},{color:"#2c8ecd"}]},{featureType:"landscape",elementType:"labels",stylers:[{hue:"#000000"},{saturation:-100},{lightness:-100},{visibility:"off"}]},{featureType:"poi",elementType:"all",stylers:[{hue:"#ff0000"},{saturation:-100},{lightness:-100},{visibility:"off"}]},{featureType:"road",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"road",elementType:"geometry",stylers:[{hue:"#ff0000"},{saturation:-100},{lightness:26},{visibility:"off"}]},{featureType:"road",elementType:"labels",stylers:[{hue:"#ffffff"},{saturation:-100},{lightness:100},{visibility:"off"}]},{featureType:"road.highway",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"road.highway.controlled_access",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"road.local",elementType:"all",stylers:[{hue:"#ffffff"},{saturation:-100},{lightness:100},{visibility:"on"}]},{featureType:"transit",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"transit",elementType:"geometry",stylers:[{visibility:"off"}]},{featureType:"transit",elementType:"labels",stylers:[{hue:"#ff0000"},{lightness:-100},{visibility:"off"}]},{featureType:"water",elementType:"geometry",stylers:[{saturation:-100},{lightness:100},{visibility:"on"},{color:"#2c8ecd"}]},{featureType:"water",elementType:"labels",stylers:[{hue:"#000000"},{saturation:-100},{lightness:-100},{visibility:"off"}]}];
var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
var map = new google.maps.Map(document.getElementById("map"), myOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var tableId = '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw';
var USAStateslayer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: tableId
},
options: {
suppressInfoWindows: true
},
styles: [{
polygonOptions: {
fillColor: '#ffffff',
fillOpacity: 1,
strokeColor: '#2c8ecd'
}
}],
clickable: true
});
filterMap(USAStateslayer, tableId, map, USAStates);
USAStateslayer.setMap(map);
map.setCenter(latlng);
jQuery.each(USAStates, function(key, value){
var content = '<div class="infobox-content-container"><span class="state-name">'+value.state+'</span></div>';
if(value.firms !== undefined) {
content = '<div class="infobox-content-container"><span class="total-firms">'+value.firms+'</span><br /> Firms <br /> <span class="state-name">'+value.state+'</span></div>';
}
infobox = new InfoBox({
content: content,
boxStyle: {
border: "none",
textAlign: "center",
backgroundColor:"none",
fontSize: "8pt",
width: "50px",
color: '#000000',
'margin-top': "-25px"
},
disableAutoPan: true,
pane: "floatPane",
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(value.latitude,value.longitude),
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true
});
labels.push(infobox);
labels[labels.length-1].open(map);
});
}
// Filter the map based on checkbox selection.
function filterMap(layer, tableId, map, USAStates) {
layer.setOptions({styles:generateStyle(USAStates, map)});
}
// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateStyle(USAStates, map) {
//default-style,gray
var style=[{
polygonOptions: {
fillColor: '#ffffff',
strokeWeight: 1,
fillOpacity: 1,
strokeColor: '#2c8ecd'
}
}];
var styles={
//open stores
open:{polygonOptions: {
fillColor: "#be2026"
}},
//closed stores
closed:{polygonOptions: {
fillColor: "#fff"
}}
};
var selected={open:[],closed:[]};
var stores = [];
if(jQuery('#find-firms-container .selected-firms-list>span').length > 0) {
jQuery('#find-firms-container .selected-firms-list>span').each(function(){
var stateName = jQuery(this).text();
stores.push(stateName);
});
}
//populate the selected-object with the names of the stores
jQuery.each(stores,function(i,o){
var storeName = o.replace(/'/g, '\\\'');
selected['open'].push(storeName);
});
//add a style for non-empty properties of the selected-object
jQuery.each(selected,function(i,o){
if(o.length){
style.push(jQuery.extend(styles[i],{where:"'name' IN ('" + o.join("','") + "')"}));
}
});
var i = 0;
jQuery.each(USAStates, function(key, value){
var color = '#000000';
if(jQuery.inArray(value.state, selected.open) !== -1) {
color = '#ffffff';
}
if(labels[i] !== undefined) {
labels[i].boxStyle_.color= color;
labels[i].open(map);
}
i++;
});
return style;
}
initMap();
});
メタタグを追加しようとしましたが、動作しませんでした。 –