吹き出しの内容を変更する

実行結果

次の例では、ボタンを押した際に吹き出しの内容を変更します。
ソースコードと解説

吹き出しの内容を変更するには、ZDC.PopupクラスのsetOptions(options)を利用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ローダーのURLをscriptでロードする -->
<script src="https://{DOMAIN}/zma_loader.js?key=[APIキー]&auth=[認証方式]"></script>
<script type="text/javascript">
  // オブジェクト
  var map;

  // 中心点の緯度経度（東京駅）
  const lat = 35.681406, lng = 139.767132;

  // ZMALoader
  ZMALoader.setOnLoad(function (mapOptions, error) {
    if (error) {
      console.error(error)
      return
    }

    // マップオプションをデフォルト値から変更する
    mapOptions.center = new ZDC.LatLng(lat, lng); // 中心点の緯度経度を設定

    // 地図を生成
    map = new ZDC.Map(
      document.getElementById('ZMap'),
      mapOptions,
      function() {
        // Success callback
        // コントロールを追加する
        // 左上 拡大縮小ボタン
        map.addControl(new ZDC.ZoomButton('top-left'));
        // 右上 コンパス
        map.addControl(new ZDC.Compass('top-right'));
        // 左下 スケールバー
        map.addControl(new ZDC.ScaleBar('bottom-left'));

        /* 吹き出しを作成 */
        var htmlsrc1 =  '<div><b>Zetバーガー1号店</b></div>';
        htmlsrc1 += '<table cellspacing="0">';
        htmlsrc1 += '<tr><td><u><nobr>電話番号: 03-xxxx-xxxx</nobr></u></td></tr>';
        htmlsrc1 += '<tr><td><u><nobr>email: xxx@xxx.xxx</nobr></u></td></tr>';
        htmlsrc1 += '</table>';
        popup_widget = new ZDC.Popup(map.getCenter(), {htmlSource: htmlsrc1});
        /* 吹き出しを追加 */
        map.addWidget(popup_widget);

      },
      function() {
        // Failure callback
      }
    );
  });

  /* ★吹き出しの内容を再設定 */
  function setOptions() {
    var htmlsrc2 =  '<div><b>Zetバーガー2号店</b></div>';
        htmlsrc2 += '<table cellspacing="0">';
        htmlsrc2 += '<tr><td><u><nobr>電話番号: 03-yyyy-yyyy</nobr></u></td></tr>';
        htmlsrc2 += '<tr><td><u><nobr>email: yyy@yyy.yyy</nobr></u></td></tr>';
        htmlsrc2 += '<tr><td><u><nobr>営業時間: 11:00～20:00</nobr></u></td></tr>';
        htmlsrc2 += '</table>';
    popup_widget.setOptions(
      {htmlSource: htmlsrc2}
    );
  }

</script>
</head>

<body>
  <div id="ZMap" style="position: relative; max-width: calc(510px * 16 / 9); height:510px; border:1px solid #777777;"></div>
  <div class="mb-2" id="IBox">
    <input type="button" value="setOptions" onclick="setOptions();">
  </div>
</body>
</html>