How to Embed Google Map to Website

In this article, we’ll show you how to embed Google Map to website.

Before we begin with the code, you need to learn about API quota first. Google has put limits and quotas on every API requests to ensure an equitable distribution of the system resources. Meaning is you will have a limited number of visitors per day that the map can be shown with full functionality. After that, the map is still be display on your site but all API (javascript, street view) will be disabled for the rest of the day. If you’re working on high traffic website, then you’ll need to purchase a plan from Google to have more quota and their support. Anyway, the free plan quota is around 25,000 map load so it should be enough for most small to medium sites.

You can get an API key from Google API console or click “Get A Key” button at Google Map API page

Now that you have the API key, next is to embed Google map to your website.

First create a div that you’ll use to contain Google Map. Size doesn’t matter as Google Map will adjust itself to fit the div. Then create a javascript function to initialize the map using that div. You can also config the starting position that the map should center on as well as zoom level by passing JSON parm.

var map;
     function initMap() {
       map = new google.maps.Map(document.getElementById('map'), {
         center: {lat: -34.397, lng: 150.644},
         zoom: 9
       });
     }
     //This will start the map at latitude -34.397, longitude 150.644, Zoom level 9

And finally, include Google Map script file and supply your API key in key = and initMap function in callback=

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

That’s it! For step by step tutorial, see video below:

This is just only the first step, I know you’ll also want to put a place marker to the embedded map. We’ll talk about that in the next tutorial! And don’t forget to subscribe to our channel too 🙂

Red Stapler Channel: https://www.youtube.com/c/RedStapler_channel