Google map is one of the most significant parts of a website whether it is a business or personal site. Using “gmap.js” jQuery plugin, we can easily display a Google map on anywhere of our website.
Yesterday, I was working on a Blood Donation project. Suddenly, I noticed that Google Map is not working anymore in the template. After spending a decent amount of time on that issue, I found API Key was missing in JavaScript code. In the following tutorial, I am going to explain 3 simple steps to get an API Key, and the process to insert that key in JavaScript code. Let’s get started.
Step 01: Firstly, we need to get an API key for the website. For that, please go to the following link.
https://developers.google.com/maps/documentation/javascript/get-api-key
Step 02: Next, click GET A KEY button, and Popup window will appear.
Step 03: Finally, follow the popup window instructions, and an API key will be generated like the following screenshot. Now, copy that API Key, and add it in your JavaScript code. Here goes an example-
https://maps.google.com/maps/api/js?key=your-api-key
<script src="https://maps.google.com/maps/api/js?key=your-api-key"></script>
Result: If everything set placed according to the instruction the a beautiful Google map will be displayed on your page. Please check the example output below.
Hope that will help you. Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!
Project We’ve Used Google Map:
Repair Geek – Laptop And Computer Fixing Service Center HTML5 Template
Blood Donation – Activism & Campaign HTML5 Template
