DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Binh Bui
Binh Bui

Posted on • Updated on

How to use the Google Map Web Component

Everybody uses Google Map, or at least the people I know. It's handy, ubiquitous and accurate (most of the time). In order to integrate Google Map to your site, you need to have a good knowledge of the Maps JavaScript API. Now, with the invention of Web Components, this is all you need for a nice window of Google Map:

<google-map api-key="AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc"></google-map>
Enter fullscreen mode Exit fullscreen mode

The result:

Too good to be true? That's Web Components for ya πŸ˜‰ Let's look at some more examples on how to utilize this powerful web component.

Displaying the marker and the poly in Google Map

The google-map web component also provides some other useful sub-elements to use with:

  • google-map-directions: provides the Directions API service.
  • google-map-marker: provides a map marker. It is used as a child of google-map.
  • google-map-point: provides a map point. It can be used as a child of all google-map-*.
  • google-map-poly: displays a series of connected lines segments. It is used inside google-map and needs at least two google-map-point.
  • google-map-search: provides the Places API functionalities.

For example, here's how you would use a marker (click HTML to show the code):

As you can see from the code, a longitude and a latitude value are needed for the marker. You may include as many markers in a single map as possible, the attribute fit-to-markers makes sure that all of them are in the view. Well, it does not function in my demo.

What is the difference between a google-map-point and a google-map-marker? A marker can be displayed directly inside google-map and draggable, while a point is fixed and can be only used as children of google-map-*, such as google-map-poly:

I couldn't succeed in making google-map-directions and google-map-search work, the same things happened several months ago when I first tried these. Feel free to check out and fork the pen here:

And if you got it working, please leave a comment below to teach me :)

Final words

With the invention of Web Components, things might have gone two steps easier for developers to integrate technology like Google Map in a website. And the best thing about Web Components is that in a few years, all of its standards will be available in every browser natively.

  • For more news and writing pieces on Web Components, follow me on Twitter @binhbbbb
  • If you would like to try out Web Components, check out the series Web Components Wednesday, where I introduce and explain easy-to-use web components to beginners.

Top comments (2)

Collapse
 
dannyengelman profile image
Danny Engelman

All your examples are broken because the Google Maps API now requires an API key:

developers.google.com/maps/documen...

Collapse
 
davierobertson profile image
Davie

unfortunately this page and all the examples a broken

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!