diff --git a/index.html b/index.html
index c547e562..755d9893 100644
--- a/index.html
+++ b/index.html
@@ -895,13 +895,14 @@
         <i onmouseover="tip('Change marker base style')" class="icon-map-pin"></i>:
         <input id="markerSize" onmouseover="tip('Change marker size')" value="1" type="range" min="0.1" max="10" step="0.2" class="editRange">
         <input id="markerBase" onmouseover="tip('Change marker base color')" type="color" class="editColor" value="#ffffff">
-        <input id="markerFill" onmouseover="tip('Change marker fill color ')" type="color" class="editColor" value="#000000">
+        <input id="markerFill" onmouseover="tip('Change marker fill color')" type="color" class="editColor" value="#000000">
         <br><i onmouseover="tip('Change marker icon style')" class="icon-star"></i>:
         <input id="markerIconFill" onmouseover="tip('Change marker icon fill color')" type="color" class="editColor" value="#000000">
         <input id="markerIconStrokeWidth" onmouseover="tip('Change marker icon stroke width')" value="0" type="number" min="0" max="2" step="0.1" style="width: 40px;">
         <input id="markerIconStroke" onmouseover="tip('Change marker icon stroke color')" type="color" class="editColor" value="#000000">
       </div>
 
+      <button id="markerToggleBubble" onmouseover="tip('Toggle marker bubble display')" class="icon-info-circled"></button>
       <button id="markerLegendButton" onmouseover="tip('Edit place legend (free text notes)')" class="icon-edit"></button>
       <button id="markerAdd" onmouseover="tip('Add additional marker of that type')" class="icon-plus"></button>
       <button id="markerRemove" onmouseover="tip('Remove the marker')" class="icon-trash"></button>
diff --git a/script.js b/script.js
index 138ad4bc..abd3f6ba 100644
--- a/script.js
+++ b/script.js
@@ -3946,6 +3946,8 @@ function fantasyMap() {
     markerSize.value = elSelected.attr("data-size");
     markerBase.value = symbol.select("path").attr("fill");
     markerFill.value = symbol.select("circle").attr("fill");
+    let opacity = symbol.select("circle").attr("opacity");
+    markerToggleBubble.className = opacity === "0" ? "icon-info" : "icon-info-circled";
 
     let table = document.getElementById("markerIconTable");
     let selected = table.getElementsByClassName("selected");
@@ -4315,6 +4317,20 @@ function fantasyMap() {
       d3.select("#defs-markers").select(id).select("text").attr("stroke", this.value);
     });
 
+    // toggle marker bubble display
+    document.getElementById("markerToggleBubble").addEventListener("click", function() {
+      let id = elSelected.attr("href");
+      let show = 1;
+      if (this.className === "icon-info-circled") {
+        this.className = "icon-info";
+        show = 0;
+      } else {
+        this.className = "icon-info-circled";;
+      }
+      d3.select(id).select("circle").attr("opacity", show);
+      d3.select(id).select("path").attr("opacity", show);
+    });
+
     // open legendsEditor
     document.getElementById("markerLegendButton").addEventListener("click", function() {
       let id = elSelected.attr("id");