マップと各種情報の表示

それでは、マップ上に各種情報を表示する仕組みについてみていきましょう。

マーカー

まず、マーカーを立てるには以下のコードを利用します。

const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

let marker = new AdvancedMarkerElement({
    map: map,
    position: shinagawa,
});

上記のようにすると、現在のマップの中心にマーカーが設置されます。

もとの initMap 関数に含めると以下のようになります。

let map;
// async は非同期で実行される関数
async function initMap() {
    // await は非同期処理が終わるまで待つ
    // Map は Google Maps のクラス
    const { Map } = await google.maps.importLibrary("maps");


    let shinagawa = {
        lat: 35.6284477,
        lng: 139.7366322
    };

    // 表示領域の確保
    let map_box = document.getElementById('map_box');

    // Google Maps のマップオブジェクトを生成
    map = new Map(
        map_box, // 第１引数はマップ表示対象の要素。
        {
            // 第２引数で各種オプションを設定
            center: shinagawa, // 地図の中心を品川に
            zoom: 15, // 拡大のレベルを15に。（1 - 18くらい）
            disableDefaultUI: true, // 各種UIをOFFに
            zoomControl: true, // 拡大縮小だけできるように
            clickableIcons: false, // クリック関連の機能をoffに。
            mapId: 'DEMO_MAP_ID'
        }
    );

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

    let marker = new AdvancedMarkerElement({
        map: map,
        position: shinagawa,
    });
}

initMap();

マーカーのカスタマイズ

マーカーは様々なカスタマイズが可能です。

マウスオーバーした時に情報を表示する

let marker = new AdvancedMarkerElement({
    map: map,
    position: shinagawa,
    title: 'ここに情報が入ります', // マウスオーバー時に表示。
});

上記のように title を設定するとマウスオーバー時にテキストを表示できます。

マーカーのアイコンを他の画像にする

// 画像用の img 要素を作成
const marker_image = document.createElement("img");
// img 要素の src 属性に画像のパスを指定
marker_image.src ="marker.png";

let marker = new AdvancedMarkerElement({
    map: map,
    position: shinagawa,
    title: 'ここに情報が入ります', // マウスオーバー時に表示。
    content: marker_image, // 上で作成した img 要素に変更
});

上記のようにすることで、マーカーのアイコンを変更できます。（実際の画像が指定されていないと何も表示されなくなるので注意しましょう）

以下のマーカー画像（引用元: icooon-mono.com）を利用（右クリックから名前をつけて画像を保存してから、cloud9にアップロード）して試してみましょう。

情報ウィンドウ

画面上に情報ウィンドウと呼ばれる各種情報が描かれたボックスを表示させることも可能です。

let infoWindow = new google.maps.InfoWindow({
    position: shinagawa,
    content: 'ここに<strong>各種情報</strong>が入ります。',
});
infoWindow.open(map); // この行が必要。

上記のようにすることでマップ上に情報ウィンドウを表示することが可能です。

また、マーカーに情報ウィンドウを紐づけることも可能です。

let infoWindow = new google.maps.InfoWindow({
  // position: shinagawa, // 配置場所の指定は不要。
  content: 'ここに<strong>各種情報</strong>が入ります。',
});
infoWindow.open(map, marker); // 第二引数にマーカーを指定。

上記のようにすることでマーカーに情報ウィンドウが紐づけられます。

initMap 関数に追記すると

let map;
// async は非同期で実行される関数
async function initMap() {
    // await は非同期処理が終わるまで待つ
    // Map は Google Maps のクラス
    const { Map } = await google.maps.importLibrary("maps");


    let shinagawa = {
        lat: 35.6284477,
        lng: 139.7366322
    };

    // 表示領域の確保
    let map_box = document.getElementById('map_box');

    // Google Maps のマップオブジェクトを生成
    map = new Map(
        map_box, // 第１引数はマップ表示対象の要素。
        {
            // 第２引数で各種オプションを設定
            center: shinagawa, // 地図の中心を品川に
            zoom: 15, // 拡大のレベルを15に。（1 - 18くらい）
            disableDefaultUI: true, // 各種UIをOFFに
            zoomControl: true, // 拡大縮小だけできるように
            clickableIcons: false, // クリック関連の機能をoffに。
            mapId: 'DEMO_MAP_ID', // マップのIDを指定
        }
    );

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

    const marker_image = document.createElement("img");
    marker_image.src ="marker.png";

    let marker = new AdvancedMarkerElement({
        map: map,
        position: shinagawa,
    });

    let infoWindow = new google.maps.InfoWindow({
        // position: shinagawa,
        content: 'ここに<strong>各種情報</strong>が入ります。',
    });
    infoWindow.open(map, marker); // この行が必要。
}

initMap();

上記のようになります。

イベントの設定

マップ・マーカー・情報ウィンドウにはそれぞれイベントを設定することが可能です。

マップにイベントを設定

では、マップにイベントを設定してみましょう。

一例として、クリックした座標にマーカーを表示させてみます。

map.addListener('click', function(e){
    // console.log(e);
    let added_marker = new AdvancedMarkerElement({
        position: e.latLng, // クリックされた座標を利用
        map: map,
        title: e.latLng.toString(), // 座標の表示
    });
});

上記のようにすることで、クリックされた座標にマーカーを表示させることが可能です。

initMap 関数に追記すると

let map;
// async は非同期で実行される関数
async function initMap() {
    // await は非同期処理が終わるまで待つ
    // Map は Google Maps のクラス
    const { Map } = await google.maps.importLibrary("maps");


    let shinagawa = {
        lat: 35.6284477,
        lng: 139.7366322
    };

    // 表示領域の確保
    let map_box = document.getElementById('map_box');

    // Google Maps のマップオブジェクトを生成
    map = new Map(
        map_box, // 第１引数はマップ表示対象の要素。
        {
            // 第２引数で各種オプションを設定
            center: shinagawa, // 地図の中心を品川に
            zoom: 15, // 拡大のレベルを15に。（1 - 18くらい）
            disableDefaultUI: true, // 各種UIをOFFに
            zoomControl: true, // 拡大縮小だけできるように
            clickableIcons: false, // クリック関連の機能をoffに。
            mapId: 'DEMO_MAP_ID', // マップのIDを指定
        }
    );

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

    const marker_image = document.createElement("img");
    marker_image.src ="marker.png";

    let marker = new AdvancedMarkerElement({
        map: map,
        position: shinagawa,
    });

    let infoWindow = new google.maps.InfoWindow({
        // position: shinagawa,
        content: 'ここに<strong>各種情報</strong>が入ります。',
    });
    infoWindow.open(map, marker); // この行が必要。

    map.addListener('click', function(e){
        // console.log(e);
        let added_marker = new AdvancedMarkerElement({
            position: e.latLng, // クリックされた座標を利用
            map: map,
            title: e.latLng.toString(), // 座標の表示
        });
    });
}

initMap();

上記のようになります。

マーカーにイベントを設定する

マーカーにもイベントを設定することが可能です。

一例として、クリック時に追加されたマーカーを削除します。

map.addListener('click', function(e){
    // console.log(e);
    let added_marker = new AdvancedMarkerElement({
        position: e.latLng, // クリックされた座標を利用
        map: map,
        title: e.latLng.toString(), // 1例として座標を表示
    });

    added_marker.addListener('click', function(e){
        this.setMap(null);
    });
});

上記のようにすることで、追加されたマーカーをクリックした時にはマーカーが削除されます。