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

See JavaScript: Tips and Tricks for similar articles.

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

  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>
  2. 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.
    3. 
<!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>
  3. Create an empty div element above the script element and give it an id of "map". This is where your map will be displayed.
    4. 
<!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>
  4. Create a script element in the head of your page and put function called initMap inside it.
    5. 
function initMap() {

}
  5. 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.
    6. 
var mapOptions = {
	zoom: 8,
	center: new google.maps.LatLng(44, -110),
	mapTypeId: 'satellite'
};
  6. 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
    7. 
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  7. Use CSS to style the div element containing the map:
    8. 
<style>
	#map {
		height: 100%;
	}
	html, body {
		height: 100%;
		margin: 0;
		padding: 0;
	}
<style>
  8. Check your work. Your finished HTML document should look like this:
    9. 
<!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>
  9. Open your web page in a browser to see the results. A simple map

Related Articles

  1. Node.js and Node Package Manager (npm)
  2. How to Install Node.js on a Mac
  3. How to Run a Node.js Application on Windows
  4. How to Send and Receive JSON Data to and from the Server
  5. How to Run a Node.js Application on a Mac
  6. How to Open Google Chrome's JavaScript Console
  7. How to Create a Google Map Object with the Maps JavaScript API (this article)
  8. Why JavaScript is called JavaScript
  9. How to Learn JavaScript on Your Own
  10. How to Install Node.js on Windows