Google Mapsでショップなどのアイコンや表示を隠す具体的な方法は提供されていませんが、「Google Maps API」を活用して、ラベルを非表示にしたり、駅名や道路名を非表示にしたカスタマイズされた地図を作成することで、それに近い状態を表示することができます。
Google Maps API を使用するには「Google Cloud Platform」にアクセスしなければなりません。
無料で始めることができるので、チャレンジしてみてはいかがでしょうか？
※ただし、クレジットカード番号を登録する必要があるのでカード、またはカード情報をお手元にご用意して進めてください。
１，Google Cloud Platformの登録
1,Google Cloud Platform にログイン
Googleのアカウントにログインして、右上の「無料で利用開始」を押します
2,アカウント情報の登録
国名を選択し、利用規約を確認してください。
「無料トライアル期間が終了しても、自動的に請求されることはありません」と表記されていますが、詳細を確認しておきましょう。
「同意して続行」を選択
支払い情報の登録を行い、「送信」を押します
3,プロジェクトの作成
新規プロジェクトはダッシュボードから「プロジェクトを作成」を選択し作成します。
または左上のメニューをクリック、表示されたポップアップの左上「新しいプロジェクト」を選択し作成します。
4,Google Maps JavaScript API の有効化
Google Cloud Platform Consoleで、左側のメニューから「APIとサービス」→「ライブラリ」を選択します。
検索バーに「Google Maps JavaScript API」と入力し、検索結果から選択します。
「有効にする」ボタンをクリックします。
5,APIキーを取得
APIが有効になったら、「APIとサービス」→「認証情報」を選択します。
「認証情報を作成」ボタンをクリックし、「APIキー」を選択、生成されたAPIキーをコピーし、保存します。このキーは後続する工程で使用します
6,APIキーの宣言（オプション）
取得したAPIキーは使用の制限を指定することができます。
一時的に白地図を作りたいだけであれば「後で」を選択してこの設定をスキップします。
認証情報ページで、生成されたAPIキーをクリックします。
必要に応じ「APIキーの制限」を設定します。
「キーを制限」ボタンをクリックして設定を保存します。
２，HTMLファイルの作成
１,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に指定
},
]これで任意の白地図が作れると思います。
Comentarios