カスタム ImageMapType をフロアプランとして使用しています。レスポンシブ Web サイトで使用するために、同じマップを 2 つの異なるキャンバス サイズで表示できる必要があります。
私が抱えている問題は、マップの大きいバージョン (800x450) に基づいて境界を設定すると、小さいバージョン (560x360) ではこれらの境界が正しくないことです。マップの端は、これらの境界を使用して小さいマップで使用して切り取られます。明らかに、エッジが正しくなるように、小さなマップに別の (より大きな) 境界を使用する必要があります。
キャンバスのサイズに基づいて、境界を大きなマップから小さなマップに変換する方法はありますか?
問題のデモンストレーションについては、以下の Fiddle リンクを参照してください。
http://jsfiddle.net/khendar/CvCMq/1/
var marker;
var typeOptions = {
getTileUrl: function (coord, zoom) {
return 'http://fc02.deviantart.net/fs4/i/2004/267/a/4/The_Middle_Earth_Map_by__electra_.jpg';
},
tileSize: new google.maps.Size(1192, 930),
maxZoom: 5,
minZoom: 5
};
var mapType = new google.maps.ImageMapType(typeOptions);
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-15.076764665951556, 47.2412109375),
new google.maps.LatLng(6.790762250562566, 64.2041015625));
function initialize(canvas) {
var myLatlng = new google.maps.LatLng(-15.076764665951556, 47.2412109375);
var mapOptions = {
center: myLatlng,
zoom: 5,
streetViewControl: false,
disableDefaultUI: true,
mapTypeControlOptions: {
mapTypeIds: ['stores']
}
};
var map = new google.maps.Map(document.getElementById(canvas), mapOptions);
map.mapTypes.set('stores', mapType);
map.setMapTypeId('stores');
lastValidCenter = new google.maps.LatLng(-15.076764665951556, 47.2412109375);
google.maps.event.addListener(map, 'center_changed', function (event) {
document.getElementById('center').value = map.getCenter();
if (allowedBounds.contains(map.getCenter())) {
lastValidCenter = map.getCenter();
return;
}
map.panTo(lastValidCenter);
});
}