Добавить маркер в стиле CSS в карты google

Ответ 1

Используйте RichMarker для Карт Google v3 - использование:

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

Пример JSFiddle.

Ответ 2

Здесь измененная версия импульсного аниматора, о котором вы говорили, что я использую это, работает. В основном вы создаете оверлей (https://developers.google.com/maps/documentation/javascript/customoverlays), которые затем позиционируете, прикрепляя к точке маркера.

Чтобы создать булавку и анимацию, созданную из CSS, я считаю, что вам нужно будет установить для пин-образа пустой и правильный размер с чем-то вроде этого, если вы хотите, чтобы его можно было щелкнуть через маркер.

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),
  };

Затем убедитесь, что наложение нарисовано на правильной панели

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

Моя реализация, представленная ниже, немного отличается, потому что я решил использовать пин-образ и только часть анимации. Я собираюсь использовать overlayShadow, поэтому анимация идет за изображение, которое я использую для маркера.

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;
 }
}

Ответ 3

Я использовал RichMarker для этого в моем проекте 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
}); 

И трюк заключался в том, как импортировать файл js. В каталоге src я добавил файл js в index.html следующим образом:

<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>

Ответ 4

curMarker = новый RichMarker ({                   позиция: pointToMoveTo,                   карта: карта,                   содержание: '',               });