Adding Google Maps to your webpage using Javascript.

So you have this awesome website that would could use something like a map function. Your users would love to be able to use an interactive map inside of the webpage they’re already on. Maybe you want to set a location and let users where they are and what’s around them. Luckily for you there’s a way to add a nice interactive Google Map directly onto your site!

Image from the Staples website that uses Google maps to locate stores near you!

Google was kind enough to have their Google map available for anyone to use. There are a few steps to actually obtaining the required tools for you to use it though. In this post I’ll go over the basic steps of adding a Google maps to your very own webpage. We’ll be using javascript and implementing it throughout the entire tutorial.

Step 1: Create an HTML Page

This is the basic html for setting up your website to include the Google maps interface. This html would go in the webpage where you want to use the maps interface.

This is a very basic page with a heading level three (h3), a single div element, and a style element.

<style>
 #map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

In the above code, the style element sets the div size for your map. Set the div width and height to greater than 0px for the map to be visible. In this case, the div is set to a height of 400 pixels, and width of 100% to display it across the width of your web page. Apply background-color: grey to the div to view the area for your map on the web page.

Step Dos: Adding Google Maps’ API Script

Now that you have the structure of your HTML setup we can add the script needed to run the API.

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

Async means the script is fetched asynchronously, and when it’s ready the HTML parsing is paused to execute the script, then it’s resumed.

Defer means the script is fetched asynchronously, and it’s executed only after the HTML parsing is done.

If you specify both, async takes precedence on modern browsers, while older browsers that support defer but not async will fallback to defer.

The two very important pieces of this link are the “YOUR_API_KEY” that will be replaced with the API key we get later on. Also, the “callback”, which we will add later on using the function called initMap.

Step 3: Getting the API KEY

In order to get the API key you have to visit this website → https://console.developers.google.com/

Once there you’ll see this webpage

From here just name it anything you want and hit that ‘Create’ button! That will take you to the DASHBOARD and click on ENABLE APIS AND SERVICES button. Then select the “Maps Javascript API” from the MAP section and Enable it. Now, go to the CREDENTIALS tab and click on the CREATE CREDENTIALS button and select “1. API Key”. From here you’ll see your new and ready to use API key! Copy and paste that API key which will look something like this → wdED3deYqZM36FOevu95uJaux2FwEhUk into the script we made a while ago. Replacing the ‘YOUR_API_KEY” with your newly generated one.

Step IV: Adding the initMap callback

Add this script in the body of the HTML page and this will be your initMap function.

<script>
        function initMap() {
            var dumbo = {lat: 40.700802, lng:73.987602};
            var mapOptions = {
                center: dumbo,
                zoom: 10
            };
            var googlemap = new google.maps.Map(document.getElementById("map"), mapOptions);
        }
    </script>

The var dumbo is setting the initial location to those specific coordinates which happens to be 81 Prospect Street. The var = googlemap is creating the new map by using Google Maps’ API function Map and is using the options used above to render it.

Step 6: Styling

Now that your map is setup and ready to go, you’re able to finally use it on your webpage! Well, just about, of course depending on how you want your website to look, the current state might not work for you. So you can add some basic resizing options. We are still currently inside the html file so you can add different styles inside the <style> tags that were created in the beginning.

<style>
        #map{
            width: 100%;
            height: 400px;
            background-color: grey;
          }
        
</style>

This style is setup to take up the entire width of the page so you can change the width by changing the width % to your liking. You can also align the map as you please by adding alignment options.

Optional: Adding a marker.

var googlemap = new google.maps.Map(document.getElementById("map"), mapOptions);
            var marker = new google.maps.Marker({
                position: siliconValley,
                map: googlemap
            });

Inserting the var marker will set the marker inside the Google maps and will be visible to the user.

Final Product: