In this HTML 5 tutorial, we will show you how to view Google Maps in the HTML page in just a few lines of HTML tags, CSS, and JavaScript code. We will start this tutorial with the setup of the Google Maps API in the Google Developer Console. After that, we will display or view Google Maps in the HTML page using the created Google API Key. Configuration and layout will be done using a little JavaScript and CSS code.
Set up Google Maps API Key
To view Google Maps in the HTML page using the JavaScript API, we need a Google Maps API key. The Google Maps JavaScript API lets you customize maps with your content and imagery for display on web pages and mobile devices. The Maps JavaScript API features four basic map types (roadmap, satellite, hybrid, and terrain), which you can modify using layers and styles, controls and events, and various services and libraries.
Next, open your browser the go to the Google Developer Console. You will be taken to this Google Developer Console page.
Just scroll through the default opened projects, then it will take you to this dialog.
Click the "New Project" button, then it will take you to the New Google Project page.
Fill in the project name and leave other fields as default, then click the "Create" button, and it will take you to the Google Developer Console home page with the default opened project. Select again the project, then choose the newly created Google project and click the "OK" button. It will take you to the new Google project dashboard without any APIs enabled.
Click the "Enable API" button, then it will take you to this Google APIs library page.
Find and choose the Maps JavaScript API, then it will take you to this Maps JavaScript API page.
Just click on the "Enable" button, then it will take you back to the Maps JavaScript API dashboard.
Click on the Credentials link, then it will take you to the Credentials page.
Click on the "+ Create Credentials" link, then choose "API KEY", and it will take you to the API KEY dialog. Copy and paste the newly created API KEY to your Notepad or Text Editor for use in the HTML page.
View Google Maps in an HTML Page
Now, we will create an HTML page from scratch, starting by creating a new HTML file in your project folder. You can create the HTML file using your text editor, IDE, or terminal/command line. Next, open and edit that HTML file, then add these HTML tags that just contain a div for viewing Google Maps.
<!DOCTYPE html>
<html>
<head>
<title>HTML Google Maps</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<div id="map"></div>
</body>
</html>As you can see, we declare an HTML 5 page by defining HTML using this tag <!DOCTYPE html>. Next, include the Google Maps JavaScript API before the closing of the </body> tag.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>In that, Google Maps JavaScript API calls include a callback to the "initMap" function. Add JavaScript code after or before the Google Maps JavaScript API calls.
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 53.430938, lng: -2.960841},
zoom: 17
});
}
</script>Just using the HTML page and JavaScript function will not display Google Maps in the browser. For that, you have determined the size of MAP DIV using CSS. Add the CSS or STYLE codes before the end of the </HEAD> tag.
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>Now, you can see Google Maps in the HTML page like this.
If you see a Grey Google Maps view like ours, that means your Google developers account to reached the limits of API quotas and it needs to upgrade.
That's an example of viewing Google Maps in an HTML Page. You can find the full source code on our GitHub.
That's just the basics. If you need more deep learning about HTML, CSS, JavaScript, or related, you can take the following cheap course:
- HTML & HTML5 For Beginners (A Practical Guide)
- Web - HTML
- Learn HTML, CSS, JAVASCRIPT
- JavaScript:
- Learn JavaScript Fundamentals
- Learning JavaScript Shell Scripting
Thanks!