Custom Google Map Marker Using Font Awesome Icons

28 June 18 Ben Dickman

I have worked with Google maps quite a lot lately and was surprised how difficult is was to change the marker/pin that appears on the map. The default marker that is used by Google is, in my opinion, very ugly and looks dated.

I had a requirement to user standard HTML in order to represent the marker rather than an image file, this approach allows for anything to be used to represent a marker. I used a font awesome icon as my marker but you will see how easy it is to change this to display anything you desire.

The original code that I have modified comes from Humaan

Standard Map Marker

google map default marker

Custom Map Marker

google map default marker

The Code

The original custom map marker code, from Humaan, was simply a div that had a width, height and background colour set. I imagine this was purely to highlight a custom marker could be achieved. I modified the code to allow for html content to be passed into the custom marker. You can see I have also added a couple of events, mouseover and mouseout. I used these to show a popup to the user to display some additional information, you can obviously do whatever you want. I would also suggest you play with different events and see what you can achieve. 

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

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

CustomMarker.prototype.draw = function() {
	
	var self = this;
	
	var div = this.div;
	
	if (!div) {
	
		div = this.div = document.createElement('div');
		
		div.className = 'marker';
		
		div.style.position = 'absolute';

                //set the values passed in from the creation of the custom marker
		div.innerHTML = this.args.htmlContent;
		div.style.color = this.args.color;
		
		if (typeof(self.args.marker_id) !== 'undefined') {
			div.dataset.marker_id = self.args.marker_id;
		}

	        //add events to the marker

		google.maps.event.addDomListener(div, "mouseover", function (e) {
		    //do something on mouseover, maybe show some tooltip text
		})

		google.maps.event.addDomListener(div, "mouseout", function (e) {
		    //do something on mosueout, hide the tooltip text
		})

		
		var panes = this.getPanes();
		panes.overlayImage.appendChild(div);
	}
	
	var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
	
        //position the custom marker on the map
	if (point) {
		div.style.left = (point.x) + 'px';
		div.style.top = (point.y) + 'px';
	}
};

CustomMarker.prototype.remove = function() {
	if (this.div) {
		this.div.parentNode.removeChild(this.div);
		this.div = null;
	}	
};

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

Initiate The Google Map

In order to create the custom marker, you need to instantiate a new CustomMarker object and supply the markup you want to use in order to display your marker. In this example I have used a font awesone icon (fa-map-marker) but you can use anything you want. I have also added a tooltip parameter to highlight the kind of additional funtionality you can add. In this scenario, you could add a mouse over event to display the tooltip text. 

function initialize() {

	var myLatlng = new google.maps.LatLng(-31.9546781,115.852662);
	var mapOptions = {
		zoom: 14,
		center: myLatlng,
		disableDefaultUI: false
	}
	
	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	
	overlay = new CustomMarker(
		myLatlng, 
		map,
		{
		    marker_id: '123',
		    htmlContent: 'your_markup_here',
		    color: '#DF1E1E',
                    tooltip: 'marker tooltp'
		}
	);
}

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

Let's wrap up

Starting with the original code from Humaan, you can see it was fairly simple to modify the code to allow for HTML to be pass in to represent your custom marker. I used a font awesome icon for my Google map, which in my opinion is an improvement over the default.

I have also shown how you can hook up events to the custom maker which can be used to add additional functionality such as tooltips. Have a play and see what you can come up with!

See you again, Ben.