jQueryでphp includeとhide/showを使用しているときにGoogleマップが表示されない

Question

Googleマップといくつかのテキストボックスを含むhtmlページを作成しました。 私はまた、このページをphpのインクルード関数を使ってインクルードした別のページを作成しました。

<div id="map"> 
    <?php include 'myMap.html'; ?> 
</div> 

ページが読み込まれると、地図と他のアイテムが正しく読み込まれて表示されます。 今、マップが含まれている<div>の可視性を切り替えるボタンを作成しました。最初は、jQueryのhide（）関数を使用してマップを非表示にします。 ボタンをクリックすると、<div>が再度表示されるはずです。これを実現するために、私はjQueryでshow（）メソッドを呼び出しました。 ボタンをクリックすると、すべてがページに表示されますが、マップが表示されません。

この部分は別のhtmlページにあります。 含まれていると正しく表示されますが、非表示にするとボタンがクリックされて再び表示されると、マップは画像のようになります。別のアプローチを試みましたが、ボタンが呼び出された時点でマップをロードする関数を呼び出すと、役立つことがわかりました。別のhtmlファイルにあるその関数をインクルードされた関数に呼び出すことはできますか？

Answer 1

これは、あなたがdivを最初に隠していることが原因であると推測しています。したがって、高さがなく、divの表示を切り替えると、0pxの高さのマップコンテナを持つコンテナが表示されます。

initMap()などの機能にGoogleマップコードを配置してみることをおすすめします。 $('#your-div').show();を呼び出した後、initMap()と呼んでください。ように：

$(document).on('click', 'button#your-button', function() { 
    $('div#your-div').show(); 
    initMap(); 
}); 

私はあなたの問題を解決すると思います。そうでない場合は、問題をよりよく理解するためにコードを提供する必要があります。