Google maps examples

Let's add a simple script which loads google maps js API and execute callbacks when API is ready.

Simple map

The simplest example is just a map without any markers and popups. Lets draw one.

To do so we must be sure that all classes from the API are loaded and available globally. I recommend using something like script above and subscribe on API load. By doing that you don't rely on any execution order and don't load google script until it is needed (which is always good for performance).
You can do it either by waiting for onMapsReady callback:

onMapsReady(() => {
    const map = new GoogleMaps.GoogleMap(document.getElementById('map'));
    map.render();
});

Or pass a promise to the GoogleMap options which will be resolved once Maps Api is ready:

const map = new GoogleMaps.GoogleMap(
    document.getElementById('map'),
    {},
    {
        initPromise: () => new Promise((resolve) => onMapsReady(resolve))
    }
);
map.render();

In our examples we will use the second option

Add a few options and render the map:

Note how after creating a GoogleMap we then call render() method.
Just creating an instance doesn't render anything, you have to implicitly call its render method

Markers

Just pass an array of MarkerConfig to setMarkers method and then call render. Markers will be fit within the map automatically by calling Map.fitBounds
This can be disabled by passing autoFitOnRender: false to the options (default is true). Also you can pass fitPaddings option which will be also passed to Map.fitBounds as the second argument

Fit markers

Markers with popups

To render popups we need some basic styles

Our implementation of custom popups is based on this example Google: https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/overlay-popup
But it also hides a few implementation details and allow you to style your popups with fewer elements and classes:

These elements which will be our popups

autoFitPopup options is enabled by default and it will likely work at once: once you click on marker that has popupElement and popup with this element is opened we will try to fit the whole popup within the map. To do so we should get the width and height of particular popup's content and adjust map positioning.
In case you use more complex styles or a lot of "position:absolute" the width and height of the popup root element can be zero. If autoFitPopup doesn't work for you out of the box you can try passing additional options which is called getPopupContent. It is a function that receives a root element of your popup and should return an element that contains an actual content of your popup (so it will have proper width and height). For example you can add additional attribute to your markup to mark a particular element as popup content and return it from getPopupContent.

getPopupContent: root => root.querySelector('[data-popup-content]')

Lets render our markers with popups. For that we will have an array of markers configs which have popupElement property:

Custom markers

If you want to customize your markers the easiest way is to pass additional option createMarker. If it is provided than instead of creating default marker class by calling new GoogleMarker(options) your custom function will be called.
This function should return an instance of GoogleMarker class.
You can implement whatever logic you want (for example create instances of different classes) and then override their getIconUrl (getIconWidth/getIconHeight) method like below:

Polylines/Polygons

See options for these here:
https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions https://developers.google.com/maps/documentation/javascript/reference/polygon#PolygonOptions