diff --git a/.replit b/.replit
index 3520ba63..3a20e06b 100644
--- a/.replit
+++ b/.replit
@@ -62,6 +62,10 @@ externalPort = 3000
 localPort = 45245
 externalPort = 3001
 
+[[ports]]
+localPort = 46519
+externalPort = 3002
+
 [deployment]
 deploymentTarget = "autoscale"
 run = [
diff --git a/templates/parks/park_detail.html b/templates/parks/park_detail.html
index dbc554aa..cf37da26 100644
--- a/templates/parks/park_detail.html
+++ b/templates/parks/park_detail.html
@@ -186,7 +186,19 @@
             {% if park.location.exists %}
                 <div class="p-optimized mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
                     <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Location</h2>
-                    <div id="park-map" class="relative rounded-lg" style="z-index: 0;"></div>
+                    {% with location=park.location.first %}
+                    {% if location.latitude is not None and location.longitude is not None %}
+                    <div id="park-map" class="relative rounded-lg" style="z-index: 0;"
+                         data-latitude="{{ location.latitude|default_if_none:'' }}"
+                         data-longitude="{{ location.longitude|default_if_none:'' }}"
+                         data-park-name="{{ park.name|escape }}"></div>
+                    {% else %}
+                    <div class="relative rounded-lg p-4 text-center text-gray-500 dark:text-gray-400">
+                        <i class="fas fa-map-marker-alt text-2xl mb-2"></i>
+                        <p>Location information not available</p>
+                    </div>
+                    {% endif %}
+                    {% endwith %}
                 </div>
             {% endif %}
 
@@ -262,22 +274,13 @@
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 <script src="{% static 'js/park-map.js' %}"></script>
 
-<!-- Map data container -->
-{% with location=park.location.first %}
-{% if location.latitude and location.longitude %}
-<div id="map-data" 
-     data-latitude="{{ location.latitude|floatformat:6|default:'' }}"
-     data-longitude="{{ location.longitude|floatformat:6|default:'' }}"
-     data-park-name="{{ park.name|escapejs|default:'' }}"
-     style="display: none;"></div>
-
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    var mapDataElement = document.getElementById('map-data');
-    if (mapDataElement) {
-        var latitude = parseFloat(mapDataElement.dataset.latitude);
-        var longitude = parseFloat(mapDataElement.dataset.longitude);
-        var parkName = mapDataElement.dataset.parkName;
+    var mapElement = document.getElementById('park-map');
+    if (mapElement && mapElement.dataset.latitude && mapElement.dataset.longitude) {
+        var latitude = parseFloat(mapElement.dataset.latitude);
+        var longitude = parseFloat(mapElement.dataset.longitude);
+        var parkName = mapElement.dataset.parkName;
         
         if (!isNaN(latitude) && !isNaN(longitude) && parkName) {
             initParkMap(latitude, longitude, parkName);
@@ -286,6 +289,4 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 </script>
 {% endif %}
-{% endwith %}
-{% endif %}
 {% endblock %}