Google Maps API 入門

地図にマーカーを追加する

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

javascript
CopyEdit
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 35.682839, lng: 139.759455}, // 東京の緯度経度
    zoom: 15
  });

  const marker = new google.maps.Marker({
    position: {lat: 35.682839, lng: 139.759455}, // マーカーの位置
    map: map,  // マーカーを地図に追加
    title: '東京'
  });
}

このコードでは、google.maps.Markerを使ってマーカーを作成し、mapプロパティに地図を指定することで、その地図上にマーカーが表示されます。また、titleプロパティを使ってマウスオーバー時に表示されるテキストを設定しています。

インフォウィンドウの表示

マーカーに関連付けて情報を表示するには、google.maps.InfoWindowを使用します。これにより、マーカーをクリックしたときにポップアップウィンドウが表示されるようにできます。

javascript
CopyEdit
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 35.682839, lng: 139.759455},
    zoom: 15
  });

  const marker = new google.maps.Marker({
    position: {lat: 35.682839, lng: 139.759455},
    map: map,
    title: '東京'
  });

  const infowindow = new google.maps.InfoWindow({
    content: '
東京
日本の首都です。

		


		
	
'
  });

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

上記のコードでは、マーカーをクリックしたときにInfoWindowが開くように設定しています。contentプロパティには表示したいHTMLを入れることができます。

地図上での位置情報の取得

Google Maps APIを使用して、ユーザーの現在位置を地図に表示することもできます。これはnavigator.geolocationを使って取得します。

javascript
CopyEdit
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15
  });

  // ユーザーの現在位置を取得
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      const userLatLng = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      map.setCenter(userLatLng);

      const marker = new google.maps.Marker({
        position: userLatLng,
        map: map,
        title: 'あなたの位置'
      });
    });
  } else {
    alert('Geolocation is not supported by this browser.');
  }
}

このコードでは、ユーザーの現在位置を取得し、地図の中心をその位置に変更しています。また、ユーザーの位置にマーカーを表示しています。

まとめ

今回はGoogle Maps APIを使って、地図の表示、マーカーの追加、インフォウィンドウの表示、位置情報の取得方法について基本的な操作を学びました。これらの機能は、さまざまなWebアプリケーションで利用される基盤となる技術であり、さらに詳細なカスタマイズや高度な機能も多数提供されています。

次回は、地図上でのルート検索や経路表示、複数のマーカーを扱う方法など、さらに進んだテクニックについて解説していきます。