Google Map Apiを使用したマップメモのサンプルです
今回作成したソースはpage5.html, sample5.js, style2.cssです.
・ソース修正しました.(インポート時のIDセット処理修正、マーカ削除時の動作を追加) 2019.03.10
・ソース再修正(現在地をセットボタン,マーカをリストの先頭にボタンを追加、参考サイト追加) 2019.03.23
・ソース再修正(スマホ表示時のセレクトボックスの表示を修正、参考サイト追加) 同2019.03.23
・ソース再修正(マーカ追加時のバグ修正) 同2019.03.23
・サンプルデータ追加(菊川駅周辺のカラオケ店の値段マップメモ) 2019.08.22
サンプルgithubURL:https://github.com/NanjoMiyako/GoogleAPIMapMemo
内容
- 参考サイト
- 参考素材
1.参考サイト
以下のサイトを参考に作成しました
Google Maps JavaScript API入門
JavaScriptの読み込みにおける非同期スクリプト注入の悪影響 | POSTD
JavaScriptで動的にscriptタグを差し込んだり、実行する方法 | つかびーの技術日記
スタイルシート[CSS]/ボックス/ボックスの大きさを指定する - TAG index
ボックスレイアウトの基本をマスターしてサクッとwebページを作れるようになろう - Qiita
JSON.stringify() - JavaScript | MDN
Selectオブジェクト (ドロップダウンメニューとリストボックス) | JavaScript プログラミング解説
jQuery で JSON ファイルを読み込む - Qiita
JavaScriptで位置情報を取得する方法(Geolocation API)
JavaScriptでスマホやタブレットを判別する方法
2.参考素材
以下のサイトの素材を利用しました
アイコンとマーカーのサンプル一覧表(影付き)/Google Maps API | WordPressにGoogle Maps API V3!