diff --git a/assets/js/theme.js b/assets/js/theme.js
index d7d2e0867..7e4ef0dd6 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -608,7 +608,7 @@ class FixIt {
       mapboxgl.setRTLTextPlugin(this.config.mapbox.RTLTextPlugin);
       this._mapboxArr = this._mapboxArr || [];
       this.util.forEach(document.getElementsByClassName('mapbox'), ($mapbox) => {
-        const { lng, lat, zoom, lightStyle, darkStyle, marked, navigation, geolocate, scale, fullscreen } = this.data[$mapbox.id];
+        const { lng, lat, zoom, lightStyle, darkStyle, marked, navigation, geolocate, scale, fullscreen } = JSON.parse($mapbox.dataset.options);
         const mapbox = new mapboxgl.Map({
           container: $mapbox,
           center: [lng, lat],
@@ -647,7 +647,7 @@ class FixIt {
       this._mapboxOnSwitchTheme = this._mapboxOnSwitchTheme || (() => {
         this.util.forEach(this._mapboxArr, (mapbox) => {
           const $mapbox = mapbox.getContainer();
-          const { lightStyle, darkStyle } = this.data[$mapbox.id];
+          const { lightStyle, darkStyle } = JSON.parse($mapbox.dataset.options);
           mapbox.setStyle(this.isDark ? darkStyle : lightStyle);
           mapbox.addControl(new MapboxLanguage());
         });
diff --git a/layouts/shortcodes/mapbox.html b/layouts/shortcodes/mapbox.html
index c41306a6f..a1b9d5065 100644
--- a/layouts/shortcodes/mapbox.html
+++ b/layouts/shortcodes/mapbox.html
@@ -28,5 +28,7 @@
 {{- end -}}
 {{- $darkStyle = $darkStyle | default $lightStyle -}}
 {{- $options := dict "lng" $lng "lat" $lat "zoom" $zoom "marked" $marked "lightStyle" $lightStyle "darkStyle" $darkStyle "geolocate" $geolocate "navigation" $navigation "scale" $scale "fullscreen" $fullscreen -}}
-{{- $id := dict "Content" $options "Scratch" .Page.Scratch | partial "function/id.html" -}}
-<div class="mapbox" id="{{ $id }}" style="width: {{ $width }}; height: {{ $height }};"></div>
+
+{{- $attrs := printf `style="width: %v; height: %v;"` $width $height -}}
+<div class="mapbox" data-options="{{ $options | jsonify }}" {{ $attrs | safeHTMLAttr }}></div>
+{{- /*  EOF  */ -}}
diff --git a/layouts/shortcodes/music.html b/layouts/shortcodes/music.html
index 567a86cba..b0ad1b8ba 100644
--- a/layouts/shortcodes/music.html
+++ b/layouts/shortcodes/music.html
@@ -47,4 +47,3 @@
 {{- else -}}
   <meting-js server="{{ .Get 0 }}" type="{{ .Get 1 }}" id="{{ .Get 2 }}" theme="{{ $theme }}"></meting-js>
 {{- end -}}
-{{- /* EOF */ -}}