一直想在【関連する】ページに地図を追加したいと思っていましたが、いくつかの理由（怠惰）から行動に移せず、今日は比較的時間があるのでやってみます。
最初は高德地図などを使おうと思っていましたが、開発者アカウントの登録や本人確認などの手続きが面倒でした。
そこで、海外の地図サービスプロバイダーに目を向けました。
GoogleMap は周知の理由で除外しましたが、後で長い間選びましたが、Mapboxのサービスを使用することにしました。
Mapbox アカウントの登録 / ログイン#
リンクをクリックして公式ウェブサイトにアクセスし、アカウントを登録してログインします。
ログイン後の画面は以下のようになります
Mapbox SDK のインストール#
- ウェブページ用に使用するため、Web を選択します
- Mapbox CDN を使用するを選択します
- GL JS ファイルを含める
- CSS と JS ファイルをコピーします
<head>に貼り付けます（ここでは自分の状況に合わせてください）
- サイトに地図を追加するものもコピーして貼り付けます。大体同じです。
Mapbox Studio の使用#
-
Mapbox Studioにアクセスし、新しいスタイルをクリックします
-
テンプレートは自分のニーズに合わせて選択します。ここでは Satellite Streets を選択しました
そして Customize -
マップ、レイヤー、色、タイルなど、さまざまな情報を調整して、最後に公開します（ここでは北京の天安門の衛星写真を使用しています）
-
Studio の画面に戻り、先ほどの地図を共有し、Style URL と Access token をコピーして、先ほどの Add the map to your site の URL とトークンを置き換えます。
完了です (●°u°●) 」、通常、この時点で地図が読み込まれるはずです：