地図上に吹き出しを表示

地図上に吹き出しを表示します。

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

// マーカーを用意します
new navitime.geo.overlay.Pin({
    map: map,               // 描画対象の地図オブジェクト
    icon: '../../../img/pin.png',   // 表示したい画像
    position: center,     // 表示する地点
    draggable: false      // ドラッグ不可
});

 // 吹き出しを表示します
new navitime.geo.overlay.InfoWindow({
    map: map,                             // 表示対象地図インスタンス
    position: center,                    // 緯度経度
    content: "<span style=\"color:#ffffff\">株式会社ナビタイムジャパン</span>",     // 内部に表示させる内容
    pixelOffset: { x: 0, y: -40 },        // x: 表示位置X →方向 ＋, y: 表示位置Y ↓方向 ＋
    zIndex: 100,                          // その他のオーバーレイと比較したzIndex
    maxWidth: 200,                        // 吹き出しの最大幅
    disableClose: true,                   // ×ボタン無効化
    tailDirection: 'left',                // 吹き出しのしっぽの方向指定
    backgroundColor: '#006400',           // 吹き出しの背景色
    borderColor: '#ffffff',               // 吹き出しの線色
    margin: '5px'                         // 吹き出しの余白
});

利用 API

  • /map_script

利用地図スクリプト API