Google Mapsでショップなどのアイコンや表示を隠す具体的な方法は提供されていませんが、「Google Maps API」を活用してカスタマイズされた地図を作成することで、それに近い状態を表示することができます。
Google Maps API を使用するには「Google Cloud Platform」にアクセスしなければなりません。
無料で始めることができるので、チャレンジしてみてはいかがでしょうか?
※事前にクレジットカードをお手元にご用意ください。(引落はされません)
Google Cloud Platform の操作
Google Cloud Platform にログイン
Googleのアカウントにログインして、右上の「無料で利用開始」を押します
アカウント情報の登録
国名を選択し、利用規約を確認してください。
「無料トライアル期間が終了しても、自動的に請求されることはありません」と表記されていますが、詳細を確認しておきましょう。
「同意して続行」を選択
支払い情報の登録を行い、「送信」を押します
プロジェクトの作成
新規プロジェクトはダッシュボードから「プロジェクトを作成」を選択し作成します。
または左上のメニューをクリック、表示されたポップアップの左上「新しいプロジェクト」を選択し作成します。
プロジェクトに任意の名前を付けて保存しておきましょう。
Google Maps JavaScript API の有効化
Google Cloud Platform Consoleで、左側のメニューから「APIとサービス」→「ライブラリ」を選択します。
検索バーに「Google Maps JavaScript API」と入力し、検索結果から選択します。
「有効にする」ボタンをクリックします。
APIキーを取得
APIが有効になったら、「APIとサービス」→「認証情報」を選択します。
「認証情報を作成」ボタンをクリックし、「APIキー」を選択、生成されたAPIキーをコピーし、保存します。このキーは後続する工程で使用します
APIキーの宣言(オプション)
取得したAPIキーは使用の制限を指定することができます。
一時的に白地図を作りたいだけであれば「後で」を選択してこの設定をスキップします。
- 認証情報ページで、生成されたAPIキーをクリックします。
- 必要に応じ「APIキーの制限」を設定します。
- 「キーを制限」ボタンをクリックして設定を保存します。
Webで表示
HTMLファイルの作成
Google Cloud Platform の設定はとりあえず完成で、ここから簡単なMapのサイトを作成します。
任意のフォルダ内に「index.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ファイルをブラウザで立ち上げると(ファイルをブラウザ上にドラッグ&ドロップなど)、商業施設の文字がなくなりました。
駅名や道路名を非表示にしたい場合は、以下のプロパティ値を指定してみましょう。
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に指定
},
]
なんとなく使い方、わかってきましたかね?これで任意の白地図が作れると思います。