Google Maps API を使用した埋め込みと display:none; 使用による表示のズレ

本日はGoogle Maps APIを使ってサイトに地図を埋め込み、display:none;の状態からblockにした際に起きる不具合に関して記載していきたいと思います。

Google Mapにて共有からiframeを使って埋め込む場合は特に問題は起きないのですが、Mapをカスタマイズする為に、Google Maps APIを使用して地図を埋め込むと表示/非表示の切り替えの際に、不具合が起きてしまうのです。

具体的には、ページ内で隠しておいた地図をタブを切り替えて表示させる場合や、「地図を表示する」などのボタンをクリックした際に、jQueryのtoggle系のEffectsを使用して、表示/非表示を切り換える際に起きる表示の不具合、座標のズレを修正するやり方に関してのお話です。

まずは実際に起きる不具合を見ていきます。

１．実際に起きる不具合に関してのデモ (パターン１)

地図ボタン

1つ目は領域内にGoogle Mapを読み込んでいますが、地図表示がきちんと表示されていない状態です。

２．実際に起きる不具合に関してのデモ (パターン２)

地図ボタン

２つ目は地図はきちんと表示されていますが、座標が右下にズレてしまっています。
地図をクリックし、右下にドラッグすると、左上の方から本来中心に表示させたかった、東京駅にささったピンが見えてくると思います。

３．不具合改善後のデモ

地図ボタン

これが本来、非表示から表示に切り替えた際になっていて欲しい状態です。

４．解決方法

表示/非表示を切り換える際の処理に下記記述を加えます。

google.maps.event.trigger(map,'resize');	//地図を再読込させる
map.setCenter(mapLatLng);	//真ん中にピンが来る様にする

例えばデモのようなクリックイベントであれば、

jQuery('.map_btn').on('click',function(){
	jQuery('#map').slideToggle();
	google.maps.event.trigger(map,'resize');	//地図を再読込させる
	map.setCenter(mapLatLng);	//真ん中にピンが来る様にする
});

と言った形で、表示ボタンをクリックした際に一緒に処理されるようにします。

ただ、上記をコピペしただけでは、解決出来ない場合があります。
javascriptやjQueryなどを普段、詳しくなくても使っている人であれば、なんとなくわかるかもしれませんが、上記コードには変数が入っており、その部分が自身が使っている埋め込み表示用のjsコードの変数と同じでないと、しっかりと働いてくれません。

具体的に変数の場所は、

google.maps.event.trigger(変数a,'resize');
変数a.setCenter(変数b);

となっており、「map」と「mapLatLng」が入っていたところになります。
ネット上に掲載されている埋め込み用のjsコードは大体、mapが入っていた部分はmapなので、そのままでも問題ないコトが多いのですが、mapLatLngの部分は掲載されているサイトによって違ったりするコトが多いので注意です。

理由はそれぞれあるのですが、とりあえず困ったら、埋め込み用のjsコードの下記部分を探します。

map = new google.maps.Map(document.getElementById('map_area'), {
	center: mapLatLng, 
	zoom: 15 
});

ここに入れるべき変数が書いてあります。
map = のところが xyz になっているなら変数aの部分をxyzに、center: mapLatLng,のところが latlng になっているなら変数bの部分をlatlngに変更してください。
これで解決すると思います。

ネットで調べた通りにやったけど、上手くいかないと言う方がいらっしゃいましたら、この変数の部分が問題の可能性が高いです。

今回のお話は、APIキーは取得してあり、

<script async defer src="https://maps.googleapis.com/maps/api/js?key=【APIキー】 &callback=initMap"></script>

などの設置はしっかりと出来ている前提で進めさせていただきました。
どなたかの役に立つコトがございましたら幸いです。