How to display dot animation on google maps center?

Question

I want to display a pulsating dot animation which is made with CSS on the map center (user location). Here is the example I am referring to https://codepen.io/anon/pen/ZGvavq

Because I want to put that on top of the map, on the center of the map. I don't know how to do that. The sample doesn't use google maps, it just has an image in the background — Jason, Apr 20 '18 at 19:04
possible duplicate of [Animate Google API Map Marker with CSS?](https://stackoverflow.com/questions/40117327/animate-google-api-map-marker-with-css) — geocodezip, Apr 20 '18 at 21:02
duplicate of [How to use HTML div as a Google Maps marker?](https://stackoverflow.com/questions/49961830/how-to-use-html-div-as-a-google-maps-marker) — geocodezip, Apr 22 '18 at 05:53

score 1 · Answer 1 · answered Apr 20 '18 at 19:18

How 'bout this... I just added jscript to draw a map and used z-index to put your animated dot on top of it...

https://codepen.io/anon/pen/GdJXgj

HTML:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="reset.css" />
        <link rel="stylesheet" href="style.css" />
  <script src="https://maps.googleapis.com/maps/api/js"></script>
        <!--[if IE]>
        <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
<div class="custom-gmap-class" style="z-index:1"></div>
    <div class="dot">
        <div class="centraldot" style="z-index:2"></div>
        <div class="wave" style="z-index:3"></div>
        <div class="wave2" style="z-index:4"></div>
    </div>
    </body>
</html>

CSS:

html,
body,
.custom-gmap-class {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  position: absolute;
}

.dot{
    margin: auto auto;
    width: 300px;
    height: 300px;
    position: relative;
}


.centraldot{
    width: 6px;
    height: 6px;
    background: rgba(32,150,243,1);
    border-radius: 30px;
    position: absolute;
    left:147px;
    top:147px;
    animation: animationDotCentral linear 3s;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
  animation-iteration-count: infinite;
}


.wave{
    width: 260px;
    height: 260px;
    background: rgba(32,150,243,0.4);
    border-radius: 200px;
    position: absolute;
    left:20px;
    top:20px;
    opacity: 0;
    animation: animationWave cubic-bezier(0,.54,.53,1) 3s;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
  animation-delay:0.9s;
  animation-iteration-count: infinite;
}

.wave2{
    width: 260px;
    height: 260px;
    background: rgba(32,150,243,0.4);
    border-radius: 200px;
    position: absolute;
    left:20px;
    top:20px;
    opacity: 0;
    animation: animationWave cubic-bezier(0,.54,.53,1) 3s;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards;
  animation-delay:1.07s;
  animation-iteration-count: infinite;
}


@keyframes animationDotCentral{

    0% {transform:  scale(0) ;  opacity: 0; }
    5% {transform:  scale(2) ;  }
    10% { transform:  scale(0.90) ; opacity: 1; }
    11% { transform:  scale(1.50) ; }
    12% { transform:  scale(1.00) ; }
    28% {background: rgba(32,150,243,1);    }
    29% {background: rgba(255,255,255,1);   }
    31% { background: rgba(32,150,243,1);   }
    33% { background: rgba(255,255,255,1);      }
    35% { background: rgba(32,150,243,1);       }
    90%{ opacity: 1;    }
    100% { opacity: 0;  }
}

@keyframes animationWave{
    0% {    opacity: 0; transform:  scale(0.00);    }
    1% {    opacity: 1;     }
    10% {  background: rgba(32,150,243,0.4);    }
    100% {  transform:  scale(1) ;  background: rgba(32,150,243,0.0); }
}

Script:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementsByClassName("custom-gmap-class")[0], {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

}
google.maps.event.addDomListener(window,"load", initialize);

Thanks so much! But do you know how to make it so the dot stays on the map center, and not the center of the page? Right now, the dot always stays in one spot as I move around the map, I need it so it moves with the map. — Jason, Apr 20 '18 at 19:40

How to display dot animation on google maps center?

1 Answers1