地図上にマーカーを表示させて、吹き出しに説明を出す

緯度経度を指定してその点を中心として地図を表示させ、別の点を緯度経度で指定してマーカーを表示させ、吹き出しまで出します。bindInfoWindow()では初期状態で開かないので、クリックイベントを呼び出して初めから表示させるようにしています。

今回は地図の中心を新大久保駅(35.701306, 139.700044)、マーカーは新宿駅(35.690921, 139.700258)に表示してます。

<script type="text/javascript" src="https://map.yahooapis.jp/js/V1/jsapi?appid=アプリケーションID"></script>
<div id="map" style="width: 280px; height: 280px;"></div>
<script type="text/javascript">
window.onload() = function() {
  var myMap = new Y.Map("map");
  myMap.drawMap(
    // 中心点緯度経度
    new Y.LatLng(35.701306, 139.700044), 
    // ZOOMレベル
    14,
    // レイヤーセット(標準地図)
    Y.LayerSetId.NORMAL
  );

  var myMarker = new Y.Marker(
    // マーカーを置く緯度経度
    new Y.LatLng(35.690921, 139.700258),
  );
  // 吹き出しに表示する文
  myMarker.bindInfoWindow("新宿駅で~す");

  // マーカーを地図に表示
  myMap.addFeature(myMarker);

  // マーカーをクリックしたことにして、吹き出しを表示
  Y.Event.trigger(myMarker, "click");
}
</script>