1. Home
  2. How-to Articles
  3. How to Add a Custom Icon to a Google Map

How to Add a Custom Icon to a Google Map

  • google plus

In Brief...

In Google Maps, you can use markers to point out a location on a map. By default, Google Maps will use a red marker icon with a curved top and a pointed bottom, as shown in the following image:
default Google Maps marker

Instructions

There may be times when you want to use a custom icon instead of this default one. Here's how to do that.

  1. Start with the following basic Google Map with a default icon. Make sure to replace YOUR_API_KEY in the script tag with your API key that you got from https://developers.google.com/maps.
    2. 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>A Basic Map</title>
	<style>
		#map {
			height: 100%;
		}
		/* Optional: Makes the sample page fill the window. */
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
	</style>
	<script>
	function initMap() {
		var mapOptions = {
			zoom: 8,
			center: new google.maps.LatLng(37.5, -122),
			mapTypeId: 'roadmap'
		};

		var map = new google.maps.Map(document.getElementById('map'), mapOptions);


		var goldenGatePosition = {lat: 37.8199,lng: -122.4783};
		var marker = new google.maps.Marker({
			position: goldenGatePosition,
			map: map,
			title: 'Golden Gate Bridge'
		});

	}
	</script>
</head>
<body>
<div id="map"></div>
<script async defer
		src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

  2. Locate an image that you want to use as the custom icon an assign it to a variable. The size of the image doesnt matter, because Google will automatically scale the image to the correct size. However, simple images with transparent backgrounds and images that are around the right size will look best when used as markers.
    3. 
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
  3. Set the icon property of the marker's options object to the name of the image variable.
    4. 
var marker = new google.maps.Marker({
	position: goldenGatePosition,
	map: map,
	title: 'Golden Gate Bridge',
	icon: image
});
  4. Open your web page in a browser to see the results.
    Map with a custom marker icon

    5. You can find detailed documentation for markers at developers.google.com/maps/documentation/javascript/markers.

Need Ajax Training?

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.

Categories

Courses

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss