マーカーをクリックしてユーザーウィジェットを表示する

実行結果

次の例では、クリックしたときにユーザーウィジェットを表示するマーカーを表示します。

ソースコードと解説

マーカーをクリックしてユーザーウィジェットを表示するには、ZDC.UserWidgetクラスと、ZDC.MarkerクラスのaddEventListener()を利用します。

<!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, mrk_widget;

  // 中心点の緯度経度（東京駅）
  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

        /* マーカーを作成 */
        mrk_widget = new ZDC.Marker(
          map.getCenter(),
          {
            styleId: ZDC.MARKER_COLOR_ID_GRAY_S,
            contentStyleId: ZDC.MARKER_NUMBER_ID_1_S
          }
        );
        /* ★マーカーをクリック時のイベント登録 */
        mrk_widget.addEventListener('click', function() {
          openUserWidget(mrk_widget.getLatLng()); // マーカーの表示位置を取得して渡す
        });
        /* マーカーを追加 */
        map.addWidget(mrk_widget);

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

  /* ★UserWidgetの表示 */
  function openUserWidget(latlng) {
    map.addWidget(
      new ZDC.UserWidget(
        latlng,
        {
          htmlSource: '<div style="background-color: #FF00FF"><b>Sample UserWidget</b></div>',
          offset: new ZDC.Point(0, -18)
        }
      )
    );
  }

</script>
</head>
<body>
  <div id="ZMap" style="position: relative; max-width: calc(510px * 16 / 9); height:510px; border:1px solid #777777;"></div>
</body>
</html>