Настройка границ на картах Google разных размеров

Question

Я использую пользовательский ImageMapType в качестве плана. Я должен иметь возможность отображать одну и ту же карту в двух разных размерах холста для использования на отзывчивом веб-сайте.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я устанавливаю границы на основе большей версии (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); 

}); 
} 

Answer 1

Фигурные его.

Я понял, что использование Центра вызывает мои проблемы, поэтому я изменил его, чтобы использовать map.getBounds(), чтобы установить границы с помощью NE и SW углов окна просмотра, а затем сравнить NE и SW углы и проверить на посмотрите, находятся ли они в моих границах карты.

google.maps.event.addListener(map, 'center_changed', function (event) { 
    if (allowedBounds.contains(map.getBounds().getSouthWest()) && 
      allowedBounds.contains(map.getBounds().getNorthEast())) { 
     lastValidCenter = map.getCenter(); 
     return; 
    } 
     map.panTo(lastValidCenter); 

}); 

http://jsfiddle.net/khendar/CvCMq/5/