@googlemaps/markerwithlabel

[![npm](https://img.shields.io/npm/v/@googlemaps/markerwithlabel)](https://www.npmjs.com/package/@googlemaps/markerwithlabel) ![Build](https://github.com/googlemaps/js-markerwithlabel/workflows/Build/badge.svg) ![Release](https://github.com/googlemaps/js-

Usage no npm install needed!

<script type="module">
  import googlemapsMarkerwithlabel from 'https://cdn.skypack.dev/@googlemaps/markerwithlabel';
</script>

README

Google Maps JavaScript MarkerWithLabel

npm Build Release codecov GitHub contributors semantic-release Discord

Description

The library provides Markers with labels for Google Maps Platform.

Note: This library is the nearly the same interface as the existing library @google/markerwithlabel, but renamed and in its own repository. All future development will continue here.

Note: There are some breaking changes from @google/markerwithlabel including anchor position. This should be considered a major version bump!

Install

Available via npm as the package @googlemaps/markerwithlabel.

npm i @googlemaps/markerwithlabel

or

yarn add @googlemaps/markerwithlabel

Alternatively you may add the umd package directly to the html document using the unpkg link.

<script src="https://unpkg.com/@googlemaps/markerwithlabel/dist/index.min.js"></script>

When adding via unpkg, the marker with labels can be accessed at new markerWithLabel.MarkerWithLabel().

A version can be specified by using https://unpkg.com/@googlemaps/markerwithlabel@VERSION/dist/....

Documentation

The reference documentation can be found at this link.

Example

import { MarkerWithLabel } from '@googlemaps/markerwithlabel';

new MarkerWithLabel({
    position: new google.maps.LatLng(49.475, -123.84),
    clickable: true,
    draggable: true,
    map: map,
    labelContent: "foo", // can also be HTMLElement
    labelAnchor: new google.maps.Point(-21, 3),
    labelClass: "labels", // the CSS class for the label
    labelStyle: { opacity: 1.0 },
})

View the package in action: