飲み会作成時に入力された住所からGoogleマップを表示させる

[hiroaki-com]

概要

• 飲み会作成時に入力された住所からGoogleマップを表示させる
• 技術選定は時間的制約を考えて、簡単かつ早く実装できるものにする
  • Google Map API がスタンダードの模様
  • 学習にコストがかかる
  • 一定の利用料金を超過すると、課金が発生する可能性あり
  • JSでシンプルに実装する以下の記事も参考になりそう
  • https://learning.mihune-web.com/googlemap/
  • pythonでスクレイピングしてくるのも一つの手

参考

https://learning.mihune-web.com/googlemap/

https://stackoverflow.com/questions/72679450/django-how-to-show-a-pointfield-in-a-map-from-a-html-template

- https://qiita.com/hiroki1994/items/01984d7f893e4261fc08

[hiroaki-com]

<iframe
  src="https://maps.google.co.jp/maps?output=embed&q="検索ワード"
  width="800"
  height="450"
  style="border: 0"
  allowfullscreen=""
  loading="lazy"
>
</iframe>

イメージ：

• DBに登録されている 住所 or 店舗名 をテンプレートに取得
• 住所 or 店舗名 の変数を iframe 内のGoogleMapの特定の場所に埋め込むようにJavascriptで実装？

参考サイト： https://chuna.tech/blog/web-application/Vue/reactive-googlemap-no-apikey/

ブラウザ環境： https://codepen.io/pen/

[hiroaki-com]

https://yuukiyg.hatenablog.jp/entry/2020/12/31/122916

[hiroaki-com]

https://qiita.com/sikkim/items/365cb1211a3b8ca7b410#訪問予定リストと地図の連動

現実案 保存済み住所データを使用 作成画面で住所保存→データベース→ビュー→Google map APIで地図取得→詳細テンプレート表示

理想 作成画面で店舗URL保存→保存されたURLからAPIで住所情報取得→住所から地図取得→表示

※htmlからのスクレイピングは禁止

[hiroaki-com]

https://paiza.jp/works/django/primer/beginner-django4/8811

• GoogleにてAPIキー取得
• iframe埋め込み（住所情報をテンプレート機能で埋め込み）