Ajouter un marqueur CSS à Google Maps

Quelqu'un peut-veuillez indiquer comment je pourrais ajouter cette animation marqueur au-dessous de l'API google maps.

Ci-dessous est le standard de l'api google maps code avec l'option de donner la source de l'image pour le marqueur (icône).

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: marker.png,         //Option for setting the marker source
      title: 'Hello World!'
  });
}

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

source d'informationauteur kurrodu

  1. 12

    Utilisation RichMarker pour Google Maps v3 - utilisation: 

    curMarker = new RichMarker({
    position: new google.maps.LatLng(position),
    map: map,
    content: '<div id="foo">Bar</div>'
});

    JSFiddle exemple.

  2. 0

    J'ai utilisé RichMarker pour cela dans mon Angular2 Ionic3 projet.

    let marker = new RichMarker({
  position: new google.maps.LatLng(markerData.lat, markerData.lng),
  map: this.map,
  content: '<div class="richmarker-wrapper"><center><img class="marker-image" src="' + image +'"></img><p class="marker-nickname">' + markerData.story.user.nickName + '</p></center></div>',
  shadow: 0
});

    Et le truc est de savoir comment importer le fichier js. Dans le répertoire src, j'ai ajouté le fichier js à la index.html comme ceci:

    <script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=MyApiKEY"></script>
<script async defer src="assets/js/richmarker.js"></script>
  3. -1
    curMarker = new RichMarker({
    position: pointToMoveTo,
    map: map,
    content: '<div class="pin2 bounce2"></div><div class="pulse2"></div>',
});