even better fix for #73

bashu · Apr 15, 2019 · b5f8694 · b5f8694
1 parent e9b3d4d
commit b5f8694
Showing 1 changed file with 56 additions and 11 deletions.
diff --git a/easy_maps/templates/easy_maps/map.html b/easy_maps/templates/easy_maps/map.html
@@ -1,24 +1,67 @@
 {% with map.latitude|stringformat:"f" as lat %}{% with map.longitude|stringformat:"f" as long %}
 
+{% load i18n %}
+
+{% block map_css %}{% if not map.computed_address %}
+  <style type="text/css">
+    /* ------------ OVERRIDE GOOGLE MAP STYLES --------------- */
+    .gm-err-container {
+        height: 100%;
+        width: 100%;
+        display: table;
+        background-color: #e0e0e0;
+        position: relative;
+        left: 0;
+        top: 0;
+    }
+    .gm-err-content {
+        border-radius: 1px;
+        padding-top: 0;
+        padding-left: 10%;
+        padding-right: 10%;
+        position: static;
+        vertical-align: middle;
+        display: table-cell;
+    }
+    .gm-err-icon {
+        text-align: center;
+    }
+    .gm-err-title {
+        margin: 5px;
+        margin-bottom: 20px;
+        color: #616161;
+        font-family: Roboto,Arial,sans-serif;
+        text-align: center;
+        font-size: 24px;
+    }
+    .gm-err-message {
+        margin: 5px;
+        color: #757575;
+        font-family: Roboto,Arial,sans-serif;
+        text-align: center;
+        font-size: 12px;
+    }
+    /* ------------END OVERRIDE GOOGLE MAP STYLES--------------- */
+  </style>
+{% endif %}{% endblock %}
+
 {% block html %}
   <!-- HTML map container -->
-  <div id="map-canvas-{{ map.pk }}"
-    {% if map.computed_address %}
-      style="width: {{ width|default:"320" }}px; height: {{ height|default:"240" }}px;"
-    {% endif %}
-    class="easy-map-googlemap">
+  <div id="map-canvas-{{ map.pk }}" style="width: {{ width|default:"320" }}px; height: {{ height|default:"240" }}px; position: relative; overflow: hidden;" class="easy-map-googlemap">
     {% block noscript %}{% if map.computed_address %}
       <noscript>
         <img alt="Map of {{ map.address }}" src="https://maps.google.com/maps/api/staticmap?center={{ lat }},{{ long }}&zoom={{ zoom }}&markers={{ lat }},{{ long }}&size={{ width|default:"320" }}x{{ height|default:"240" }}&key={{ api_key }}">
       </noscript>
     {% endif %}{% endblock %}
-    {% if not map.computed_address %}<!-- geocoding error -->{% endif %}
+    {% if not map.computed_address %}
+      <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);"><div class="gm-err-container"><div class="gm-err-content"><div class="gm-err-icon"><img src="//maps.gstatic.com/mapfiles/api-3/images/icon_error.png" draggable="false" style="-moz-user-select: none;"></div><div class="gm-err-title">{% trans "Oops! Something went wrong." %}</div><div class="gm-err-message">{% trans "This page didn't load Google Maps correctly. See the JavaScript console for technical details." %}</div></div></div></div>
+    {% endif %}
   </div>
 {% endblock %}
 
-{% block map_js %}{% if map.computed_address %}
+{% block map_js %}
   <!-- Map creation script -->
-  <script type="text/javascript">
+  <script type="text/javascript">{% if map.computed_address %}
     var initialize_map_{{ map.pk }} = function() {
         var latlng = new google.maps.LatLng({{ lat }}, {{ long }});
         var mapElem = document.getElementById("map-canvas-{{ map.pk }}");
@@ -40,9 +83,11 @@
                 title: "{{ map.address }}"
             });
         {% endblock %}
-     };
-  </script>
-{% endif %}{% endblock %}
+    };
+  {% else %}
+    {% if map.has_exception %}console.exception("{{ map.exception|safe }}");{% endif %}
+  {% endif %}</script>
+{% endblock %}
 
 {% block api_js %}
   <script type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ api_key }}&language={{ language|default:"en" }}{% if map.computed_address %}&callback=initialize_map_{{ map.pk }}{% endif %}" async defer></script>