マップは表示される。
pcで見ても問題ない。

iphone実機のsafariで見ると、スワイプしてもマップが動かないし、
ピンチイン/ピンチアウトでのマップの拡大縮小もできない。

どうやらタッチイベントそのものが動かないっぽい。

原因は、apiの呼び出し部分にあるようで。

apiを呼び出すこの部分

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

sined_inというパラメータがある。

google mapにログインした状態でユーザーが見られるようにするものだと思う。

これがtrueになってると、iOS10ではアイコン部分がうえにかぶさっちゃうのか、マップ部分のタッチイベントが効かなくなってしまう。

なので、この機能をfalseにする↓

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

そしたらiphoneのsafariで動くようになった。


なんだろ。