Google Maps API

Learning Objectives:

At the end of the lesson, learners should be able to:

  • Identify the location and geography of Kyrgyzstan
  • Understand how to add and customize a map using Google Maps API,
  • Understand how to add markers and popups to a map using Google Maps API,
  • Understand how to add and change the base map of a map using Google Maps API.

Overview:

In this tutorial, we will be creating a basic Google Maps web application using the Google Maps API. We will add markers to the map and create info windows that display additional information about each marker when clicked. The tutorial will include step-by-step instructions and explanations for each code segment. We will also provide attribution for the images used in the info windows.

Demo

Requirements:

  • To follow along with this tutorial, you will need a Google account and an API key for the Google Maps API. You can obtain an API key by following the instructions provided by Google or please visit beginner lesson page.
  • A code editor such as Visual Studio Code, Sublime Text, Notepad++ or your favorite code editor.
  • A web browser such as Google Chrome or Mozilla Firefox
  • Basic knowledge of HTML, CSS, and JavaScript

Step 1: HTML Markup

We will start by creating an HTML file and adding the basic markup for our web application. In the head section, we will include a viewport meta tag and a title for the page. In the body section, we will create a div element with an id of “map” that will hold our map.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Map</title>
  <style>
    /* Add any custom CSS styling here */
  </style>
</head>
<body>
  <h1>My Map</h1>
  <div id="map"></div>
  <!-- Add the Google Maps API script here -->
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
    <!-- Add your custom JavaScript code here -->
  <script>
    // Your code goes here
  </script>
</body>
</html>

Step 2: CSS styling

We will now add some CSS to style our map container. In this example, we will set the position of the map to absolute and set its dimensions to take up the entire viewport.

<style>
  /* Set the size of the map container */
  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>

Step 3: Creating the Map

We will now create the map using the Google Maps API. To do this, we will create a function called “initMap” that will be called when the API has loaded. In the “initMap” function, we will create a new map object and set its center and zoom level.

function initMap() {
// Create a new map object
var map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 41.2044, lng: 74.7661 },
zoom: 8,
mapTypeId: "roadmap"
});
}

Step 4: Adding Markers and Info Windows

We will now add markers to our map and create info windows that will display additional information about each marker when clicked. To do this, we will define the marker locations and the content of the info windows. We will also create a new marker object for each location and add an event listener to each marker that will open its corresponding info window when clicked.

1.First, we create a new Marker object of Osh city and set its position and title. Then, call the setMap method of the Marker object to add it to the map.

var oshMarker = new google.maps.Marker({
position: { lat: 40.528229, lng: 72.782232 },
map: map,
title: "Osh City"
});

2.Next we  add a popup window to the marker of Osh city, create a new InfoWindow object and set its content to the HTML you want to display in the popup. Then, add a click listener to the marker that opens the InfoWindow when the marker is clicked.

var oshContent =
'<div id="osh-content">' +
'<img src="https://tinypic.host/images/2023/03/27/dastan-suiuntbekov-zEA5f3zSR4c-unsplash.jpg" alt="Osh City">'   +
"<p>Osh is the second-largest city in Kyrgyzstan and is located in the south of the country. The city is known for its colorful bazaars and rich cultural heritage. Visitors to Osh can explore the Sulayman Mountain, a UNESCO World Heritage Site, or visit the local markets to buy traditional Kyrgyz handicrafts.</p>" +  "</div>";
var oshInfoWindow = new google.maps.InfoWindow({
content: oshContent
});
oshMarker.addListener("click", function() {
oshInfoWindow.open(map, oshMarker);
});

3.Steps 1 and 2 are repeated for the Saimaluu marker and the Sary-Chelek  markers, with different coordinates, colors, and InfoWindows.

The description of the markers and a link to their images:

Osh City

Osh is the second-largest city in Kyrgyzstan and is located in the south of the country. The city is known for its colorful bazaars and rich cultural heritage. Visitors to Osh can explore the Sulayman Mountain, a UNESCO World Heritage Site, or visit the local markets to buy traditional Kyrgyz handicrafts.

Image URL: https://tinypic.host/images/2023/03/27/dastan-suiuntbekov-zEA5f3zSR4c-unsplash.jpg 

Saimaluu Tash

Saimaluu Tash is an archaeological site located in the Tien Shan Mountains. The site is known for its ancient petroglyphs, which date back to the Bronze Age. Visitors to Saimaluu Tash can explore the petroglyphs and learn about the ancient cultures that once inhabited the area.

Image URL: https://tinypic.host/images/2023/03/27/yaroslav-maltsev-qncUmtmSsC8-unsplash.jpg

Sary-Chelek

Sary-Chelek is a national park located in the Jalal-Abad region. The park is known for its stunning natural beauty, including crystal clear lakes and snow-capped mountains. Visitors to Sary-Chelek can hike through the park or take a boat ride on one of the lakes.

Image URL: https://tinypic.host/images/2023/03/27/dastan-suiuntbekov-zEA5f3zSR4c-unsplash.jpg 

Note: Regarding copyright of the images, the code comments include information about the source of each image and a URL where the image can be found. It’s important to check the copyright status of each image and ensure that you have permission to use it in your web application.

Note: All images used in this tutorial are hosted on TinyPic, a free image hosting service. While this can be a convenient way to share images for personal use, it’s worth noting that there are potential disadvantages to using third-party image hosting services. These can include issues with image quality, reliability, and privacy. As always, it’s important to carefully consider the benefits and drawbacks of any tool or service before using it for your own projects. If you’d like to learn more about TinyPic you can check out this URL address: https://tinypic.host/

