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>

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:

• google-map-directions: https://codepen.io/vaadin/pen/NBPbVQ
• google-map-search: https://codepen.io/vaadin/pen/mjyRXZ

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.