CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Sasha
Sasha

Reputation: 8695

Google Maps v3 custom marker icon is in center and does not keep its position on map

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?

Upvotes: 1

Views: 1090

Answers (1)

geocodezip
geocodezip

Reputation: 161324

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

screenshot of resulting map

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>

Upvotes: 1

Related Questions