地図上に吹き出しを表示(v1)
地図上に吹き出しを表示します。
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, { bounds: new navitime.geo.BoundsInfo(0, $('#map').width(), 0, $('#map').height()) }); // マーカーを用意します 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' // 吹き出しの余白 });