Create a custom Google Map to embed on your website

Google Maps Static Map API example

Creating a custom Google Map to embed on your website using the Google Maps API can be an overwhelming experience. Below is a set of steps that will help make map building experience a little bit better. If you need additional assistance, you can always contact me, and I can help you out.

Step 1: Determine the type of Google Map for your website

There are two main types of Google Maps you can embed on your website, the standard JavaScript-based map or a static image map.

JavaScript-based Google Map

The JavaScript-based map option is the interactive solution which allows users to drag, zoom, and explore the map is embedded on your website.

Static Image Google Map

The static image map option is good for when you do not need any interactivity on your map. The static map option is also easier to implement than the Javascript-based map option.

Static Google Map Example

Step 2: Generate a Google Maps API Key

A Google Maps API key is required for every Google Maps implementation. There are a set of steps to make the process of generating this API key easy. Learn how to generate a Google Maps API key.

Step 3: Review the required code for a Google Map implementation

There is a set of code required for every Google Maps implementation. Below, I will go review each part of required code.

Include the Google Maps Javascript API Library on your website

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

Copy and paste the Google Maps Javascript API Library code above into the bottom of your webpage right below the closing </body> tag. Also, replace YOUR_API_KEY in the library path with your API key. Note: notice the argument callback=initMap in the library path, you see how this works soon.

Add an empty <div> tag

<div id="map"></div>

Copy and paste the empty <div> tag where your would like your Google Map to show up on your webpage. There is an id on the <div> so that the CSS and JavaScript we will add knows which HTML element to query.

Add a height to your Google Map with CSS

<style>
  #map { height: 400px; }
</style>

Copy and paste the CSS above in the <head> of your webpage. It is a requirement to set the height of your Google Map. You will need to determine the size that fits your layout and website.

Add the JavaScript that will create your Google Map

<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
</script>

Copy and paste the JavaScript above in your webpage near the closing </body> tag, but above the Google Maps Javascript API Library. The initMap function includes the Google Map initialization function with two arguments. The first argument queries the <div> tag with an id of “map” that was previously pasted into the webpage. The second argument is a set of options to set the center of the map with the latitude and longitude and the zoom level. The initMap function gets called by the callback parameter specified in the Google Maps Javascript API Library path.

Written By

Michael Williamson

I am a full stack web developer, digital strategist, and occasional content writer living in the city of Northeast Minneapolis, Minnesota.