Studio Happyvalley

現在地を
Gマップの
センターに
表示する

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

image: 現在地をGマップのセンターに表示する
Show this place on Googlemap Center

現在値をGoogleマップセンターに表示し、地図のスタイルなども
いろいろカスタマイズ

 | 2023/05/14

開発
動機

現在地をマップに表示する機能が必要なケース
  • 現在地をマップに表示させる必要があるのはスマホ用のアプリを開発するとき。

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

コードの
流れ

javascriptによるコーディング
  • 現在地を取得する関数はjavascriptで

    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で設定
  • 細かな設定が可能だがすべてGoogle Maps Platformで管理

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

    Screen-Shot-2023-05-04-at-07Screen-Shot-2023-05-04-at-07Screen-Shot-2023-05-04-at-07

    1. マップのスタイルA

    2. マップのスタイルB

    3. カスタムマーカー

  • Google Maps Platformは有料

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

    googlemapsplathome2

  • Google Maps Platform画面

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

  • クラスターの設定などいろいろ自由な設定が可能

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

    IMG_2267IMG_2266

  • いろいろな設定を追加したサンプル

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

『現在地をGマップのセンターに表示する』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら

Permanent Exhibition