How to Add a Custom Icon to a Google Map

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

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

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.


<!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>

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.


var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

Set the icon property of the marker's options object to the name of the image variable.


var marker = new google.maps.Marker({
	position: goldenGatePosition,
	map: map,
	title: 'Golden Gate Bridge',
	icon: image
});

Open your web page in a browser to see the results.

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