#1【Google Maps API v3】指定座標をマップ上に表示させる

こんにちは!@Higemuraです!

前回はGoogle Maps APIのセットアップをした為、早速APIを使用して現在地座標を取得してマップ上に表示させたいと思います。

前回の記事はこちら↓
#0【セットアップ】Google Maps API v3 を使ってマップ開発しよう!

Google Mapを表示

HTML

body内にwrapperクラスを作成し <div id=”js-map” class=”map”> というタグを作成しました。

以後マップ取得に関しては id=”js-map” に対してJSを宣言していきます。

そして、body閉じタグ直下に Google Maps API 取得スクリプト を設置し、その下に 実際にコーディングしていくJS を読み込ませます。

 

CSS(Sass)

特に装飾はいりません。

html, bodyを初期化し .map を画面全体に表示できるように設定してあります。

 

JavaScript

HTMLとCSSが記述できたらJavaScriptを以下のように記述。

すると東京駅が中心としてGoogle Mapが表示できると思います。

解説

2行目
変数 map を空で宣言します。

5〜12行目
変数 mapOptions に対してマップに表示する座標(緯度 lat、経度 lng)拡大率(zoom)を指定する。
(ここでは東京駅の座標と拡大率14を指定しています)

14〜17行目
変数 map に new google.maps.Map() を代入し、HTML上で表示する為の id=”js-map”第一引数に指定。
第二引数に 変数 mapOptions を格納する。

こうすることで HTML内の id=”js-map” の中にGoogle Mapを表示できるようになりました。

See the Pen #1 Google Map by Higemura (@Higemura) on CodePen.0


指定座標に現在地用のマーカー画像を表示する

Google Mapが表示できたら、上記で設定した座標にアイコン画像を表示させます。

JavaScriptを以下のハイライトのように追加します↓

解説

3行目
変数 myLocation
を空で宣言します。

20行〜29行目
myLocation
に対して map(表示先)position(座標)icon(アイコン画像やサイズ)title(マーカー文言)を設定することで、指定した座標にマーカーピンを表示することができます。

画像はPNGやJPGなどを使用できますが、綺麗に表示させる為SVG形式の画像を読み込んでいます。

See the Pen #1-2 Google Map by Higemura (@Higemura) on CodePen.0

このように地図上に現在地用のマーカー画像を表示することができました!

しかし、現状だと表示している座標が手動で入力した座標(東京駅)になってしまいます。

これじゃ現在地とは言えません、、笑

現在地を取得するにはまず ユーザーの位置情報を取得する 必要があります。

よくWebサイトやアプリなどで「位置情報を許可しますか?」みたいなポップアップがありますよね?

それを許可することで初めて位置情報を取得することができますので、

次回は、位置情報を取得し現在地を動的に表示させていきたいと思います!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です