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 codes. We will start this tutorial with the setup of 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 codes.
Setup Google Maps API Key
To view Google Maps in the HTML page using Javascript API we need a Google Maps API key. The Google Maps JavaScript API lets you customize maps with your own 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 the default opened projects then it will take to this dialog.
Click the "New Project" button then it will take to this New Google Project page.
Fill the project name and leave other fields as default then click the "Create" button and it will take to the Google Developer Console home page with default opened project. Select again the project then choose the newly created Google project and click the "OK" button. It will take to the new Google project dashboard without any APIs enabled.
Click the "Enable API" button then it will take to this Google APIs library page.
Find and choose Maps Javascript API then it will take to this Maps Javascript API page.
Just click on the "Enable" button then it will take back to the Maps Javascript API dashboard.
Click on Credentials link then it will take to the Credentials page.
Click on "+ Create Credentials" link then choose "API KEY" and it will take to the API KEY dialog. Copy and paste the newly created API KEY to your Notepad or Text Editor for using in the HTML page.
View Google Maps in 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 adds 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 </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 "initMap" function. Add a Javascript code after or before that 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 the 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 reach the limits of API quota's and it needs to upgrade.
That it's, an example of View Google Maps in HTML Page. You can find the full source code in our GitHub.
That just the basic. 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!