はじめに
この記事はapiのキーを取得していることを前提として書きます。(キーの取得に関する部分は割愛いたします。)
※キーの取得にはこちらを参考にしてください。
また、jsがまともにかけるようになって2年目の備忘録です。
実際にページにマップを表示できるようになるにはどうしたらいいか書きました。
ページにマップを表示できるようになるまで
1.今回説明するコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
$(function () {
//位置情報
var myLatLng = {lat: 0, lng: 0};
//mapの描画
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: myLatLng
});
//マーカーの描画
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
draggable: true
});
</script>
</body>
</html>
2.Google Maps JavaScript APIのロード
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"async defer></script>
これをhtmlに入れる。
YOUR_API_KEYには自分で取得したキーを入れる。
3.マップを表示させる
表示させたい部分に<div id="map"></div>を挿入する。
大きさ等をcssで調節してください。
※heightを指定しないと表示されないようです。
4.マップを描画する
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 1,
center: {lat: 0, lng: 0}
});
また、
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 1,
center: myLatLng
});
このように後で緯度経度を変更できるように
var myLatLng = {lat: LatitudeData, lng: LongitudeData};と宣言して
動的に値を変えることも可能です。
※myLatLng更新のための関数は割愛させていただきます。
5.マップを生成する様々なプロパティ
・zoom:マップの表示範囲を指定する。
(zoomの値はこちらを参考にしてください。)
・center:マップの中心をどこにするか指定する。
※マップの中にあるズームコントローラーやマップのタイプを切り替えるコントローラーは無効にしたりもできるので必要に応じて調べて追加してください。
6.マーカーの表示
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
draggable: true
});
・position:緯度経度を設定し、マーカーの位置を指定する。設定は必須。
・map:マーカーを配置するマップを指定する。はじめに設定しない場合、マーカーは作成されるが表示されない。別途marker.setMap(map);で呼び出すことで、マーカーをマップ上に追加できる。設定は任意。
・draggable:マーカーをドラッグでの移動の有効/無効にする。設定は任意。
7.マーカーを動かした時の処理
下記のように、マーカーを動かしたときの処理をかくこともできる。この場合は、マーカーをドラッグし終えたときの処理の書き方です。
marker.addListener('dragend', function () {
//実行したい処理をかく
});
終わりに
今回は、マップを表示させるだけにフォーカスしました。
本来はもっと多くのことができるので
必要に応じてこちらを見てみてください。