Google MapへのURLを生成(iframe・直リンク)

少し前にGoogle Maps Platformを使ったGoogle Maps APIの記事を書いたが、しばらくしてアカウントの無料期間が終わってからアカウント更新してなくてマップがうまく動かなくなってました?

Google Maps APIを使ってみる

一括して住所から座標を取得[Google Maps API]

地図クリックでlatLngと住所を取得(Google Maps & Geocoding)

（設定しなおしたから今は動いてるはず?）

?Googleアカウントに依存しない方法

よく考えたらマップ位置へのURLを生成してリンクする形にすればGoogleアカウントの状況に左右されずに特定のマップ位置を表示できるよね。

Google Mapへのリンクについては、直リンクする場合とiframe内で使う場合でパラメータが違うみたいです。

まず、iframe内のURLオプションとかはこちらのサイトを参考にさせて頂きました?

Google Mapをiframeで利用する際のオプションとレスポンシブ対応させるためのHTMLとCSSを紹介（住所指定で表示もできるよ！）

?iframe内では、output=embedを使う。

?世の中そーうまくはいかないのね

てことは、そのままiframeのsrc更新してページ内でマップ動かしちゃえーって思ったんだけども、そううまくはいかないのねぇ?

iframeの更新は、こんなコードでできるよってググるとでてくるんだけども

document.getElementById('iframe_id').contentDocument.location.replace(url);

やってみるとめっちゃエラー出る。

"TypeError: Cannot read property 'location' of null"

ページロードのタイミングで即実行だと、このコードで通るんだけどねぇ

（ページロード時に位置情報取得して、このコード実行で現在位置のマップは出せた。）

なんでか、読み込み終わったあとで任意にこれやるとエラーになってしまう。。。

ページ内のイベントでグリグリマップ動かしたい時は、ちゃんとAPI key使ってやれってことかな

ちなみに、iframe要素自体を作り直そうとしてみたけど、それもなんだかエラーになってしまったよ。

?ちなみに、iframe用のURLで直リンクすると？

上の例で生成したURLを直にブラウズするとエラーになります。

The Google Maps Embed API must be used in an iframe.

こんなメッセージだけが表示される。。。

?直リンクの時は、Serchパラメータを使う。

直URLの時は、Serchとかってパラメータ使うみたいね。

参考：GoogleMapへのリンクURL作成方法を調べた

抜粋

https://www.google.com/maps/search/?api=1&parameters

パラメータは、queryが必須、オプションでquery_place_idを指定できます。

queryとquery_place_idの両方が指定された場合、query_place_idが示す場所が見つからない場合のみ、queryで指定した検索が行われます。

次に緯度経度(緯度・・・latitude, 経度・・・longitude)です。

東京駅周りの書店、なんて指定もできます。キーワードを+で区切ります。

この辺は、普通にグーグルマップ表示してURLシェアする時のURLと同じだから無駄にゴリゴリ考えなくてもいいかな？?

てか、前にGeocodingのこと調べたときにAPI使って住所⇒座標とか調べてたけど、直リンクだと住所でもフリーワードでも直接グーグル検索に飛ばせれるんだねぇ?