私はGoogleマップをレスポンシブにしようとしていますが、サイズを変更したり解像度を変えたりすると、常に同じズームレベルで特定のエリアに焦点を当てています。
私は現在これを行います:
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.5472,12.282715),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
これは問題ありませんが、ウィンドウのサイズを変更するときは、常に Med に焦点を合わせるためにズーム レベルを変更する必要があります。
このズームの問題を解決するために、私はハックを行っていますが、これは良くないと思います:
if($(window).width() > 1600) {
map.setZoom(6);
}
if($(window).width() < 1024) {
map.setZoom(5);
}
if($(window).width() < 800) {
map.setZoom(4);
}
LatLngBounds を作成して map.fitBounds() を呼び出して、常に表示したい領域を構築する方法について読みましたが、わかりません。あなたからのjsfiddleは非常に役に立ちます。
これが私の jsfiddle です: http://jsfiddle.net/tVKMn/7/