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.

  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
    <!DOCTYPE html>
    <html lang="en">
    	<meta charset="UTF-8">
    	<title>A Basic Map</title>
    		#map {
    			height: 100%;
    		/* Optional: Makes the sample page fill the window. */
    		html, body {
    			height: 100%;
    			margin: 0;
    			padding: 0;
    	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'
    <div id="map"></div>
    <script async defer

  3. 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 = '';
  5. 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
  7. Open your web page in a browser to see the results.
    Map with a custom marker icon
  8. You can find detailed documentation for markers at

Author: Chris Minnick

Chris Minnick, the co-founder of WatzThis?, has overseen the development of hundreds of web and mobile projects for customers from small businesses to some of the world’s largest companies. A prolific writer, Chris has authored and co-authored books and articles on a wide range of Internet-related topics including HTML, CSS, mobile apps, e-commerce, e-business, Web design, XML, and application servers. His published books include Adventures in Coding, JavaScript For Kids For Dummies, Writing Computer Code, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW E-Commerce Designer Certification Bible, and XHTML.

About Webucator

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, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.