Search⌘ K
AI Features
Home
Courses
HTML for Front-end Interviews

Google Maps API Hands-On

Explore how to set up and use the Google Maps API within a basic web page using HTML, CSS, and JavaScript. Learn to configure map properties such as center coordinates and zoom level, and how to obtain and use an API key for practical map integration.

We'll cover the following...

HTML & CSS markup

The below code shows HTML and CSS markup to set the stage for the Google maps API usage on a very basic web page:

HTML
<!DOCTYPE html>

<html>

<head>

	<script src="index.js"></script>

</head>

<body>

	<h3>Using the Google Maps API</h3>

	<!--The map needs an HTML element to hold the map: -->

	<div id="gmap"></div>

	<!--Load the API from the specified URL

    * The async attribute allows the browser to render the page while the API loads

    * The key parameter will contain your own API key (which is not needed for this tutorial)

    * The callback parameter executes the setMap() function provided ahead

    -->

	<script async defer src="https://maps.googleapis.com/maps/api/js?key=geturownprivatekey&callback=setMap">

	</script>

</body>

</html>
Scss
/* Set the size of the div element that contains the map */
#map {
	height: 400px;
	/* The height is 400 pixels */
	width: 100%;
	/* The width is the width of the web page */
}

Google ...