HTML for Front-end Interviews/

...

/

Google Maps API Hands-On

Google Maps API Hands-On

In this lesson, we will briefly go over usage of the Google Maps API in HTML. Let's begin!

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:

<!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>
/* 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 Maps expects an API key in the key parameter when loading an ...