(Sample)
以下はGoogle Mapsを利用して地図を表示するための基本的なサンプルコードです。
APIキーと表示したい位置の緯度経度を適切に設定し、HTMLファイルとして保存してブラウザで開くと、指定した位置の地図が表示されます。緯度と経度の調べ方はグーグルマップでその場所を開き右クリックします。
また、languageオプションを使用して地図を日本語で表示することもできます。
ポイントは、以下の11点です。
- JavaScriptの
initMap()関数は、地図の初期化と表示を行います。 initMap()関数内では、getElementById()メソッドを使用してmapコンテナ要素を取得します。new google.maps.Map()により、Google Mapsのマップオブジェクトが作成されます。centerオプションでは、地図の初期表示位置を指定します。ここでは、名古屋駅の緯度と経度を指定しています。zoomオプションでは、地図の初期表示のズームレベルを指定します。ここでは、ズームレベル13を指定しています。languageオプションでは、地図の表示言語を指定します。ここでは、'ja'（日本語）を指定しています。- マーカーアイコンとしては、'yamazaki.jpg' という画像ファイルが使用されています。このファイルはマーカーの位置に表示されます。
addEventListener()を使用して、ページのロードが完了したときにコードが実行されるようにします。<script>タグのsrc属性では、Google Maps APIのURLを指定します。ここでAPIキーを設定し、callback=initMapとして、地図の初期化が完了したらinitMap()関数が呼び出されるようにします。<script>タグのdeferとasync属性は、スクリプトの非同期読み込みを設定します。document.head.appendChild(script);により、スクリプト要素がヘッドセクションに追加されます。
なお、GoogleMapAPIの以下の設定でこのサイトからのアクセスしか受け付けないようにしています。APIキーを使うと有料になることがありますので公開するページには設定しましょう。
<!DOCTYPE html>
<html>
<head>
<title>google-map.html</title>
<style>
#map {
height: 800px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
let mapDiv = document.getElementById('map');
let map = new google.maps.Map(mapDiv, {
center: {lat: 35.1691293235, lng: 136.875624831}, // 地図の中心座標
zoom: 13, // ズームレベル
language: 'ja' ,// 日本語を設定
});
let iconSize = new google.maps.Size(64, 64); // アイコンの表示サイズを指定
let marker = new google.maps.Marker({
position: {lat: 35.1691293235, lng: 136.875624831}, // マーカーの位置
map: map,
icon: {
url: 'yamazaki.jpg', // アイコンのパス
scaledSize: iconSize // アイコンのサイズを指定
}
});
}
document.addEventListener("DOMContentLoaded", function () {
let script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyB-cSseRMi1e9gUcntHfErXArbtlp4DUsQ&callback=initMap&language=ja'; // 日本語を設定
script.defer = true;
script.async = true;
document.head.appendChild(script);
});
</script>
</body>
</html>