Google Maps v3 自定义标记图标位于中心，不会在地图上保持其位置

Question

I am trying to implement FontAwesome icons as a marker on Google Maps. So far I made it work, but at the moment icons are in the middle of the screen, at they stay there no matter what (they refuse to be on the dedicated positions).

Example of the code at this JsFiddle

JS code:

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

What am I doing wrong here?

Answer 1

You are missing marker.style.position = 'absolute';

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

To get the markers to drag with the map, you also need to break the draw method apart, put some of it into an onAdd method (see the related question):

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

};

from this related question on HTMLMarker: Adding Custom Markers (HTMLMarkers) to Clustering

proof of concept fiddle

 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>