top of page

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

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


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

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

※ただし、クレジットカード番号を登録する必要があるのでカード、またはカード情報をお手元にご用意して進めてください。


1,Google Cloud Platformの登録


1,Google Cloud Platform にログイン

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

Google Cloud Platformログイン画像

2,アカウント情報の登録

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

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


「同意して続行」を選択

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

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

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

3,プロジェクトの作成

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

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

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

4,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の有効化

5,APIキーを取得

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

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

Google Cloud Platform APIキー取得

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

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

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


  • 認証情報ページで、生成されたAPIキーをクリックします。

  • 必要に応じ「APIキーの制限」を設定します。

  • 「キーを制限」ボタンをクリックして設定を保存します。

Google Cloud Platform APIキーの保護

2,HTMLファイルの作成


1,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に指定
            },
          ]

これで任意の白地図が作れると思います。

Comments


ファイブボックス 上田教室

bottom of page