Add files via upload

Author: bdcoder2

v180/ex0/index.html

@@ -48,11 +48,25 @@
 .form_div {
    display: inline-block;
    padding: 6px;
-   margin: 0 0 0 12px;
+   text-align: center;
+   margin: 0;
 }
+
+.inst_div {
+   text-align: center;
+   margin: 0;
+   padding: 6px; 
+}
+
+.mzl_div {
+   text-align: center;
+   margin: 0;
+   padding: 4px;
+}
+
 .map_viewport {
    border: 1px solid #AAAAAA;
-   height: 560px;
+   height: 512px;
    width: 100%;
    position: relative;
    background: #EFEFEF;
@@ -71,6 +85,8 @@
       <section>
          <div class="center_div">
             The map below is using the grid clusterer with 200 random data points.
+         </div>
+         <div class="center_div">
             <form id="frm1" onsubmit="tester_obj.config_update( event );"> 
                <div class="form_div">
                   Tile size (pixels) height x width: 
@@ -105,13 +121,13 @@
                </div>
             </form>
          </div>
-      </section>
-      <div id="mvp" class="map_viewport"></div>
-      <section id="log">
-         <div class="center_div">
+         <div class="inst_div">
             <b>Click on the map, a cluster marker or grid point marker to view details.</b>
          </div>
       </section>
+      <div id="mvp" class="map_viewport"></div>
+      <div id="mzl" class="mzl_div"></div>
+      <section id="log"></section>
    </main>
    <script>
       async function map_init() {

v180/ex0/tester.js

@@ -44,6 +44,7 @@ class tester {
             alert('* Unable to create map: ' + ex.toString());
             return;
         }
+        this.map_zoom_level_show();
         // Set clusterer options and create clusterer ...
         clusterer_opts = {
             cluster_marker_click_handler: this.cluster_marker_click_handler.bind(this),
@@ -55,6 +56,8 @@ class tester {
         this.clusterer.auto_redraw_event_add('idle');
         // Redraw tiles once all the tiles are loaded ...
         google.maps.event.addListenerOnce(this.map, 'tilesloaded', () => { this.clusterer.redraw(); });
+        // Add map zoom handler ...
+        google.maps.event.addListener(this.map, 'zoom_changed', this.map_zoom_level_show.bind(this));
         // Add map click handler ...
         google.maps.event.addListener(this.map, 'click', this.map_click_handler.bind(this));
     }
@@ -341,4 +344,27 @@ class tester {
         s += '</ul>';
         $('#log').html(s);
     }
+    /*
+    ---------------------------------------------------------------------
+    Map zoom handler.
+     
+    PARAMETERS:
+     
+       Name: evt
+       Desc: A grid_point_marker_click_event object
+ 
+    RETURNS:
+     
+       None
+ 
+    ---------------------------------------------------------------------
+    */
+    map_zoom_level_show() {
+        let s;
+        let z;
+        // Show map zoom level ...
+        z = this.map.getZoom();
+        s = '<b>Map Zoom Level</b>: ' + z.toString();
+        $('#mzl').html(s);
+    }
 }