How to use the Google Map Web Component
Tags: beginners, webcomponents, polymer, google
Published: 2018-07-11 10:33:32

---
title: How to use the Google Map Web Component
published: true
description: A short summary of using Google Map web component along with its utility elements like a marker, a point, a poly, etc.
tags: beginners, webcomponents, polymer, google
---
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](https://developers.google.com/maps/documentation/javascript/tutorial). 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:
![](https://thepracticaldev.s3.amazonaws.com/i/jvn2sif5xi3v30n5617p.png)
Too good to be true? That's Web Components for ya :wink: 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`](https://vaadin.com/directory/component/googlewebcomponentsgoogle-map) web component also provides some other useful sub-elements to use with: 
- `google-map-directions`: provides the [Directions API](https://developers.google.com/maps/documentation/javascript/directions) 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](https://developers.google.com/places/web-service/intro) functionalities.

For example, here's how you would use a marker (click HTML to show the code):
{% codepen https://codepen.io/vaadin/pen/bjNweW %}
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`:
{% codepen https://codepen.io/vaadin/pen/rraWzO %}

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](https://twitter.com/binhbbbb)*
- *If you would like to try out Web Components, check out the series [Web Components Wednesday](https://vaadin.com/blog?tag=wcw), where I introduce and explain easy-to-use web components to beginners.*