diff --git a/packages/geoview-core/public/templates/default-config.html b/packages/geoview-core/public/templates/default-config.html
index a816c760f9a..7b4a906fe76 100644
--- a/packages/geoview-core/public/templates/default-config.html
+++ b/packages/geoview-core/public/templates/default-config.html
@@ -245,7 +245,7 @@ <h4 id="HLCONF7">7. Load config from function call</h4>
     <script>
       cgpv.api.createMapFromConfig(
         'CONF7',
-        `{
+        JSON.stringify({
               'map': {
                 'interaction': 'dynamic',
                 'viewSettings': {
@@ -273,7 +273,7 @@ <h4 id="HLCONF7">7. Load config from function call</h4>
               'components': ['overview-map'],
               'corePackages': [],
               'theme': 'geo.ca'
-        }`
+        })
       );
 
       // initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready
diff --git a/packages/geoview-core/public/templates/sandbox.html b/packages/geoview-core/public/templates/sandbox.html
index f0329caa05a..97ce867e2f0 100644
--- a/packages/geoview-core/public/templates/sandbox.html
+++ b/packages/geoview-core/public/templates/sandbox.html
@@ -244,7 +244,7 @@ <h4 id="HLCONF1">Sanbox Map</h4>
         // TODO: the delete has a timeout so we need to wait before trying to recreate the map...
         // TO.DOCONT: this should be cleaner
         setTimeout(() => {
-          cgpv.api.createMapFromConfig('sandboxMap', document.getElementById('configGeoview').value)
+          cgpv.api.createMapFromConfig('sandboxMap', document.getElementById('configGeoview').value.replaceAll("'", '"'))
             .then(() => listenToLegendLayerSetChanges('sandboxMap-state', 'sandboxMap'));
         }, 1500);
       });
@@ -320,9 +320,7 @@ <h4 id="HLCONF1">Sanbox Map</h4>
       });
 
       // Create default map==========================================================================================================
-      cgpv.api.createMapFromConfig(
-        'sandboxMap',
-        `{
+      cgpv.api.createMapFromConfig('sandboxMap', JSON.stringify({
               'map': {
                 'interaction': 'dynamic',
                 'viewSettings': {
@@ -353,7 +351,7 @@ <h4 id="HLCONF1">Sanbox Map</h4>
               },
               'corePackages': [],
               'theme': 'geo.ca'
-        }`
+        })
       ).then(() => listenToLegendLayerSetChanges('sandboxMap-state', 'sandboxMap'));
 
       // initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready