web-dev-qa-db-fra.com

Ajouter un marqueur de style CSS à Google Maps

Quelqu'un peut-il informer s'il vous plaît comment je pourrais ajouter ce marqueur animé à l'API Google Maps ci-dessous. 

Ci-dessous, le code standard de l'API Google Maps avec l'option de donner la source de l'image au 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);
javascriptcsscss3google-mapsgoogle-maps-api-3
11
kurrodu

Utiliser RichMarker pour Google Maps v3 - usage: 

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

Exemple JSFiddle.

12
Angel Romero

Voici une version modifiée de l'animateur Pulse que vous avez mentionné et que j'utilise qui fonctionne. En gros, vous créez une superposition ( https://developers.google.com/maps/documentation/javascript/customoverlays ) que vous positionnez ensuite en l'attachant à un point de repère.

Pour que l’épingle et l’animation soient créées à partir de CSS, j’estime que vous devez définir l’image d’épingle vide et la mettre à la bonne taille avec quelque chose comme ceci si vous voulez qu’elle soit cliquable à travers le marqueur.

var image = {
  url: '/images/blank.png',
  size: new google.maps.Size(100, 39),
  Origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(50, 39),
  };

Ensuite, assurez-vous que la superposition est dessinée sur le bon volet

var pane = this.getPanes().overlayImage; (contains the marker foreground images.)

Ma mise en œuvre fournie ci-dessous est légèrement différente car j'ai décidé d'utiliser une image pin et uniquement la partie animation. Je vais dessiner sur le calque de superposition afin que l'animation passe derrière l'image que j'utilise pour le marqueur.

JS

var animatedOverlay;

// Define the animated overlay, derived from google.maps.OverlayView
function PinAnimation(opt_options) {
    this.setValues(opt_options);
    var div = this.div_ = document.createElement('div');
    div.id = 'holder';

    var span = this.span_ = document.createElement('span');
    span.className = 'Pulse';
    div.appendChild(span);
};

PinAnimation.prototype = new google.maps.OverlayView;

PinAnimation.prototype.onAdd = function() {

     //Overlay shadow puts the animation behind the pin
     var pane = this.getPanes().overlayShadow;
     pane.appendChild(this.div_);

     // Ensures the PinAnimation is redrawn if the text or position is changed.
     var me = this;
     this.listeners_ = [
          google.maps.event.addListener(this, 'position_changed',
               function() { me.draw(); }),
     ];
};

// Implement onRemove
PinAnimation.prototype.onRemove = function() {
     this.div_.parentNode.removeChild(this.div_);

     // PinAnimation is removed from the map, stop updating its position/any other listeners added.
     for (var i = 0, I = this.listeners_.length; i < I; ++i) {
          google.maps.event.removeListener(this.listeners_[i]);
     }
};

// Set the visibility to 'hidden' or 'visible'.
PinAnimation.prototype.hide = function() {
    if (this.div_) {
        this.div_.style.visibility = 'hidden';
    }
};
PinAnimation.prototype.show = function() {
    if (this.div_) {
        this.div_.style.visibility = 'visible';
    }
};

// Implement draw
PinAnimation.prototype.draw = function() {
    var topPadding = 0;
    var sizeHeight = 50
    var sizeWidth = sizeHeight;
    var centerX = sizeWidth/2;
    var centerY = sizeHeight/2;

     var projection = this.getProjection();
     var position = projection.fromLatLngToDivPixel(this.get('position'));
     var div = this.div_;
//Adjust overlay position to be centered over the point
     div.style.left = position.x-centerX + 'px';
     div.style.top = position.y-topPadding-centerY + 'px';
     div.style.display = 'block';
};

//Set marker and draw overlay
function setMarker(location) {

    var maps_location = new google.maps.LatLng(location.latitude, location.longitude);

    var marker = new google.maps.Marker({
        position: map_location,
        map: map,
        icon: marker.png,
        title: 'Hello World!'
        });

    animatedOverlay = new PinAnimation({
        map: map
    });
    animatedOverlay.bindTo('position', marker, 'position');
    animatedOverlay.show();
}

CSS

#holder {
height: 50px;
width: 50px;
position: absolute;
transform: rotateX(55deg);
background: transparent;
}
.Pulse {
    border: 10px solid #5bc0de;
    background: transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    -webkit-animation: Pulse 1s ease-out;
    -moz-animation: Pulse 1s ease-out;
    animation: Pulse 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    position: absolute;
    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;
 }
 75% {
    -moz-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -moz-transform: scale(1);
    opacity: 0.0;
 }
}
@-webkit-keyframes Pulse {
 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;
 }
}
2
ashare80

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

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 était de savoir comment importer le fichier js. Dans le répertoire src, j'ai ajouté le fichier js au fichier 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>
0
Wasyster