How to Create Your Own Custom Google Map

You can create a custom, interactive map to put on your website with any size and specific display preferences using Google Maps. In this tutorial, I will demonstrate how to do that with a simple example.

Google Maps on Your Website

If you are a local business or if your business location matters to your web visitors in any way, in addition to displaying your contact and address information on your website, putting a map that shows your location is also a good idea. Often times, online visitors and potential customers prefer to locate a business on the map before checking further about their services or visiting them. So, if you run a local business and you still don't have a map on your website, now is a good time to put one.

In the past, websites usually had a static map image for displaying their location information to their visitors. Thanks to Google Maps and other similar online maps services, you can now place dynamic and interactive maps on your website with custom size and display options, and you can do that for free (within certain usage limitations).

How to Create Your Own Custom Google Map - 1

(Google, Google Maps and the Google logo are registered trademarks of Google Inc., used with permission.)

The Google Maps API allows you to prepare custom maps for various platforms such as web and mobile in a number of ways. Google Maps API have two options that you can use: Free and Paid. In most cases the free option will be enough for your needs (unless you have a highly popular website), which means that you can start with the free option and upgrade at a later time in case your website traffic grows.

You can create your custom map using different APIs that Google Maps provide but for the sake of simplicity, I will be using the Google Maps JavaScript API in our example. For the record, you can use the JavaScript API for free as long as your website does not exceed 25,000 map loads per day for 90 consecutive days, after which you will either need to upgrade to the paid version or your maps won't work.

TIP: You can find a detailed list of Google Maps APIs and select the one that will suit your needs on this page.

Create a Custom Google Map with JavaScript API

STEP 1: Get Your API Key

The first thing you will need to do before you start generating your map is to get an Google Maps JavaScript API key. This key will allow you to use the API within the free option threshold. You can get your API key on Google Developers Console, by selecting Google Maps JavaScript API. This will require you to log in to your Google account.

The following steps will assume that you have your API key ready.

STEP 2: Prepare the Map Layout

Your map will consist of three things: Its layout (HTML) e.g. where your map will be located on your page, its style (CSS) e.g. what dimensions it will have, and its functionality (JS), e.g. its coordinates, zoom level, marker etc.

Let's start with its layout and place the map element (#map) on our page like the following:

<!doctype html>
<html>
<head>
  <title>Google Maps Example</title>
</head
<body>
  <div id="map"></div>
</body>
</html>

You can name your map element (we created it as a div in this example) as you wish, what you need to keep in mind is that you need a unique map element on your page in order for the map script to work and display your map properly.

STEP 3: Prepare the Map Style

We continue with specifying the size and the margin of our map:

<!doctype html>
<html>
<head>
  <title>Google Maps Example</title>
  <style>
  #map { width: 400px; height: 400px; margin: 20px }
  </style>
</head
<body>
  <div id="map"></div>
</body>
</html>

We used internal styles for the sake of simplicity, you can place your CSS styles in an external style file if you prefer to do so.

You can specify the dimensions of your map as you wish, you can even make it responsive for mobile visitors. What style you use for your map is up to you.

STEP 4: Prepare the Map Script

In order to display a map, we will need to include the API script on our page, using the API key like the following:

<!doctype html>
<html>
<head>
  <title>Google Maps Example</title>
  <style>
  #map { width: 400px; height: 400px; margin: 20px }
  </style>
</head
<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=INSERT_API_KEY_HERE&callback=initMap" async defer></script>
</body>
</html>

Simply insert your API key to where it says INSERT_API_KEY_HERE. Pay attention to preserve the punctuation around the API key in the above URL.

Our final step is to include the final JavaScript code that will render the map inside the #map element. The map is displayed with the help of the initMap() function as shown below:

<!doctype html>
<html>
<head>
  <title>Google Maps Example</title>
  <style>
  #map { width: 400px; height: 400px; margin: 20px }
  </style>
</head
<body>
  <div id="map"></div>
  <script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -41.286, lng: 174.781},
      zoom: 6
    });
  }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=INSERT_API_KEY_HERE&callback=initMap" async defer></script>
</body>
</html>

The minimum required options you need to have on your map are its center (as latitude and longitude coordinates) and its zoom level. Enter the values for the latitude and longitude of your location, also specify the zoom level as you wish.

The final result will be an embedded map like the following:

Satellite Map

If you want to display a satellite version of your map, you can add the following to your map variable in the JS code:

mapTypeId: google.maps.MapTypeId.SATELLITE,

The updated code will be:

<!doctype html>
<html>
<head>
  <title>Google Maps Example Satellite Version</title>
  <style>
  #map { width: 400px; height: 400px; margin: 20px }
  </style>
</head
<body>
  <div id="map"></div>
  <script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -41.286, lng: 174.781},
      mapTypeId: google.maps.MapTypeId.SATELLITE,
      zoom: 6
    });
  }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=INSERT_API_KEY_HERE&callback=initMap" async defer></script>
</body>
</html>

The map will look like the following:

Map Marker

To place a marker on your map, you will need to define the map it belongs to and its position like the following:

var marker = new google.maps.Marker({
    map: map,
    position: {lat: -41.286, lng: 174.781}
  });

The final code will be:

<!doctype html>
<html>
<head>
  <title>Google Maps Example with Marker</title>
  <style>
  #map { width: 400px; height: 400px; margin: 20px }
  </style>
</head
<body>
  <div id="map"></div>
  <script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -41.286, lng: 174.781},
      mapTypeId: google.maps.MapTypeId.SATELLITE,
      zoom: 6
    });

    var marker = new google.maps.Marker({
      map: map,
      position: {lat: -41.286, lng: 174.781}
    });
  }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=INSERT_API_KEY_HERE&callback=initMap" async defer></script>
</body>
</html>

The API gives you a lot more control over your map so that you can customize it the way you like. You can find a full list of options on the API reference. You can also learn more about the Google Maps JavaScript API on the official documentation here.

I hope that this tutorial will be helpful to you while creating your own custom Google maps for your website. If you liked this tutorial, please share it.

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in