Monday, December 2, 2024
No menu items!
HomeCloud ComputingBuild maps faster with Web Components

Build maps faster with Web Components

Starting today, we’re happy to offer Web Components in Preview as a new way for developers to use Google Maps Platform. Initially you’ll be able to access Web Components for Map and Advanced Marker functionality, and we’ll iteratively add more functionality over time. Additionally, we’re also launching an open source Extended Component Library that contains higher level components–like visual representations of Places data,  which will encapsulate best practices, common UI/UX patterns, responsiveness, and accessibility beyond what Maps JavaScript API does out-of-the-box.

Web Components are a popular W3C standard that allows developers to encapsulate HTML, CSS, and JS into a custom and reusable HTML element. These reusable components can range from atomic pieces of functionality–like displaying the star rating for a place–to much more complex business logic. Web Components are easily interoperable with any JS Framework for a lower learning curve, simpler code, and increased readability that helps developers move faster. 

Maps Javascript API Web Components

Developers can access Map and Advanced Marker Web Components directly from the Maps JavaScript API. They are an easy and quick way for developers to integrate these UI features with little to no JavaScript. Just make sure you get your Google Maps Platform API key (using advanced markers also requires a map with a map ID) and view the documentation.  

The Map component displays a map on a web page and can have additional map-related elements (e.g. advanced markers) inside the Map component in HTML. You can also change the look and feel of the map using Cloud-based map styling by applying a map ID.

A Google map showing a red marker in Mountain View, CA

While Maps JavaScript API Web Components are in Preview, they can be tried out through the beta channel.

code_block[StructValue([(u’code’, u'<html>rn<body>rn <script asyncrn src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps&v=beta&callback=initMap”></script>rn rn <gmp-map style=”height: 500px;”rn center=”41.081736,29.009206″rn zoom=”10″>rn </gmp-map>rn rn <script>rn function initMap() { console.log(‘Maps JavaScript API loaded.’); }rn </script>rn</body>rn</html>’), (u’language’, u”), (u’caption’, <wagtail.wagtailcore.rich_text.RichText object at 0x3e158bc62a90>)])]

The advanced marker component displays a marker on the map. Add the marker library to the script loader and a map ID to the map element to support the advanced marker.

code_block[StructValue([(u’code’, u'<script asyncrn src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker&v=beta&callback=initMap”></script>rn rn<gmp-map style=”height: 500px;”rn center=”41.081736,29.009206″rn zoom=”10″rn map-id=”DEMO_MAP_ID”>rn <gmp-advanced-marker position=”41.081736,29.009206″rn title=”Istanbul”></gmp-advanced-marker>rn</gmp-map>’), (u’language’, u”), (u’caption’, <wagtail.wagtailcore.rich_text.RichText object at 0x3e158bc62e10>)])]

Open Source Extended Component Library

Google Maps Platform provides some of the best geospatial data, but it can take many lines of complex code required to display that data in well-styled UI elements. With the Extended Component Library for Maps JavaScript API, we set out to give every developer Google-grade building blocks that can be accessed, customized, and composed with only a few lines of HTML. This open source library builds upon the Web Components available from the Maps JavaScript API and reduces boilerplate, encapsulates best practices and common UI/UX patterns, is mobile responsive out-of-the-box, and has global styling tokens which makes it easy to customize every component to look and feel like your brand. It also provides a wide range of additional components for styling, place details, autocomplete, and more.

Using Web Components you can quickly create a beautiful visual representation of a Place

How to show a place overview

Three lines of code can show details about a specific location:

code_block[StructValue([(u’code’, u'<!– unpkg.com is not affiliated with Google –>rn<script async type=”module”rn src=”https://unpkg.com/@googlemaps/extended-component-library@~0.1″>rn</script>rn rn<gmpx-api-loader key=”YOUR_API_KEY”></gmpx-api-loader>rn rn<gmpx-place-overview place=”ChIJVVVVnvlHDW0Rwyod-_ddhAw”></gmpx-place-overview>’), (u’language’, u”), (u’caption’, <wagtail.wagtailcore.rich_text.RichText object at 0x3e158bc66690>)])]

To find the ID for a place, you can use the Place ID Finder demo or a Find Place search from the Places API. 

Powerful customization and enhancement capabilities are built into these components. For example, specifying a directions button in the Place Overview component generates a button that will initiate getting directions to the place:

code_block[StructValue([(u’code’, u'<gmpx-place-overview place=”ChIJVVVVnvlHDW0Rwyod-_ddhAw”rn size=”medium”>rn <gmpx-place-directions-button slot=”action”>rn Directionsrn </gmpx-place-directions-button>rn</gmpx-place-overview>’), (u’language’, u”), (u’caption’, <wagtail.wagtailcore.rich_text.RichText object at 0x3e158bc66350>)])]

Getting started

To get started with the Extended Component Library, check it out on GitHub and npm

We’ll continue to bring new Web Components to you in the future to help you create geospatial web experiences with HTML only. For the latest information and more samples for using Web Components from the Maps JavaScript API, reference the documentation. We can’t wait to see what you build with them.

Cloud BlogRead More

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments