ヘルプ
全てのドキュメントchevron-rightヘルプchevron-rightarrow-leftチュートリアルchevron-rightGoogleマップからMapboxへ移行

GoogleマップからMapboxへ移行

GoogleマップからMapboxへの移行方法をこちらでご紹介させて頂きます。このチュートリアルでは、WebマップJavaScript ライブラリ、Mapbox GL JSでのWebマップの作成、マーカーやポップアップの追加方法のご説明をさせて頂きます。 Google Maps JavaScript APIの手順と似ています。

はじめに

本ガイドでは、Google Maps JavaScript API V3 と、HTML、CSS、JavaScript などのフロントエンド Web 開発に詳しいことを前提としています。

以下が必要なリソースです:

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
  • Mapbox GL JS 最新版のMapbox GL JS JavaScript と CSS ファイルが必要です。このスニペットをHTMLドキュメントの先頭タグに直接コピーし、Mapboxがホストするバージョンに直接リンクします。
<script src='https://api.mapbox.com/mapbox-gl-js/2.14.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/2.14.1/mapbox-gl.css' rel='stylesheet' />
  • テキストエディタ HTML、CSS、およびJavaScriptを書くことになります。

Webマップの初期化

まず、HTMLファイルを設定し、上記のJavaScriptとCSSファイルを先頭に追加します。HTML ファイルを設定後、次のステップに進みます。

Google

Google Maps JavaScript API を使用すると、下記のように、JavaScriptで新しいマップを初期化します。:

const map = new google.maps.Map(document.getElementById('map'), {
  mapTypeId: 'roadmap',
  center: { lat: 64.1436456, lng: -21.9270884 },
  zoom: 13
});

Mapbox GL JS

Mapbox GL JSは同じ様な方法でマップを初期化します。 以下のサンプルコードを使うと、Mapboxストリートテンプレートスタイルを使用するマップになり、設定したズームレベルと座標で初期化を行います。 以下の場合、スタイルオプションは当社のテンプレートの一つであるスタイルURLになります:

const map = new mapboxgl.Map({
  container: 'map', // HTML container id
  style: 'mapbox://styles/mapbox/streets-v11', // style URL
  center: [-21.9270884, 64.1436456], // starting position as [lng, lat]
  zoom: 13
});

また、Mapbox Studioで作成したカスタムスタイルが必要な場合、ブラウザで実行時に動的にマップスタイルを変更することも可能です。

マーカーの追加

これで、マップにマーカーを追加する準備が整いました。

Google

Google Maps JavaScript APIの場合、以下の様にマップにマーカーを追加します:

const map = new google.maps.Map(document.getElementById('map'), {
  mapTypeId: 'roadmap',
  center: { lat: 64.1436456, lng: -21.9270884 },
  zoom: 13
});

const marker = new google.maps.Marker({
  position: { lat: 64.1436456, lng: -21.9270884 },
  title: 'Reykjavik Roasters - Coffee Shop',
  map: map
});

Mapbox GL JS

Mapbox GL JS でマップにマーカーを追加する方法は色々ありますが、次の例ではデフォルトのマーカーを使用します:

const map = new mapboxgl.Map({
  container: 'map', // HTML container id
  style: 'mapbox://styles/mapbox/streets-v11', // style URL
  center: [-21.9270884, 64.1436456], // starting position as [lng, lat]
  zoom: 13
});

const marker = new mapboxgl.Marker()
  .setLngLat([-21.9270884, 64.1436456])
  .addTo(map);

GeoJSON形式やベクトルタイルセット形式を読み込み、任意の場所にマーカーを設定する事ができます。

インタラクティブ機能の追加

マーカーにポップアップ（吹き出し）を追加しましょう。次のステップでマーカーをクリックしたときに情報を表示するポップアップを追加します。

Google

Google Maps JavaScript APIではインタラクティブなポップアップは InfoWindowとして表示されており、以下のように追加します:

const map = new google.maps.Map(document.getElementById('map'), {
  mapTypeId: 'roadmap',
  center: { lat: 64.14356426, lng: -21.92661562 },
  zoom: 13
});

const marker = new google.maps.Marker({
  position: { lat: 64.14356426, lng: -21.92661562 },
  map: map
});

const infowindow = new google.maps.InfoWindow({
  content: '<h3>Reykjavik Roasters</h3><p>A good coffee shop</p>'
});

marker.addListener('click', function () {
  infowindow.open(map, marker);
});

Mapbox GL JS

Mapbox GL JS では、ポップアップをマーカーに直接添付することができ、デフォルトではマーカーをクリックしたときに表示します。イベントリスナーを追加する必要はありません。ポップアップを追加し、HTMLコンテンツを追加する方法を以下に記載します:

const map = new mapboxgl.Map({
  container: 'map', // HTML container id
  style: 'mapbox://styles/mapbox/streets-v11', // style URL
  center: [-21.92661562, 64.14356426], // starting position as [lng, lat]
  zoom: 13
});

const popup = new mapboxgl.Popup().setHTML(
  '<h3>Reykjavik Roasters</h3><p>A good coffee shop</p>'
);

const marker = new mapboxgl.Marker()
  .setLngLat([-21.92661562, 64.14356426])
  .setPopup(popup)
  .addTo(map);

次のステップ

Mapbox GL JS でマーカーとポップアップを含む Webマップを作成しました。様々なマップの構築方法に関してはその他のMapbox GL JSチュートリアルをご覧ください。:

詳細にはMapbox GL JSのドキュメントと事例を確認してください。