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
I couldn't succeed in making
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 :)
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.