Google Map RichMarker with observerable
Binding a Grid and a Google Map RichMarker to Knockout.js
HTML
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker.js"></script>
<div class="dot"></div>
<div class="pulse"></div>
CSS
#container {
margin-top: 20px;
margin-left: 30px;
position: relative;
background: #45453f;
}
.pulse {
width: 10px;
height: 10px;
border: 5px solid #f7f14c;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: #f7f14c;
z-index: 10;
position: absolute;
}
.dot {
border: 5px solid #fff601;
background: transparent;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
height: 50px;
width: 50px;
-webkit-animation: pulse 3s ease-out;
-moz-animation: pulse 3s ease-out;
animation: pulse 1.25s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
top: -25px;
left: -25px;
z-index: 1;
opacity: 0;
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(0);
opacity: 0.0;
}
25% {
-moz-transform: scale(0);
opacity: 0.1;
}
50% {
-moz-transform: scale(0.1);
opacity: 0.3;
border: 1px solid #fff601;
}
75% {
-moz-transform: scale(0.5);
opacity: 0.5;
border: 1px solid #fff601;
}
100% {
-moz-transform: scale(1);
opacity: 0.0;
}
}
@-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
10%{
-webkit-transform: scale(1);
opacity: 0.1;
}
20%{
-webkit-transform: scale(2);
opacity: 0.5;
}
30%{
-webkit-transform: scale(3);
opacity: 0.5;
}
40%{
-webkit-transform: scale(4);
opacity: 0.5;
}
50%{
-webkit-transform: scale(5);
opacity: 0.5;
}
60%{
-webkit-transform: scale(6);
opacity: 0.5;
}
70%{
-webkit-transform: scale(7);
opacity: 0.5;
}
80%{
-webkit-transform: scale(8);
opacity: 0.2;
}
90%{
-webkit-transform: scale(9);
opacity: 0.1;
}
100% {
-webkit-transform: scale(10);
opacity: 0.0;
}
}