Add pulsing animation

robertmarsal · Oct 16, 2016 · 6067d00 · 6067d00
1 parent 7f0951f
commit 6067d00
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/css/app.css b/css/app.css
@@ -6,3 +6,26 @@ html, body {
 #map {
     height: 100%;
 }
+
+#markers canvas {
+    animation: pulsate 3000ms ease-out infinite;
+    border-radius: 20px;
+    border: 1px solid #2b2b2b;
+}
+
+@keyframes pulsate {
+    0% {
+        box-shadow: none
+    }
+    50% {
+        box-shadow:
+                    inset 0 0 3px #CC0052,
+                    inset 0 0 3px #CC0052,
+                          0 0 3px #CC0052,
+                          0 0 3px #CC0052,
+                          0 0 3px #CC0052;
+    }
+    100% {
+        box-shadow: none
+    }
+}
diff --git a/js/app.js b/js/app.js
@@ -96,6 +96,7 @@ var mapOptions = {
 function initMap() {
     var map = new google.maps.Map(document.getElementById('map'), mapOptions);
     addMarkers(map, data);
+    addOverlayView(map);
 }
 
 function addMarkers(map, data) {
@@ -105,11 +106,21 @@ function addMarkers(map, data) {
             title: data[i].title,
             icon: {
                 path: google.maps.SymbolPath.CIRCLE,
-                scale: 3,
-                strokeWeight: 2,
+                scale: 2,
+                strokeWeight: 3,
                 strokeColor: '#FF0066',
+                fillColor: '#FF0066',
+                fillOpacity: 1,
             },
             map: map
         });
     }
 }
+
+function addOverlayView(map) {
+    var overlayView = new google.maps.OverlayView();
+    overlayView.draw = function () {
+        this.getPanes().markerLayer.id = 'markers';
+    };
+    overlayView.setMap(map);
+}