How to Add a Marker to a Google Map

In Google Maps, markers overlay a map and display an icon that identifies a location. Here's how to add a marker to a map.

  1. Start with the following basic Google Map. 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);
    	}
    	</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>
    

    In this how-to, I'll use a marker to point to the location of the Golden Gate Bridge on the map.

  3. Inside the initMap() function, create an object to hold the latitude and longitude of the Golden Gate Bridge.
  4. 
    <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 goldenGate = {lat: 37.8199,lng: -122.4783};
    
    }
    </script>
    
  5. Create a marker object.
  6. 
    <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();
    
    }
    </script>
    
  7. Pass an options object into the Marker constructor function, specifying the position of the marker, the map on which to place the marker, and the label for the marker.
  8. 
    <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>
    
  9. Open your web page in a browser to see the results. Hover your mouse pointer over the marker to see the marker label.
    Map with a marker on the Golden Gate Bridge
  10. You can find detailed documentation for markers at developers.google.com/maps/documentation/javascript/markers.

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.