How to Add a Marker to a Google Map

  • google plus

In Brief...

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.

Instructions

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