google-maps

A web component to integrate Google Maps.

<google-maps key="abc123" latitude="45.565567" longitude="-73.553163"></google-maps>

Installation

npm i @sextans/google-maps And write to your index.js file require("@sextans/google-maps")

key (required)

The Google Maps API key.

<google-maps key="abc123"></google-maps>

latitude (optional, observed)

Map initial center, with longitude. Changes are observed.

<google-maps latitude="45.565567"></google-maps>

longitude (optional, observed)

Map initial center, with latitude. Changes are observed.

<google-maps longitude="-73.553163"></google-maps>

zoom (optional, observed, default: 14)

Map initial zoom level. Changes are observed.

<google-maps zoom="14"></google-maps>

ui (optional, default: off)

Enables or disables the default UI.

<google-maps ui="on"></google-maps>

scrollwheel (optional, default: off)

Enables or disables the scrollwheel zoom.

<google-maps scrollwheel="on"></google-maps>

clickzoom (optional, default: on)

Enables or disables the double-click zoom.

<google-maps clickzoom="off"></google-maps>

Markers

<google-maps>
    <map-marker latitude="45.565567" longitude="-73.553163"></map-marker>
</google-maps>

Attributes

latitude

<map-marker latitude="45.565567"></map-marker>

longitude

<map-marker longitude="-73.553163"></map-marker>

src, width, height (optional)

Provide a custom image for the marker. Must be used with width and height attributes.

<map-marker src="http://maps.google.com/mapfiles/ms/micons/movies.png" width="32" height="32"></map-marker>

external (optional)

Redirect to URL when clicked.

<map-marker external="https://google.com"></map-marker>

Info Windows

Any map-marker containing HTML will mirror its content in an InfoWindow when clicked.

<map-marker latitude="45.565567" longitude="-73.553163">
    <div>
        <p>I am a marker with custom HTML content</p>
        <strong>Awesome!</strong>
    <div>
</map-marker>

class

map-marker can be classed to help customize the InfoWindow style.

<style>
map-marker.funky {
    color: hotpink;
}
</style>
<google-maps  latitude="45.565567" longitude="-73.553163">
    <map-marker latitude="45.565567" longitude="-73.553163" class="funky">
        <p>I'm a funky Info Window!</p>
    </map-marker>
</google-maps>

Cluster (experimental)

When the map detects a cluster-marker, it will automatically try to cluster map markers depending on the zoom level and its width/height.

<google-maps>
    <cluster-marker src="/assets/images/cluster.png" width="32" height="32"></cluster-marker>
</google-maps>

Attributes

src, width, height (required)

Provide a custom image for the marker, relative to the site. Must be used with width and height attributes.

<cluster-marker src="/assets/images/cluster.png" width="32" height="32"></cluster-marker>