BingMapsにクリック時に吹き出しが出るプッシュピンを描画する

コード

javascript

//以下のサンプルをベースに作成
//https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/reuseinfobox

//pushpinの情報
var pushpinsInfo = [
    {latitude:35.680900, longitude:139.766943, title:"pin1", description:"<a href='#'>説明1リンク</a>"},
    {latitude:35.685012, longitude:139.765897, title:"pin2", description:"説明2"}
];

//mapインスタンスを生成
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    /* No need to set credentials if already passed in URL */
    center: new Microsoft.Maps.Location(pushpinsInfo[0].latitude, pushpinsInfo[0].longitude) });

//infoboxは一つ作成して再利用する
var infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, autoAlignment: true });
infobox.setMap(map);

//pushpinを作成
var pushpins = [];

pushpinsInfo.forEach(function(info){
    var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(info.latitude, info.longitude),null);
    pushpin.metadata = info;

    Microsoft.Maps.Events.addHandler(pushpin, 'click', function (args) {
        infobox.setOptions({
            location: args.target.getLocation(),
            title: args.target.metadata.title,
            description: args.target.metadata.description,
            visible: true
        });
    });

    pushpins.push(pushpin);
});

map.entities.push(pushpins);

実行方法

• Bing Maps V8 Interactive SDKページのメニューから任意のサンプルコードのページを表示し、Javascriptタブにコードを貼り付けて、実行ボタンをクリックする
• 自分のアプリケーションに組み込む場合は、Bing mapキーを取得してコードを埋め込む Getting a Bing Maps Key

参考：緯度・経度の調べ方

• BingMapで調べたいポイントを右クリックすると、ポップアップメニューに緯度・経度が表示される。