地図上にピンを表示

地図上にピンを表示します。

HTML(サンプルコード)
<div id="map"></div>
<div id="btn-area">
    <button id="add-pin">地図中心にピンを表示</button> / <button id="remove-pin">全てのピンを削除</button>
</div>

<style>
    #map {
        height: 400px;
        width: 700px;
        margin: 0 auto;
    }
    #btn-area {
        text-align: center;
    }
</style>
JavaScript(サンプルコード)
// 地図を中心地の緯度経度を用意します
const center = new navitime.geo.LatLng('35.667395', '139.714896');
// 地図を用意します
const map = new navitime.geo.Map('map', center, 16);

// マーカーを用意します
const pinList = [];    
const pin = new navitime.geo.overlay.Pin({
    map: map,                       // 表示させる対象の地図
    icon: '../../../img/pin.png',   // ピン画像
    position: center,               // ピンを表示させる緯度経度(ここでは地図の中心)
});

// マーカーを表示します
pinList.push(pin);

// 「Add-Pin」ボタンが押されると、その際の地図中心位置にピンが表示されます    
document.querySelector('#add-pin').addEventListener('click', () => {
    pinList.push(new navitime.geo.overlay.Pin({ 
        map: map, 
        icon: '../../../img/pin.png', 
        position: map.getCenter(),
    }));
});    

// 「Remove-Pin」ボタンが押されると、地図上のすべてのピンが削除されます    
document.querySelector('#remove-pin').addEventListener('click', () => {
    pinList.forEach(pin => pin.setMap(null));
    pinList.length = 0
});

利用 API

  • /map_script

利用地図スクリプト API