Google Maps API

GoogleMapsAPIで地図を表示する方法です。 表示したい場所の経度緯度を準備 GoogleMapsAPIのためのJavascriptを読込 地図を表示するJavascript設定 表示したい場所の経度緯度を準備 Googleの地図検索で、地図に表示したい地点の軽度と緯度を取得します。 たとえば富士山の場合、地図検索結果はこのように表示されます（2015年10月現在） 緯度と経度は、この検索結果のアドレス内に含まれています。 ＠の後ろに緯度,経度の書式でありますので、これをコピーして使います。 https://www.google.co.jp/maps/place/〒418-0112+静岡県富士宮市北山+富士山/@35.3605555,138.7277777,17z/data=!3m1!4b1!4m2!3m1!1s0x60196290556df7cf:0x8d5003885b877511 富士山の緯度 ... 35.3605555 富士山の経度 ... 138.7277777 地図をクリックして緯度経度を取得 地図内の特定ポイントの緯度経度を取得することもできます。 ルート表示で、経由ポイントを指定したいとき便利です。 右クリックメニューからメニュー表示 「この場所について」で画面下部へ詳細表示 画面下の表示へ記載されている GoogleMapsAPIのためのJavascriptを読込 地図を設置したいhtmlで、GoogleMapsAPIのためのJavascriptを読込みます。 地図を表示するJavascript設定 先ほど読み込んだGoogleMapsAPIのためのJavascriptよりも後でスクリプトを記述します。 読込順さえ前後しなければ、もちろん外部スクリプト化して大丈夫です。 onliadイベントでページ読み込み後にスクリプトを実行する準備 取得していた緯度経度をGoogleMapsの書式に当てはめる GoogleMapsAPIの書式は8～13行目の部分です。 3～6行目で緯度経度を変数化して、GoogleMapsAPIの書式に埋め込んでいます。 その他の外枠は、jQueryなしのDOM読み込み後実行処理で紹介した書式で ページ読み込み後に実行の処理を設定してあります。 参考： Google Maps Javascript API | Google Developers 注意事項 オーバーレイや折りたたみメニューなど、ページが読み込まれた段階で地図を表示するDOM要素が不可視状態になっている場合 DOMを可視化した後で地図をレンダリングしないと、地図の位置がずれます。

webdev

「Google Maps API」の記事一覧

GoogleMapsAPIでルート検索のよう道筋を表示

GoogleMapsAPIでピンを表示

GoogleMapsAPIで地図を表示