Step 5: Google Maps JavaScript API

Go to the Google Cloud Console, create a new project, enable the Google Maps JavaScript API, and create a new API key. Copy the API key and replace YOUR_API_KEY in the script tag with it. More details on how to register in Google Platform are described in the introductory lesson.

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

Step 6: Final step. Save HTML

Save the HTML file and open it in a web browser to view the map.

Note: that the code also includes comments which explain what each section of code does. These comments are denoted by the // symbol.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Google Maps API - Basic</title>
    <style>
      /* Set the size of the map container */
      #map {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        // Create a new map object
        var map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: 41.2044, lng: 74.7661 },
          zoom: 8,
          mapTypeId: "roadmap"
        });

        // Define marker locations and popup content
        var oshMarker = new google.maps.Marker({
          position: { lat: 40.528229, lng: 72.782232 },
          map: map,
          title: "Osh City"
        });
        //Image by Dastan Suiuntbekov on Unsplash, url: https://unsplash.com/photos/zEA5f3zSR4c?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink
        var oshContent =
          '<div id="osh-content">' +
          '<img src="https://tinypic.host/images/2023/03/27/dastan-suiuntbekov-zEA5f3zSR4c-unsplash.jpg" alt="Osh City">'   +
          "<p>Osh is the second-largest city in Kyrgyzstan and is located in the south of the country. The city is known for its colorful bazaars and rich cultural heritage. Visitors to Osh can explore the Sulayman Mountain, a UNESCO World Heritage Site, or visit the local markets to buy traditional Kyrgyz handicrafts.</p>" +
          "</div>";
        var oshInfoWindow = new google.maps.InfoWindow({
          content: oshContent
        });
        oshMarker.addListener("click", function() {
          oshInfoWindow.open(map, oshMarker);
        });

        var saimaluuMarker = new google.maps.Marker({
          position: { lat: 41.179067, lng: 73.813828 },
          map: map,
          title: "Saimaluu Tash"
        });
        //Image by Yaroslav Maltsev on Unsplash, url: https://unsplash.com/photos/qncUmtmSsC8?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink
        var saimaluuContent =
          '<div id="saimaluu-content">' +
          '<img src="https://tinypic.host/images/2023/03/27/yaroslav-maltsev-qncUmtmSsC8-unsplash.jpg" alt="Saimaluu Tash">' +
          "<p>Saimaluu Tash is an archaeological site located in the Tien Shan Mountains. The site is known for its ancient petroglyphs, which date back to the Bronze Age. Visitors to Saimaluu Tash can explore the petroglyphs and learn about the ancient cultures that once inhabited the area.</p>" +
          "</div>";
        var saimaluuInfoWindow = new google.maps.InfoWindow({
          content: saimaluuContent
        });
        saimaluuMarker.addListener("click", function() {
          saimaluuInfoWindow.open(map, saimaluuMarker);
        });

        var sarychelekMarker = new google.maps.Marker({
          position: { lat: 41.869807, lng: 71.971864 },
          map: map,
          title: "Sary-Chelek"
        });
        //Image by Gennady Zakirov on Sputnik.kg, url: https://ru.sputnik.kg/20190712/7-fotolenta-ozero-sary-chelek-1045026034.html
        var sarychelekContent =
          '<div id="sarychelk-content">' +
          '<img src="https://tinypic.host/images/2023/03/27/1045027199.jpg" alt="Sary-Chelek">' +
          "<p>Sary-Chelek is a national park located in the Jalal-Abad region. The park is known for its stunning natural beauty, including crystal clear lakes and snow-capped mountains. Visitors to Sary-Chelek can hike through the park or take a boat ride on one of the lakes.</p>" +
          "</div>";
        var sarychelekInfoWindow = new google.maps.InfoWindow({
          content: sarychelekContent
          });
        sarychelekMarker.addListener("click", function() {
          sarychelekInfoWindow.open(map, sarychelekMarker);
          });
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=3.51"></script>
  </body>
</html>
Demo

Note: Google Maps provides a base map that is rendered as an overlay on top of the underlying geographic data. This base map includes a wide range of features such as roads, buildings, parks, bodies of water, and more.

While it is possible to customize the styling of the base map using the Google Maps API, it is not possible to replace it with a completely different base map from a different provider. This is because the base map provided by Google is integrated deeply into the Maps API and it would be difficult to seamlessly replace it with another base map.

However, you can still add custom layers to the map on top of the base map. For example, you can add markers, polygons, polylines, and other overlays to provide additional information and context to the map. You can also customize the styling of these overlays to match your desired look and feel.

It’s also worth noting that Google Maps provides a range of map styles that you can choose from, including terrain, satellite, hybrid, and more. These styles change the appearance of the base map and can help you better represent your data or convey your message.

Conclusion

In this lesson, learners were introduced to the basic functionality of Google Maps API. They learned how to create a new map object, define marker locations, and add popup content to markers. The code example provided demonstrates how to add markers with custom images and descriptions to a map, and how to open an info window with additional information when a marker is clicked.

Some of the key concepts covered in this lesson include:

  • Creating a new map object with a specified center and zoom level
  • Adding markers to a map with specific coordinates and titles
  • Creating popup content for markers using HTML and CSS
  • Opening an info window when a marker is clicked, and displaying custom content within the info window

Further resources and samples for adding markers, popups, and other features using Google Maps API can be found in the official documentation: