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

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: