ウェブページに地図を表示して、地図から座標を取得しようとしています。うまく機能し、マーカーをドラッグアンドドロップして、入力ボックスの座標を取得できます。
しかし、私の問題は、Webページを読み込むときに発生します。すべてがうまく表示されていますが、マップでは、ここでマップの表示方法を確認できます。
しかし、この瞬間にウェブページのサイズを変更すると、フルスクリーンの場合は半分になります。または、画面の一部である場合は、少し大きくまたは小さくします。次に、正しいマップが表示されます。
(それは同じ場所ではありません、私は知っています。2回のリロードから画像を撮りました)
WebページをHTMLで作成しますが、個別のWebページであるかのように呼び出します。インデックスをロードすると、このボタンが表示されます
href:<a href="#openMap">
そして、示される部分は次のようになります。
<div data-role="page" id="openMap" data-theme="e">
<div data-role="header" data-id="fixedNav" data-position="fixed">
blablabla
<div data-role="content">
<form action="">
<div id="map_canvas" style="width:500px; height:300px"></div>
blablabla
そして、すべてのdiv、フォーム...は適切に閉じられました。ここには入れていない入力ボックスとフィールドがたくさんあります。
次に、私のGoogleマップスクリプトでこれを持っています:
var map;
function initializeNewMap() {
var myLatlng = new google.maps.LatLng(43.462119485,-3.809954692009);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
draggable: true,
position: myLatlng,
map: map,
title: "Your location"
});
}
しかし、なぜサイズを変更する必要があるのかわかりません。それを解決する方法ですか?
編集:さらに情報を追加します:
このようにマップがあるWebページの一部を次のように呼び出します。
$(document).on("pageinit", '#openMap', function() {
入れてみた
google.maps.event.trigger(map, 'resize');
その直後に何も起こりません。
私は他の質問で解決策を見つけました( Google Maps v3は左上隅に部分的にロードされ、サイズ変更イベントは機能しません 、Ian Devlinの投稿):
あるユーザーがここで言ったように、マップのサイズを変更する必要があります。しかし、その行だけでは機能しませんでした。初期化関数の最後にこのコードを追加しました。
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
したがって、マップが表示された後に呼び出されます。
私もこの問題に直面しました。Googleマップresize
イベントをトリガーすることで解決しました。
google.maps.event.trigger(map, 'resize');
更新:
var map;
function initializeNewMap() {
// add your code
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.trigger(map, 'resize');
}
ご理解ください。
同様の問題がありましたが、マップがまったく表示されませんでした(ボックス全体が灰色でした)。
私にとってそれを解決したのは、マップを含むdivが非表示として開始されていることを認識していたことです
display:none;
代わりに使用する場合
visibility:hidden;
Divはサイズを保持しますが、非表示として表示されるため、初期化時にマップは値0ではなく正しい高さと幅を使用します
お役に立てれば!
コンテナ(マップを配置する場所)が表示された後、マップを初期化する必要があります。
同様に、多くのタブがあり、最後のタブにマップが含まれているため、この問題を次の方法で修正しました。
$('#map-tab').click(function() {
// init map
});
ここでは、最初にコンテナが可視性を取得することを確認し(その要素をクリックすると、マップを含むセクションが表示されます)、マップを初期化します
これはうまくいきました。
JavaScriptベースのレイアウトヘルパー( Foundation Equalizer など)を使用する場合、マップをロードする前に、マップコンテナーのサイズが確定していることを確認して、悪名高いグレーマップと特定のcenter
などの属性は期待どおりに機能します。または、サードパーティプラグインのイベントを使用して、マップをfixesするカスタムコールバックをトリガーします。例えば。:
var map = new google.maps.Map(/*...*/);
$(document).on("after-height-change.fndtn.equalizer", function(){
google.maps.event.trigger(map, 'resize');
});
私のマップは Twitter Bootstrap tab で非表示になっていたため、マップの初期化時に表示されなかったため、タブを選択したときにresizeを呼び出す必要がありました:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
google.maps.event.trigger(map, 'resize');
})