maps

resources/views/app/admin/patients-maps.blade.php

@@ -0,0 +1,69 @@
+<?php
+ $patientEngagementColorCodes = @Config::get('constants.client_engagement_status_color_codes');
+?>
+
+<div id="map-canvas" style="height:700px;width:100%;"></div>
+<div class="px-3 pt-3 d-flex align-items-center">
+    {{$patients->withQueryString()->links()}}
+    <div class="ml-4 mb-3">Showing <b>{{$patients->firstItem()}}</b> to <b>{{$patients->lastItem()}}</b> (page {{$patients->currentPage()}}) of <b>{{$patients->total()}}</b> patients</div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/markerclustererplus/2.1.4/markerclusterer.min.js"></script>
+<script>
+    (function () {
+
+      function init() {
+        var mapOptions = {
+          center: {
+            lat: 38.129469,
+            lng: -101.111794
+          },
+          zoom: 5,
+          mapTypeId: google.maps.MapTypeId.ROADMAP,
+        };
+        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
+
+        var markers = [];
+        var locations = [];
+
+        var addresses = [
+
+              {address: "4 FORGE HILL RD PERRY HALL, MD"},
+        ];
+        for (var x = 0; x < addresses.length; x++) {
+          var location = ['<center><a href=""><strong></strong></a><br />', 38.129469, -101.111794, 0]
+          locations.push(location);
+          addMarkers(locations);
+        };
+
+        function addMarkers(_locations) {
+          var infowindow = new google.maps.InfoWindow();
+          for (var i = 0; i < _locations.length; i++) {
+            var marker = new google.maps.Marker({
+              position: new google.maps.LatLng(_locations[i][1], _locations[i][2]),
+              map: map
+            });
+
+            google.maps.event.addListener(marker, 'click', (function(marker, i) {
+              return function() {
+                infowindow.setContent(locations[i][0]);
+                infowindow.open(map, marker);
+              }
+            })(marker, i));
+            markers.push(marker);
+            if (markers.length == addresses.length) {
+              callClusterer();
+            }
+          }
+        };
+
+        function callClusterer() {
+          new MarkerClusterer(map, markers);
+        }
+      }
+      window.init = init;
+
+        addMCInitializer('admin-patients-maps', init, '#admin-patients-maps');
+    }).call(window);
+</script>
+<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTla7vZLk795evCO0Wq2x4qs5Ygwg-iec&callback=init&v=weekly" defer></script>

resources/views/app/admin/patients.blade.php

@@ -13,7 +13,7 @@
                 <div class="p-3">
                     @include('app.admin.patients_filters')
                 </div>
-                @include('app.admin.patients-table-extended')
+                @include('app.admin.patients-maps')
             </div>
         </div>
     </div>