Google Maps APIを使って記事内容の解説地図を作ったのでメモ
１．概要
google mapに下記要素を書き込んで埋め込む
・マーカー
・ポリゴン
・イメージファイルによるオーバーレイ
各要素はチェックボックスで表示非表示を切り替えられるようにする
２．準備
１）APIキーの取得
google ID,クレジットカードを準備して登録設定しAPIキーを取得する
・詳細はネットで調べると幾つか出てくる
・登録画面のデザインとか変わっていたりする
・必要以上に課金されないよう設定は万全に
【参考ページ】
Google Maps API の使い方・利用方法
www.webdesignleaves.com
２）マップのデザイン
・ベースとなるマップの縮尺、表示オプションを決める
オプションはたくさんあるので作りながら決めても良い
・配置する要素をデザインしておく
マーカー（イメージファイル）、オーバーレイ用イメージファイルを準備しておく
・マップ中央及び各要素を配置する緯度経度を取得しておく
【google mapで緯度経度を取得する】
・目的地にマウスカーソルを置く
・Option + Click
・ポップアップした緯度経度数値をクリック
・検索テキストボックスに緯度経度が入っているのでコピーする
３．構成
<!-- チェックボックス --> <form class="map_sisen_form1" name="map_sisen_form1">オーバーレイ選択 <input type="checkbox" id="map_sisen_ch0" onclick="myfunc0();" checked>九州 … </form> <!-- 地図を表示する div 要素（id="map_sisen"）--> <div id="map_sisen" style="height: 480px; width: 640px; "></div> <!-- 地図とコールバック関数 --> <script> // 定数設定 … // 変数定義 … // // function // marker … // overlay … // polygon … // // google maps call back function function initMap() { … // make map … } // // check box call back … </script> <!-- APIとコールバック関数定義 --> <script src="https://maps.googleapis.com/maps/api/js?key=APIキー&callback=initMap" async defer></script>
続く
