これは、このサイトや他の場所で報告されている一般的な問題であることを知っています。
しかし、私は自分の問題を解決できません。
だから私はモバイルを最初に構築したレスポンシブサイトを持っていて、アダプティブマップソリューションを機能させようとしています。つまり、モバイルビューポートは静的なGoogleマップ画像を取得し、非モバイルビューポートの場合は完全なGoogleマップAPIを取得します。これはすべてそれ自体を更新する必要がありますページの読み込み時だけでなく、ビューポートのサイズが変更されたとき。これに基づく: http://codepen.io/bradfrost/pen/tLxAs。
このライブラリを使用しています。
$.getScriptjQueryおよびライブラリsetup()とdefer()関数を介して、必要な場合 (非モバイル ビューポート) にのみ Maps API を条件付きでロードしています。
jQuery を使用している各ビューポートで適切なマップ レンダリングのみが存在するhide()ようshow()にします。このため、API マップはそれ自体を完全にはロードしません (1 タイルのみ)。ページがモバイル以外のビューポートでロードされた場合でも、正常にロードされます。それは、モバイル ビューポートのサイズを非モバイル ビューポート サイズに戻すときです。これは、show()メソッドが作動するときです。それ以外はすべて正常に動作します。
これが私のコードです：
HTML
<div class="map">
<div class="map__static">
<img src="http://maps.google.com/maps/api/staticmap?center=-33.867487,151.20699&zoom=15&markers=-33.867487,151.20699&size=650x405&sensor=false">
</div>
</div>
サイトはモバイル ファーストで構築されているため、静的なマップ イメージがデフォルトで読み込まれます。
JS
var mapContainer = $('.map'),
mapStaticContainer = $('.map__static');
mapDynamicContainer = $('<div class="map__dynamic"/>');
// Start Enquire library
enquire.register('screen and (min-width: 40em)', {
deferSetup: true,
setup: function setup() {
mapContainer.prepend(mapDynamicContainer);
mapDynamicContainer.load('/includes/scripts/adaptive-google-map.php', function() {
$.getScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyAywjPmf5WvWh_cIn35NwtIk-gYuwu1I2Q&sensor=false&callback=initialize');
});
},
// Not mobile size viewport
match: function() {
mapStaticContainer.hide();
mapDynamicContainer.show();
},
// Mobile size viewport
unmatch: function() {
mapStaticContainer.show();
mapDynamicContainer.hide();
}
}, true).listen();
これは、 「 /includes/scripts/adaptive-google-map.php 」load()の内容で、jQuery 経由で AJAX 化されています。
<div id="map_canvas"></div>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-33.867487,151.20699);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP
});
var contentString =
'<div class="infowindow">'+
'<div>'+
'<p class="flush"><strong>SALES OFFICE:</strong><br>1/16 M. 5<br>Sydney<br>NSW, 83110.</p>'
'</div>'+
'</div>'
;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
// Center Google Maps (V3) on browser resize (http://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive)
var center;
function calculateCenter() {
center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
</script>
これで問題が解決します。
mapDynamicContainer.show(function () {
setTimeout(function() {
initialize();
}, 100);
})
しかし、JS エラーがスローされます: Uncaught ReferenceError: initialize is not defined. ppl によって提案された別の一般的な修正。this: を適用していますgoogle.maps.event.trigger(map, 'resize');が、 after:mapDynamicContainer.show();をmatch()関数に入れると、この JS エラーが発生します: Uncaught ReferenceError: google is not defined。
あまり運がない:(