Cli Log

Google Maps HTML, Extended Component Library

Build Maps in Minutes: The Power of Google Maps Web Components

Google Maps is an incredible tool for enhancing websites. Whether you need to display your business location, provide directions to a place, or create interactive maps for better user experience, Google Maps offers a robust solution. Traditionally, integrating Google Maps has involved writing JavaScript code directly. However, the Google Maps Extended Component Library streamlines this process with pre-built Web Components.

Here’s what we’ll cover in this post:

  • Advantages of the Extended Component Library: Simplified setup and helpful features.
  • Prerequisites: The importance of obtaining a Google Maps API key.

Project Setup

Before we dive into using the Google Maps Extended Component Library, let’s make sure you have a development environment ready.

Prerequisites

For this simple demo, we’ll work directly with a single HTML file. Let’s outline the steps:

Create an HTML File:

  • Start with a basic HTML skeleton (index.html or whichever name you prefer):
  • Create optional external files for styling (style.css) and any JavaScript (script.js) if you wish to keep the code organized.
  • Add the basic style for the <body>
HTML
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Google Map with Extended Component</title>
</head>

<body>
  <h1>Google Map with Extended Component</h1>
</body>

</html>
CSS
body {
  margin: 0;
  height: 100vh;
}

Include the Library

We’ll use a CDN (Content Delivery Network) to load the Extended Component Library directly. Add the following <script> tag inside the <head> of your HTML file:

HTML
<script type="module" src="https://unpkg.com/@googlemaps/extended-component-library"></script>

Now the code will be like:

HTML
<!doctype html>
<html lang="en">

<head>
  <!-- Google map CDN-hosted bundle -->
  <script type="module" src="https://unpkg.com/@googlemaps/extended-component-library"></script>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Google Map with Extended Component</title>
</head>

<body>
  <h1>Google Map with Extended Component</h1>
</body>

</html>

Basic Map Implementation

Now comes the exciting part—building the actual map! We’ll use the components from the Extended Component Library to make our lives easier.

HTML Structure

  • Container Element with <gmpx-split-layout>: The <gmpx-split-layout> component provides a convenient way to structure your map alongside other content (like location details). It creates a split view within your webpage. You’ll place your map and other related map information within this container.
  • The <gmpx-api-loader>: Before adding any map components, we need the <gmpx-api-loader>. This crucial component handles loading the Google Maps JavaScript library from Google’s servers and requires you to provide your Google Maps API key.

Import and Initialization

Within your HTML <body></body>, add the following code to include the library and initialize the Google Maps API:

HTML
<gmpx-api-loader key="YOUR_API_KEY"></gmpx-api-loader>
  • Important: Replace "YOUR_API_KEY" with your actual Google Maps API key.
  • Note on unpkg: For this demo, we’re loading the library directly from unpkg.com. In production, consider downloading the library or integrating it into your build process.

The <gmp-map> Component

The <gmp-map> component is the star of the show. Here’s how to set up a basic map:

HTML

<gmp-map slot="main" center="49.288913572720844, -123.11090068629485" zoom="14" map-id="DEMO_MAP_ID">
</gmp-map>

Let’s break down the attributes:

  • center: The latitude and longitude coordinates to center your map (here it’ll center on Canada Place in city Vancouver).
  • zoom: The initial zoom level (higher numbers mean more zoomed in).
  • map-id: An optional ID for styling the map (we’ll touch on this later).

Adding a Marker

Maps are often more useful when we highlight specific points of interest. That’s where markers come in! The Extended Component Library provides the <gmp-advanced-marker> component for this purpose.

Concept of Markers

Markers are visual pins placed on a map to pinpoint locations. They can be used to represent your business address, event locations, tourist attractions, or any place you want to showcase.

Code Explanation

Let’s add a marker to the map we created in the previous section. Nest the marker code within your <gmp-map> component:

HTML

<gmp-map slot="main" center="49.288913572720844, -123.11090068629485" zoom="14" map-id="DEMO_MAP_ID">
  <gmp-advanced-marker position="49.288913572720844, -123.11090068629485"></gmp-advanced-marker>
</gmp-map>
  • position: This attribute is essential! It takes latitude and longitude coordinates to determine where the marker will be placed on the map. Notice how we’ve used the same coordinates as the center of your map for demonstration.

Now, when you view your webpage, you’ll see a marker pinpointing the location you specified.

Tags: