Google Maps APIの活用法

html
CopyEdit
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer>script>

タグを作成します。

html
CopyEdit
<div id="map" style="height: 500px; width: 100%;">div>

次に、JavaScriptを使って地図を表示します。google.maps.Mapクラスを使用して、地図を初期化します。

javascript
CopyEdit
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 35.6895, lng: 139.6917 },  // 東京の座標
    zoom: 10
  });
}

上記コードでは、地図の中心位置を東京に設定し、ズームレベルを10に設定しています。地図はページが読み込まれた後に表示されます。

3. マーカーの追加

地図にマーカーを追加することで、特定の地点を示すことができます。マーカーを追加するには、google.maps.Markerを使用します。

javascript
CopyEdit
function addMarker(lat, lng) {
  const marker = new google.maps.Marker({
    position: { lat: lat, lng: lng },
    map: map,
    title: '指定地点'
  });
}

// 東京タワーの位置にマーカーを追加
addMarker(35.6586, 139.7454);

上記のコードでは、東京タワーの位置にマーカーを追加しています。title属性にはマーカーにマウスオーバーした際に表示されるテキストを指定できます。

4. 複数のマーカーを表示

複数のマーカーを地図に表示する場合、マーカーを配列として管理し、ループを使って地図上にマーカーを追加します。

javascript
CopyEdit
const locations = [
  { lat: 35.6895, lng: 139.6917, title: '東京' },
  { lat: 34.0522, lng: -118.2437, title: 'ロサンゼルス' },
  { lat: 51.5074, lng: -0.1278, title: 'ロンドン' }
];

locations.forEach(location => {
  new google.maps.Marker({
    position: { lat: location.lat, lng: location.lng },
    map: map,
    title: location.title
  });
});

このコードでは、東京、ロサンゼルス、ロンドンの3つの都市にマーカーを追加しています。

5. 地図にインタラクションを加える

Google Mapsでは、地図に対してさまざまなインタラクションを追加することができます。たとえば、地図上をクリックした際にマーカーを追加することが可能です。

javascript
CopyEdit
map.addListener('click', function(e) {
  new google.maps.Marker({
    position: e.latLng,
    map: map,
    title: '新しいマーカー'
  });
});

このコードでは、地図上をクリックすると、その場所にマーカーが追加されます。e.latLngはクリックした場所の緯度経度情報を取得します。

6. 地図のスタイルをカスタマイズ

Google Mapsでは、地図のデザインをカスタマイズすることができます。例えば、カラーや道路の表示を変更することができます。

javascript
CopyEdit
const styles = [
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#212121"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  }
];

map.setOptions({ styles: styles });

このコードでは、地図の色やラベルのスタイルを変更しています。スタイルを変更することで、地図をより自分のサイトに合わせたデザインにできます。

7. ルート案内（Directions Service）

Google Maps APIを使って、2地点間のルート案内を表示することができます。google.maps.DirectionsServiceとgoogle.maps.DirectionsRendererを使用します。

javascript
CopyEdit
let directionsService = new google.maps.DirectionsService();
let directionsRenderer = new google.maps.DirectionsRenderer();

directionsRenderer.setMap(map);

function calculateRoute() {
  let request = {
    origin: { lat: 35.6895, lng: 139.6917 }, // 東京
    destination: { lat: 34.0522, lng: -118.2437 }, // ロサンゼルス
    travelMode: 'DRIVING'
  };

  directionsService.route(request, function(result, status) {
    if (status === 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}

calculateRoute();

上記コードでは、東京からロサンゼルスまでの車でのルートを地図上に表示します。

8. まとめ

このように、Google Maps APIを使って、地図を表示し、マーカーを追加し、インタラクションを加えることで、ユーザーが使いやすい地図機能をウェブサイトに組み込むことができます。さらに、地図のスタイル変更やルート案内機能など、さまざまな機能を活用することで、より豊かなユーザー体験を提供できます。

次回は、Google Maps APIの高度な機能についてさらに詳しく説明します。