Googlemapのラベルを外す方法
Googlemapのラベルを外す方法

GoogleMap で商業施設等のアイコンや表示ラベルがない白地図を作る方法 - ファイブボックス

GoogleMap で商業施設等のアイコンや表示ラベルがない白地図を作る方法

Google Mapsでショップなどのアイコンや表示を隠す具体的な方法は提供されていませんが、「Google Maps API」を活用してカスタマイズされた地図を作成することで、それに近い状態を表示することができます。

Google Maps API を使用するには「Google Cloud Platform」にアクセスしなければなりません。

無料で始めることができるので、チャレンジしてみてはいかがでしょうか?

※事前にクレジットカードをお手元にご用意ください。(引落はされません)

Google Cloud Platform の操作

Google Cloud Platform にログイン

Googleのアカウントにログインして、右上の「無料で利用開始」を押します

Google Cloud Platformログイン画像

アカウント情報の登録

国名を選択し、利用規約を確認してください。

「無料トライアル期間が終了しても、自動的に請求されることはありません」と表記されていますが、詳細を確認しておきましょう。

「同意して続行」を選択

Google Cloud Platformアカウント設定画像

支払い情報の登録を行い、「送信」を押します

Google Cloud Platformアカウント設定画像

プロジェクトの作成

新規プロジェクトはダッシュボードから「プロジェクトを作成」を選択し作成します。

または左上のメニューをクリック、表示されたポップアップの左上「新しいプロジェクト」を選択し作成します。

プロジェクトに任意の名前を付けて保存しておきましょう。

Google Cloud Platform 新規プロジェクト作成画像

Google Maps JavaScript API の有効化

Google Cloud Platform Consoleで、左側のメニューから「APIとサービス」→「ライブラリ」を選択します。

Google Cloud Platform APIとサービスの設定

検索バーに「Google Maps JavaScript API」と入力し、検索結果から選択します。

Google Cloud Platform APIの検索
Google Cloud Platform で MapJavascriptAPIを選択

「有効にする」ボタンをクリックします。

Google Cloud Platform MapJavascriptAPIの有効化

APIキーを取得

APIが有効になったら、「APIとサービス」→「認証情報」を選択します。

「認証情報を作成」ボタンをクリックし、「APIキー」を選択、生成されたAPIキーをコピーし、保存します。このキーは後続する工程で使用します

Google Cloud Platform APIキー取得

APIキーの宣言(オプション)

取得したAPIキーは使用の制限を指定することができます。

一時的に白地図を作りたいだけであれば「後で」を選択してこの設定をスキップします。

  • 認証情報ページで、生成されたAPIキーをクリックします。
  • 必要に応じ「APIキーの制限」を設定します。
  • 「キーを制限」ボタンをクリックして設定を保存します。
Google Cloud Platform APIキーの保護

Webで表示

HTMLファイルの作成

Google Cloud Platform の設定はとりあえず完成で、ここから簡単なMapのサイトを作成します。

任意のフォルダ内に「index.html」などのhtmlファイルを作成します。拡張子(.html)の前のファイル名は任意です。

HTMLファイルの作成画像

作成した「index.html」を任意のエディタで開いて次のサンプルコードを入力。

 ※HTMLエディタ=HTMLを編集するツールです。既存のテキストエディタでも結構ですが、VSCodeなどの無料ツールを使うと、編集がスムーズにいくと思います。

なお、以下サンプルコードは新宿駅を中心に商業施設と医療機関の表示をオフにする設定です。

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Map</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSy*********pwm5A0"></script>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.6905, lng: 139.6995},    //参照したい場所の座標
          zoom: 15,						       //縮尺度
          styles: [
            {
              featureType: 'poi.business',		//商業施設の表示
              stylers: [{visibility: 'off'}]		//offに指定
            },
            {
              featureType: 'poi.medical',		//医療機関の表示
              stylers: [{visibility: 'off'}]		//offに指定
            }
          ]
        });
      }
    </script>
  </head>
  <body onload="initMap()">
    <div id="map" style="height: 500px; width: 100%;"></div>//高さ、幅指定
  </body>
</html>
上の<Script>タグの key の値(赤文字の部分)には手順5で取得した「APIキー」を指定します。

作成したHTMLファイルをブラウザで立ち上げると(ファイルをブラウザ上にドラッグ&ドロップなど)、商業施設の文字がなくなりました。

新宿駅周縁の商業施設表示をオフに、Zoom15で表示した画像
新宿駅周縁の商業施設表示をオフに、Zoom17で表示した画像

駅名や道路名を非表示にしたい場合は、以下のプロパティ値を指定してみましょう。

featureTypeの一覧

  • administrative (行政区域)
  • administrative.country(国境)
  • administrative.land_parcel(島の区画)
  • administrative.locality(地方自治体の区画)
  • administrative.neighborhood(近隣地区)
  • administrative.province(県、州などの広域自治体区画)
  • landscape (景観全般)
  • landscape.man_made(人工物)
  • landscape.natural(自然地形)
  • landscape.natural.landcover(土地を覆う自然物)
  • landscape.natural.terrain(地形)
  • poi (Point of Interest 関心のもたれる地点)
  • poi.attraction(観光名所)
  • poi.business(商業施設)
  • poi.government(行政機関)
  • poi.medical(医療機関)
  • poi.park(公園、緑地)
  • poi.place_of_worship(寺院、神社、教会、宗教関連施設)
  • poi.school(学校、教育関連施設)
  • poi.sports_complex(スポーツ施設)
  • road 道路全般
  • road.arterial(幹線道路)
  • road.highway(高速道路)
  • road.highway.controlled_access(アクセス制限付き高速道路)
  • road.local(一般道)
  • transit (交通機関)
  • transit.line(電車、バスなどの路線)
  • transit.station(駅)
  • transit.station.airport(空港)
  • transit.station.bus(バス停留所)
  • transit.station.rail(電車、鉄道の駅)
  • water 水域

上のリストの中から表示させたくないものを見つけて styleプロパティの中で下の様に複数指定することも可能です。

styles: [
            {
              featureType: 'poi.business',             //商業施設
              stylers: [{visibility: 'off'}]		//offに指定
            },
            {
              featureType: 'poi.medical',		//医療機関の表示
              stylers: [{visibility: 'off'}]		//offに指定
            },
            {
              featureType: 'poi.place_of_worship',//寺社仏閣の表示
              stylers: [{visibility: 'off'}]		//offに指定
            },
		 {
              featureType: 'transit.station',	        //駅名の表示
              stylers: [{visibility: 'off'}]		//offに指定
            },
         ]

または学校のみ表示させて、他の施設、ランドマーク、道路名、交通機関の表示を消したいときは以下のように指定します。

styles: [
            {
              featureType: 'poi',		                 //すべての施設
              stylers: [{visibility: 'off'}]		//offに指定
            },
            {
              featureType: 'poi.school',		//教育機関
              stylers: [{visibility: 'on'}]		//onに指定
            },
            {
              featureType: 'landscape',                 //全ての景観
              stylers: [{visibility: 'off'}]		//offに指定
            },
	 {
              featureType: 'road',	                        //全ての道
              stylers: [{visibility: 'off'}]		//offに指定
            },
   {
              featureType: 'transit',	                 //全ての交通機関
              stylers: [{visibility: 'off'}]		//offに指定
            },
          ]

なんとなく使い方、わかってきましたかね?これで任意の白地図が作れると思います。

TOP