How to Create a Google Map Object with the Maps JavaScript API

  • google plus

In Brief...

To use the Google Maps JavaScript API, you first need to create an instance of the Google Maps object. Here's how:

Instructions

  1. Start with a basic HTML5 template, like this:
  2. 
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>A Basic Map</title>
    </head>
    <body>
    
    </body>
    </html>
    
  3. Add the Google Maps code by using a script tag right above <body>. Replace YOUR_API_KEY with the API key that you got from Google.
  4. 
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>A Basic Map</title>
    </head>
    <body>
    <script async defer
    		src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
    </body>
    </html>
    
  5. Create an empty div element above the script element and give it an id of "map". This is where your map will be displayed.
  6. 
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>A Basic Map</title>
    </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>
    
  7. Create a script element in the head of your page and put function called initMap inside it.
  8. 
    function initMap() {
    
    }
    
  9. Create a mapOptions object and set values for the properties you want to modify. You can find a list of available properties here: https://developers.google.com/maps/documentation/javascript/reference#MapOptions. In this example, we'll specify values for the zoom property, the center property, and the mapTypeId property.
  10. 
    var mapOptions = {
    	zoom: 8,
    	center: new google.maps.LatLng(44, -110),
    	mapTypeId: 'satellite'
    };
    
  11. Create an instance of google.maps.Map and pass in two parameters:
    1. The location where the map should be rendered in your document.
    2. The mapOptions object
  12. 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    
  13. Use CSS to style the div element containing the map:
  14. 
    <style>
    	#map {
    		height: 100%;
    	}
    	html, body {
    		height: 100%;
    		margin: 0;
    		padding: 0;
    	}
    <style>
    
  15. Check your work. Your finished HTML document should look like this:
  16. 
    <!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(44, -110),
    			mapTypeId: 'satellite'
    		};
    	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>
    
  17. Open your web page in a browser to see the results.
    A simple map

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