Google map с пользовательским маркером CSS-анимация

Question

Как добавить пользовательскую анимацию маркера css в карту Google? прежде чем я спрошу об этом, но никто не ответит и просто не понравится моему вопросу. Наконец, я нахожу ответ, и я хочу поделиться им с другими, кому нужен этот трюк.

Answer 1

http://jsbin.com/vujenuwifo

function CustomMarker(latlng, map) { 
 
    this.latlng_ = latlng; 
 

 
    // Once the LatLng and text are set, add the overlay to the map. This will 
 
    // trigger a call to panes_changed which should in turn call draw. 
 
    this.setMap(map); 
 
} 
 

 
CustomMarker.prototype = new google.maps.OverlayView(); 
 

 
CustomMarker.prototype.draw = function() { 
 
    var me = this; 
 

 
    // Check if the div has been created. 
 
    var div = this.div_; 
 
    if (!div) { 
 
    // Create a overlay text DIV 
 
    div = this.div_ = document.createElement('DIV'); 
 
    // Create the DIV representing our CustomMarker 
 
    div.style.border = "none"; 
 
    div.style.position = "absolute"; 
 
    div.style.paddingLeft = "0px"; 
 
    div.style.cursor = 'pointer'; 
 

 
    var dv = document.createElement("div"); 
 
    dv.className='pin bounce' 
 
    div.appendChild(dv); 
 

 
    var dvx= document.createElement("div"); 
 
    dvx.className='pulse' 
 
    div.appendChild(dvx); 
 
    ; 
 

 
    // Then add the overlay to the DOM 
 
    var panes = this.getPanes(); 
 
    panes.overlayImage.appendChild(div); 
 
    } 
 

 
    // Position the overlay 
 
    var point = this.getProjection().fromLatLngToDivPixel(this.latlng_); 
 
    if (point) { 
 
    div.style.left = point.x + 'px'; 
 
    div.style.top = point.y + 'px'; 
 
    } 
 
}; 
 

 

 
var map; 
 
var overlay; 
 
function initialize() { 
 
    var opts = { 
 
    zoom: 19, 
 
    center: new google.maps.LatLng(35.781481, 51.371445), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    map = new google.maps.Map(document.getElementById("map"), opts); 
 

 
    overlay = new CustomMarker(map.getCenter(), map); 
 

 
}

.pin { 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 50% 50% 50% 0; 
 
    background: #00cae9; 
 
    position: absolute; 
 
    -webkit-transform: rotate(-45deg); 
 
      transform: rotate(-45deg); 
 
    left: 50%; 
 
    top: 50%; 
 
    margin: -20px 0 0 -20px; 
 
} 
 
.pin:after { 
 
    content: ""; 
 
    width: 14px; 
 
    height: 14px; 
 
    margin: 8px 0 0 8px; 
 
    background: #e6e6e6; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
} 
 

 
.bounce { 
 
    -webkit-animation-name: bounce; 
 
      animation-name: bounce; 
 
    -webkit-animation-fill-mode: both; 
 
      animation-fill-mode: both; 
 
    -webkit-animation-duration: 1s; 
 
      animation-duration: 1s; 
 
} 
 

 
.pulse { 
 
    background: #d6d4d4; 
 
    border-radius: 50%; 
 
    height: 14px; 
 
    width: 14px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin: 11px 0px 0px -12px; 
 
    -webkit-transform: rotateX(55deg); 
 
      transform: rotateX(55deg); 
 
    z-index: -2; 
 
} 
 
.pulse:after { 
 
    content: ""; 
 
    border-radius: 50%; 
 
    height: 40px; 
 
    width: 40px; 
 
    position: absolute; 
 
    margin: -13px 0 0 -13px; 
 
    -webkit-animation: pulsate 1s ease-out; 
 
      animation: pulsate 1s ease-out; 
 
    -webkit-animation-iteration-count: infinite; 
 
      animation-iteration-count: infinite; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    box-shadow: 0 0 1px 2px #00cae9; 
 
    -webkit-animation-delay: 1.1s; 
 
      animation-delay: 1.1s; 
 
} 
 

 
@-webkit-keyframes pulsate { 
 
    0% { 
 
    -webkit-transform: scale(0.1, 0.1); 
 
      transform: scale(0.1, 0.1); 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    } 
 

 
    50% { 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
    } 
 

 
    100% { 
 
    -webkit-transform: scale(1.2, 1.2); 
 
      transform: scale(1.2, 1.2); 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    } 
 
} 
 

 
@keyframes pulsate { 
 
    0% { 
 
    -webkit-transform: scale(0.1, 0.1); 
 
      transform: scale(0.1, 0.1); 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    } 
 

 
    50% { 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
    } 
 

 
    100% { 
 
    -webkit-transform: scale(1.2, 1.2); 
 
      transform: scale(1.2, 1.2); 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    } 
 
} 
 

 
@-webkit-keyframes bounce { 
 
    0% { 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    -webkit-transform: translateY(-2000px) rotate(-45deg); 
 
      transform: translateY(-2000px) rotate(-45deg); 
 
    } 
 

 
    60% { 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
    -webkit-transform: translateY(30px) rotate(-45deg); 
 
      transform: translateY(30px) rotate(-45deg); 
 
    } 
 

 
    80% { 
 
    -webkit-transform: translateY(-10px) rotate(-45deg); 
 
      transform: translateY(-10px) rotate(-45deg); 
 
    } 
 

 
    100% { 
 
    -webkit-transform: translateY(0) rotate(-45deg); 
 
      transform: translateY(0) rotate(-45deg); 
 
    } 
 
} 
 

 
@keyframes bounce { 
 
    0% { 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    -webkit-transform: translateY(-2000px) rotate(-45deg); 
 
      transform: translateY(-2000px) rotate(-45deg); 
 
    } 
 

 
    60% { 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
    -webkit-transform: translateY(30px) rotate(-45deg); 
 
      transform: translateY(30px) rotate(-45deg); 
 
    } 
 

 
    80% { 
 
    -webkit-transform: translateY(-10px) rotate(-45deg); 
 
      transform: translateY(-10px) rotate(-45deg); 
 
    } 
 

 
    100% { 
 
    -webkit-transform: translateY(0) rotate(-45deg); 
 
      transform: translateY(0) rotate(-45deg); 
 
    } 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
 
<div id="map" style="width: 850px; height: 480px;">map div</div>