こんにちは！[@Higemura]です！
前回はGoogle Maps APIのセットアップをした為、早速APIを使用して現在地座標を取得してマップ上に表示させたいと思います。
前回の記事はこちら↓
0【セットアップ】Google Maps API v3 を使ってマップ開発しよう！
Google Mapを表示
HTML
body内にwrapperクラスを作成し
以後マップ取得に関しては id="js-map" に対してJSを宣言していきます。
そして、body閉じタグ直下に Google Maps API 取得スクリプト を設置し、その下に 実際にコーディングしていくJS を読み込ませます。
<body>
<div class="wrapper">
<div id="js-map" class="map"></div> // ←ここがマップ領域
</div>
// Google Maps API 取得
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
// 実際にコーディングしていくJS
<script src="./js/map.js"></script>
</body>
CSS（Sass）
特に装飾はいりません。
html, bodyを初期化し .map を画面全体に表示できるように設定してあります。
/* 初期化用 */
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
/* マップ用のCSS */
.map {
position: relative;
width: 100%;
height: 100%;
min-height: 400px;
overflow: hidden;
}
JavaScript
HTMLとCSSが記述できたらJavaScriptを以下のように記述。
すると東京駅が中心としてGoogle Mapが表示できると思います。
// マップオブジェクトの変数を空で宣言
let map;
// マップオプションを変数に格納
let mapOptions = {
// 座標と拡大率を指定
zoom: 14,
center: {
lat: 35.6811673, // 緯度
lng: 139.7648629 // 経度
}
};
// マップオブジェクト作成
map = new google.maps.Map(
document.getElementById('js-map'),
mapOptions
);
解説
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を表示できるようになりました。
[codepen_embed height="400" theme_id="0" slug_hash="KGYaXK" default_tab="js,result" user="Higemura"]See the Pen #1 Google Map by Higemura (@Higemura) on CodePen.[/codepen_embed]
指定座標に現在地用のマーカー画像を表示する
Google Mapが表示できたら、上記で設定した座標にアイコン画像を表示させます。
JavaScriptを以下のハイライトのように追加します↓
// マップオブジェクトの変数を空で宣言
let map;
let myLocation;
// マップオプションを変数に格納
let mapOptions = {
zoom: 14, // 拡大率
center: { // 中心座標を指定
lat: 35.6811673, // 緯度
lng: 139.7648629 // 経度
}
};
// マップオブジェクト作成
map = new google.maps.Map(
document.getElementById('js-map'),
mapOptions
);
// マップにマーカーを表示する
myLocation = new google.maps.Marker({
map: map, // mapに対して指定（マップオブジェクト作成したやつ）
position: mapOptions.center, // mapOptionsから座標を指定
icon: {
url: 'https://higemura.com/wordpress/wp-content/uploads/2018/10/ic_gmap_mylocation.svg', // icon画像（png画像でも可）
scaledSize: new google.maps.Size(32, 32) // 表示するアイコンサイズ
},
title: '現在地' // アイコンにマウスホバーすると出てくる文言
});
解説
3行目
変数 myLocation を空で宣言します。
20行〜29行目
myLocation に対して map（表示先）、position（座標）、icon（アイコン画像やサイズ）、title（マーカー文言）を設定することで、指定した座標にマーカーピンを表示することができます。
画像はPNGやJPGなどを使用できますが、綺麗に表示させる為SVG形式の画像を読み込んでいます。
このように地図上に現在地用のマーカー画像を表示することができました！
しかし、現状だと表示している座標が手動で入力した座標（東京駅）になってしまいます。
これじゃ現在地とは言えません、、笑
現在地を取得するにはまず ユーザーの位置情報を取得する 必要があります。
よくWebサイトやアプリなどで「位置情報を許可しますか？」みたいなポップアップがありますよね？
それを許可することで初めて位置情報を取得することができますので、
次回は、位置情報を取得し現在地を動的に表示させていきたいと思います！