ウェブサイト実験
Web勉強中おじさん
JSON形式の外部ファイルを読み込んでGoogleマップに複数マーカーをプロットしてみる
【実験1】緯度経度情報を記載したJSON形式の外部ファイルを読み込んでGoogleマップ上に複数のマーカーを表示させてみる
やったこと
- Google Map APIのAPIキーを取得
- Googleのチュートリアルで勉強
- Googleマップの表示・マーカー表示機能実現（静的ページ）
- 外部ファイルの読み込み方法について調べる
- JSON形式の外部ファイル読み込み用のJavaScriptを作る
- マップ表示・マーカー表示用JavaScriptに統合する
- 機能実装がうまくいったか確認する（静的ページ）
- WordPress上でってリクエストだったので、WordPressサイト立ち上げ（本サイト）
- 機能を実装したいサイトと似た環境を用意（プラグインとか）
- WordPress上で動作させるときと静的ページ上で動作させるときの違いについて調査
- ページ読み込み時にjs動作させるため、bodyタグのonload属性での実行から、jsのwindow.loadプロパティでの実行に変更
- jsファイルのアップロード
- functions.phpカスタマイズ（独自jsファイルの導入）
結果
GoogleMapに外部JSONファイルから読み込んだ地点のマーカー表示実験
学んだこと・思ったこと
- テーマによって出力結果は大きく変わる
- JSONファイル内の緯度経度情報は小数点以下6桁までにしないとダメ
- GoogleMapAPI v2からv3になって便利な関数がなくなった
- GoogleMapAPI v3で機能実装するためにはもっと勉強が必要
- WordPressのカスタマイズ方法とか暗黙の了解とか勉強が必要
The following two tabs change content below.
最近のコメント