Step by step tutorial to customize your Google Map markers

Have you ever wondered about how can you customize the markers for your google maps like this:
preview

I will not spend that much time to tell you why you should customize the markers for the website you created. It is more personalized and styled to fit into your websites theme. It will also boost the credibility of your website, or how visual appealing it looks by putting a well-designed logo in the location of your company.

Ironically, I just told you why you should. XD. Moving on.

At the end of this post, there is a demo and the full work for the javascript, but I do recommend you to follow the steps and make your own markers. Lets get started.

Getting Started

This tutorial is a shortcut for customizing markers on Google Map, it is for someone who is not familiar with editing that app. To get it started, we need to import and utilize their SDK.

First, in your HTML page, create a div with an ID of “map-canvas” as the container of your Google Map and specify the style for it.

HTML

	<div id="map-canvas"></div>

CSS

	#map-canvas {
		display: block;
		height: 600px;
		background-color: #CCC;
	}

Then add the Google Map javascript into your site.

<script type="text/javascript" src="assets/js/google-map.js"></script>

Now lets initialize the default map for your #map-canvas div. Put this script in a <script> tag right after the last element we added.

var map;

function initialize(){
	var mapCanvas = document.getElementById('map-canvas');
	var mapOptions = {
		center: new google.maps.LatLng(53.5463017,-113.5206203), // Somewhere in Edmonton
		zoom: 16,
		zoomControl: false,
		scaleControl: false,
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}

	map = new google.maps.Map(mapCanvas, mapOptions);

	// keep going here ...
}

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

Defining your map object

After setting the “environment” up, you should be able to see a default map in your webpage which contains all your defined settings.

Now, it’s time to customize your map. Find the places that I marked “//keep going here” and start customizing.

The next thing we need to do is create an object called “place” which will contain all the information of your markers. For example, the position, how the pin is going to look like, the name and the coordinates of the marker, etc.

var places = {
	restaurant: {
		label: 'restaurants',
		checked: true,
		icon: 'assets/images/dining-pin.png?ver=1542103183',
		items: [
			['Red Robin Gourmet Burgers', 53.545866, -113.515115],
			['Hudsons Downtown', 53.546522, -113.515061],
			['Back Home Fish & Chips', 53.5464069,-113.5209359]
		]
	},
	shopping: {
		label: 'shopping',
		checked: true,
		icon: 'assets/images/shopping-pin.png?ver=1542103183',
		items: [
			['Safeway', 53.546773, -113.518565],
			['Longstreet Shopping Centre', 53.546071, -113.520818],
			['Staples', 53.547436, -113.525217]
		]
	},
	services: {
		label: 'services',
		check: true,
		icon: 'assets/images/services-pin.png?ver=1542103183',
		items: [
			['BMO', 53.546001, -113.517213],
			['TELUS', 53.545902, -113.516231],
			['Kal Tire', 53.546052, -113.520239]
		]
	}
}

Most of the stuff here is pretty straight forward, the only question remaining is how can you retrieve the coordinates of the place you want. I recommend going to this link from Google to find it out:

Last but not least, we need to apply the “places” object on our map to make it work:

function addMarker() {
	// console.log("add marker");
	// console.log(places);
	// console.log("details:"+places["restaurant"]["items"]);

	$.each(places, function(key, value) {
		console.log(key);

		items = places[key]["items"];
		console.log(items);

		for (var i = 0; i < items.length; i ++) {
			position = new google.maps.LatLng(items[i][1], items[i][2]);

			var marker = new google.maps.Marker({
				position: position,
				icon: places[key]["icon"],
				map: map
			});
		}
	});
}
addMarker();

In this “addMarker()” function, we get each key from “places” object, retrieve the data from it, and add them into your map object.

You are done! The finalized javascript should look like this:

// <![CDATA[
var map;

	function initialize(){
		var mapCanvas = document.getElementById('map-canvas');
	 	var mapOptions = {
          center: new google.maps.LatLng(53.5463017,-113.5206203),
          zoom: 16,
          zoomControl: false,
          scaleControl: false,
          scrollwheel: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

		map = new google.maps.Map(mapCanvas, mapOptions);

		var places = {
			restaurant: {
				label: 'restaurants',
				checked: true,
				icon: 'assets/images/dining-pin.png?ver=1542103183',
				items: [
					['Red Robin Gourmet Burgers', 53.545866, -113.515115],
					['Hudsons Downtown', 53.546522, -113.515061],
					['Back Home Fish & Chips', 53.5464069,-113.5209359]
				]
			},
			shopping: {
				label: 'shopping',
				checked: true,
				icon: 'assets/images/shopping-pin.png?ver=1542103183',
				items: [
					['Safeway', 53.546773, -113.518565],
					['Longstreet Shopping Centre', 53.546071, -113.520818],
					['Staples', 53.547436, -113.525217]
				]
			},
			services: {
				label: 'services',
				check: true,
				icon: 'assets/images/services-pin.png?ver=1542103183',
				items: [
					['BMO', 53.546001, -113.517213],
					['TELUS', 53.545902, -113.516231],
					['Kal Tire', 53.546052, -113.520239]
				]
			}
		}

		function addMarker() {
			// console.log("add marker");
			// console.log(places);
			// console.log("details:"+places["restaurant"]["items"]);

			$.each(places, function(key, value) {
				console.log(key);

				items = places[key]["items"];
				console.log(items);

				for (var i = 0; i
Lucius Yu

About 

Lucius is a Software Developer at LoginRadius. He was born and raised in China, but came to Edmonton to graduate from the University of Alberta, double majoring in Computer Sciences and Mathematics. Besides coding, which is his real passion, he enjoys playing ping pong and swimming.