Пользовательский значок маркера Google Maps v3 находится в центре и не сохраняет свою позицию на карте

Question

Я пытаюсь добавить FontAwesome значки в качестве маркера на Google Maps. До сих пор я заставлял это работать, но в данный момент значки находятся в середине экрана, они остаются там, несмотря ни на что (они отказываются находиться на выделенных позициях).

Пример кода на этом JsFiddle

JS код:

function FontAwesomeMarker(latlng, map, args) {
  this.latlng = latlng;
  this.args = args;
  this.setMap(map);
}

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

FontAwesomeMarker.prototype.draw = function() {
  var self = this,
    panes = this.getPanes(),
    marker = this.marker;

  if (!marker) {
    marker = this.marker = document.createElement('div');
    marker.className = 'marker';

    var icon = document.createElement('i');
    icon.className = 'fa fa-' + this.args.icon;
    icon.style.fontSize = this.args.fontSize;
    icon.style.color = this.args.color;
    icon.anchorPoint = new google.maps.Point(0, 49)
    marker.appendChild(icon);

    var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
    if (point) {
      marker.style.left = (point.x - 25) + 'px';
      marker.style.top = (point.y - 25) + 'px';
    }

    google.maps.event.addDomListener(marker, "click", function(event) {
      alert('You clicked on a custom marker!');
      google.maps.event.trigger(self, "click");
    });

    panes.overlayImage.appendChild(marker);
  }
};

FontAwesomeMarker.prototype.remove = function() {
  if (this.marker) {
    this.marker.parentNode.removeChild(this.marker);
    this.marker = null;
  }
};

FontAwesomeMarker.prototype.getPosition = function() {
  return this.latlng;
};

function initialize() {
  var myLatlng = new google.maps.LatLng(-33.9, 151.2),
    mapOptions = {
      zoom: 15,
      center: myLatlng,
      disableDefaultUI: true
    };

  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  var markers = [{
      latLan: new google.maps.LatLng(-33.9, 151.2),
      icon: 'cutlery',
      color: '#346698',
      fontSize: '35px'
    },
    {
      latLan: new google.maps.LatLng(-33.8939, 151.207333),
      icon: 'anchor',
      color: '#B90C13',
      fontSize: '35px'
    },
    {
      latLan: new google.maps.LatLng(-33.895, 151.195),
      icon: 'automobile',
      color: '#39A00F',
      fontSize: '35px'
    },
    {
      latLan: new google.maps.LatLng(-33.905, 151.195),
      icon: 'headphones',
      color: '#000',
      fontSize: '35px'
    },
    {
      latLan: new google.maps.LatLng(-33.9039, 151.207333),
      icon: 'child',
      color: '#26C2C3',
      fontSize: '35px'
    },
  ]

  markers.forEach(function(item) {
    new FontAwesomeMarker(
      item.latLan,
      map, {
        icon: item.icon,
        color: item.color,
        fontSize: item.fontSize
      }
    );
  });
}

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

Что я здесь не так делаю?

Answer 1

Вам не хватает marker.style.position = 'absolute';

if (!marker) {
  marker = this.marker = document.createElement('div');
  marker.className = 'marker';
  marker.style.position = 'absolute';
  // <snip>

Чтобы перетащить маркеры на карту, вам также нужно разбить метод draw на части, поместить часть из него в метод onAdd (см. соответствующий вопрос):

FontAwesomeMarker.prototype.onAdd = function() {
      marker = this.marker = document.createElement('div');
      marker.className = 'marker';
    marker.style.position = 'absolute';

      var icon = document.createElement('i');
      icon.className = 'fa fa-' + this.args.icon;
      icon.style.fontSize = this.args.fontSize;
      icon.style.color = this.args.color;
    icon.anchor = new google.maps.Point(0, 49)
      marker.appendChild(icon);
    var panes = this.getPanes();
      panes.overlayImage.appendChild(marker);
}

FontAwesomeMarker.prototype.draw = function() {
    var self = this,
    marker = this.marker;

    var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
        if (point) {
          marker.style.left = (point.x - 25) + 'px';
          marker.style.top = (point.y - 25) + 'px';
        }

      google.maps.event.addDomListener(marker, "click", function(event) {
        alert('You clicked on a custom marker!');           
        google.maps.event.trigger(self, "click");
      });

};

из этого связанного вопроса на HTMLMarker: Добавление пользовательских маркеров (HTMLMarkers) в кластеризацию

подтверждение концепции скрипта

function FontAwesomeMarker(latlng, map, args) {
  this.latlng = latlng;
  this.args = args;
  this.setMap(map);
}

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

FontAwesomeMarker.prototype.onAdd = function() {
  marker = this.marker = document.createElement('div');
  marker.className = 'marker';
  marker.style.position = 'absolute';

  var icon = document.createElement('i');
  icon.className = 'fa fa-' + this.args.icon;
  icon.style.fontSize = this.args.fontSize;
  icon.style.color = this.args.color;
  icon.anchor = new google.maps.Point(0, 49)
  marker.appendChild(icon);
  var panes = this.getPanes();
  panes.overlayImage.appendChild(marker);

  google.maps.event.addDomListener(marker, "click", function(event) {
    alert('You clicked on a custom marker!');
    google.maps.event.trigger(self, "click");
  });
}
FontAwesomeMarker.prototype.draw = function() {
  var self = this,
    marker = this.marker;

  var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
  if (point) {
    marker.style.left = (point.x - 25) + 'px';
    marker.style.top = (point.y - 25) + 'px';
  }
};

FontAwesomeMarker.prototype.remove = function() {
  if (this.marker) {
    this.marker.parentNode.removeChild(this.marker);
    this.marker = null;
  }
};

FontAwesomeMarker.prototype.getPosition = function() {
  return this.latlng;
};

function initialize() {
  var myLatlng = new google.maps.LatLng(-33.9, 151.2),
    mapOptions = {
      zoom: 15,
      center: myLatlng,
      disableDefaultUI: true
    };

  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  var markers = [{
      latLan: new google.maps.LatLng(-33.9, 151.2),
      icon: 'cutlery',
      color: '#346698',
      fontSize: '35px'
    },
    {
      latLan: new google.maps.LatLng(-33.8939, 151.207333),
      icon: 'anchor',
      color: '#B90C13',
      fontSize: '35px'
    },
    {
      latLan: new google.maps.LatLng(-33.895, 151.195),
      icon: 'automobile',
      color: '#39A00F',
      fontSize: '35px'
    },
    {
      latLan: new google.maps.LatLng(-33.905, 151.195),
      icon: 'headphones',
      color: '#000',
      fontSize: '35px'
    },
    {
      latLan: new google.maps.LatLng(-33.9039, 151.207333),
      icon: 'child',
      color: '#26C2C3',
      fontSize: '35px'
    },
  ]

  markers.forEach(function(item) {
    new FontAwesomeMarker(
      item.latLan,
      map, {
        icon: item.icon,
        color: item.color,
        fontSize: item.fontSize
      }
    );
  });
}

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

html,
body,
#map {
  height: 100%;
}

body {
  margin: 0;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div id="map"></div>