現在地を
Gマップの
センターに
表示する現在地を
Google Mapの
センターに表示し
マーカーや
地図のスタイルなど
いろいろ
カスタマイズする

PCで現在地をマップに表示させたいことは中々無いと思います。ひと手間かけて住所をいれれば表示されますしね。そもそもPCはGPSが内蔵されていないと正確には表示されません。そのため、今回のコンテンツはスマホ専用ということになります。
また、現在地を表示させるマップはGoogleマップになります。自分の居場所周辺にどんなショプがあるのか調べたりする『寄り道マップ』などのスマホアプリでよく使う機能になります。

javascriptにこの関数は用意されていて、navigator.geolocation.getCurrentPosition　が現在地を取得する関数になります。
この関数はセキュリティの制限があるため、ユーザ側の承認が必要になります。ユーザーがOKをして初めて現在地の座標を取得できます。

コードの流れとしては現在地を取得する関数で現在地を取得し、その情報を次の処理へ渡してもよいかと確認を求めます。
この時点で処理は完了になり待機などの処理は発生しません。他の平行した処理があればその処理へ移ります。ユーザーのOKがでて初めて現在地を利用した次のステップへ移れます。そのためユーザーの現在地情報を利用した処理を進めるためにはこの戻り値を取得するように構成します。

function initMap() {
	function success(pos){resault(pos.coords.latitude, pos.coords.longitude);}
	navigator.geolocation.getCurrentPosition(success);
	const info = document.querySelector('#maps span');
	function resault(lat,lng){
		info.textContent= `現在地の座標は『${lat}、${lng}』です。`;
	}
}

現在地の座標を取得するサンプル：https://labo.studio-happyvalley.com/googlemap/getCurrentMap/

通常のままのマップだといろいろなアイコン（マーカーといいます）が表示されてごちゃついてますが、それらを非表示にして見やすくできます。また、オリジナルデザインのマーカーを使用したり、さらに後で説明しますがクラスター化なども可能です。

有料ですが、商用利用でもない限りは無料の範囲を超えることはないでしょう。
チュートリアルが容易されているので使い方を覚えるのもそう難しくはないでしょう。
ただ、設定が煩雑なため慣れるのが結構大変だと思います。

Google Maps Platform画面：https://developers.google.com/maps?hl=ja

クラスターというのは、近接するマーカーをクラスタに統合し、地図上のマーカー表示を簡素化する機能です。
一定範囲に複数のマーカーがある場合ズームアウトしていくとマーカーが重なってごちゃごちゃになりますが、それらを一つのグループアイコンにまとめ、マーカーの数のみを表示します。
下記のサンプルでそのクラスターを実装しています。
ズームアウトしていくと徐々に近隣のマーカーが表示され始め、それらが一つのクラスターに統合されます。

いろいろな設定を追加したサンプル：https://labo.studio-happyvalley.com/googlemap/cluster/