title: How to add css to google map marker?
body: <p>In google map marker I can do this.The customization happen in icon:[] but I want to custom it in the css file.</p>
  
  <pre><code>var marker = new google.maps.Marker({
    //animation: google.maps.Animation.BOUNCE,
  
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 8.5,
      fillColor: "#ff0000",
      fillOpacity: 0.6,
      strokeWeight: 0.4,
  
    },
  })
  </code></pre>
  
  <p>but what if I want to do the css style like this to animate the marker. In html I can do the class='classname' and go to css to set .classname but in javascript I don't know how to .</p>
  
  <pre><code>.marker {
  margin-top: 20px;
      margin-left: 30px;
      position: relative;
  }
  
  .pulse {
      width: 10px;
      height: 10px;
      border: 5px solid #ffb3b3;
  
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius: 30px;
      background-color: #ff4d4d;
      z-index: 10;
      position: absolute;
  }
  
  .dot {
  position: absolute;
  height: 50px;
      width: 50px;
      top: -25px;
      left: -25px;
      z-index: 2;
      opacity: 0;
      border: 10px solid #ffe6e6;;
      background: transparent;
      -webkit-border-radius: 60px;
      -moz-border-radius: 60px;
      border-radius: 60px;
      -webkit-animation: flash 2s ease-out;
      -moz-animation: flash 2s ease-out;
      animation: flash 2s ease-out;
  -webkit-animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
   }
  
   @-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;}
   75% {-moz-transform: scale(0.5);opacity: 0.5;}
   100% {-moz-transform: scale(1);opacity: 0.0;}
   }
  
   @-webkit-keyframes "flash" {
   0% {-webkit-transform: scale(0);opacity: 0.0;}
   25% {-webkit-transform: scale(0);opacity: 0.1;}
   50% {-webkit-transform: scale(0.1);opacity: 0.3;}
   75% {-webkit-transform: scale(0.5);opacity: 0.5;}
   100% {-webkit-transform: scale(1);opacity: 0.0;}
  }
  </code></pre>
  
  <p>Is it possible to add css to javascript and how ?
  my full code : <a href="https://drive.google.com/open?id=1XQEiuQJkBHnO2fX9hDWApfMtwTCYZpDq" rel="nofollow noreferrer">https://drive.google.com/open?id=1XQEiuQJkBHnO2fX9hDWApfMtwTCYZpDq</a></p>
  
  <p>here is the result I want it to be.
  <a href="https://i.stack.imgur.com/wArrz.png" rel="nofollow noreferrer">result</a></p>