はじめに
今回はGoogle Map APIを使ってみました。
この記事では簡単なGoogle Map APIの使い方についてご紹介します。
今回の記事はこちらの動画を参考にさせていただきました。
必要なもの
・VSコード
・Google アカウント
作業工程
※Googleアカウントがない人は事前に作成してください。
今回は
APIキーの取得(手順は動画参照)
↓
htmlのコードの作成(基本は動画参照、追加で機能を複数追加)
という手順で作成しました。
https://cloud.google.com こちらのURLでAPIキーを取得できます。
作成したAPIキーの使用してGoogle Mapを表示
今回はローカル環境でHTMLのファイルで作成しました。コードは下記のようになっています。
※動画より引用
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample_GoogleMap</title>
<style>
html {
height: 100%
}
body {
height: 100%
}
#map {
height: 100%;
width: 100%
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://maps.google.com/maps/api/js?key={自分のAPIキー}&language=ja"></script>
<script>
var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);
var Options = {
zoom: 15, //地図の縮尺地
center: MyLatLng, //地図の中心座標
mapTypeId: 'roadmap' //地図の種類
};
var map = new google.maps.Map(document.getElementById('map'), Options)//マップをどこに表示させるか
</script>
</body>
</html>
実行結果はこのようになっており東京駅付近のマップが画面全体に表示されました。
このような画面が表示された場合は「Google Cloud」の支払い方法が設定されていないや設定ミス、HTMLコードのミスなどが考えられます。
scriptの中を編集すればカスタマイズが可能です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample_GoogleMap</title>
<style>
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCx-e27FNd5pNgHA7sqT_LaFTRIvAmrpQ&language=ja"></script>
<script>
// 地図の基本設定
var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);
var Options = {
zoom: 15, // 地図の縮尺
center: MyLatLng, // 地図の中心座標
mapTypeId: 'roadmap' // 地図の種類
};
// 地図を描画
var map = new google.maps.Map(document.getElementById('map'), Options);
// マーカーの追加
var marker = new google.maps.Marker({
position: MyLatLng, // マーカーの位置
map: map, // 地図オブジェクト
title: "東京駅" // ツールチップ
});
// 情報ウィンドウの設定
var infoWindow = new google.maps.InfoWindow({
content: "<h3>東京駅</h3><p>日本の主要な駅です。</p>"
});
// マーカークリックで情報ウィンドウを表示
marker.addListener("click", function () {
infoWindow.open(map, marker);
});
// 地図クリックイベントの追加
map.addListener("click", function (event) {
alert("クリックした座標: 緯度 " + event.latLng.lat() + ", 経度 " + event.latLng.lng());
});
// カスタムスタイルの適用
var styledMapType = new google.maps.StyledMapType(
[
{ elementType: "geometry", stylers: [{ color: "#ebe3cd" }] },
{ elementType: "labels.text.fill", stylers: [{ color: "#523735" }] },
{ elementType: "labels.text.stroke", stylers: [{ color: "#f5f1e6" }] },
{
featureType: "water",
elementType: "geometry",
stylers: [{ color: "#c9c9c9" }]
}
],
{ name: "Custom Style" }
);
map.mapTypes.set("styled_map", styledMapType);
map.setMapTypeId("styled_map");
</script>
</body>
</html>
上のコードでは
マーカー: 東京駅にマーカーを表示。
情報ウィンドウ: マーカーをクリックすると「東京駅」の説明が表示。
クリックイベント: 地図をクリックした際に座標をアラート表示。
カスタムスタイル: 地図の見た目をカスタマイズ(色合いなど)
の機能を追加してみました。
実行結果はこのようになりました。
クリックした場所の座標が表示されたり、東京駅にマーカーを表示させることに成功しました。
他にも使える機能があるので調べて追加してみてください。
最後に
最後までご覧いただきありがとうございました。
今回このGoogle map APIを使用してみた感想として、今はマーカー表示などが自分の限界でしたがもっと調べれば現在地から目的地までのルートを検索できたりさまざまな用途で活躍できるツールだと感じました。まだ習い始めたばかりですが少しずつ技術を身につけてWebサイトにアップロードできるようにしていきたいです。
改めて今回の記事はこちらの動画を参考にさせていただきました。ありがとうございました。