https://github.com/googlemaps/js-markerwithlabel

Google Maps Marker with Label
https://github.com/googlemaps/js-markerwithlabel

google-maps googlemaps javascript marker utility-library

Last synced: 4 months ago
JSON representation

Google Maps Marker with Label

• Host: GitHub
• URL: https://github.com/googlemaps/js-markerwithlabel
• Owner: googlemaps
• License: apache-2.0
• Created: 2020-10-08T20:56:30.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-04-08T11:59:35.000Z (about 1 year ago)
• Last Synced: 2024-04-08T12:51:54.963Z (about 1 year ago)
• Topics: google-maps, googlemaps, javascript, marker, utility-library
• Language: TypeScript
• Homepage:
• Size: 4.57 MB
• Stars: 70
• Watchers: 9
• Forks: 20
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS
  • Security: SECURITY.md

Awesome Lists containing this project

• jimsghstars - googlemaps/js-markerwithlabel - Google Maps Marker with Label (TypeScript)

README

        
# Google Maps JavaScript 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/Test/badge.svg)

![Release](https://github.com/googlemaps/js-markerwithlabel/workflows/Release/badge.svg)

[![codecov](https://codecov.io/gh/googlemaps/js-markerwithlabel/branch/main/graph/badge.svg)](https://codecov.io/gh/googlemaps/js-markerwithlabel)

![GitHub contributors](https://img.shields.io/github/contributors/googlemaps/js-markerwithlabel?color=green)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![](https://github.com/jpoehnelt/in-solidarity-bot/raw/main/static//badge-flat.png)](https://github.com/apps/in-solidarity)

[![Discord](https://img.shields.io/discord/676948200904589322?color=6A7EC2&logo=discord&logoColor=ffffff)](https://discord.gg/jRteCzP)

## 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](https://www.npmjs.com/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.

``

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](https://googlemaps.github.io/js-markerwithlabel/index.html).

## Example

```js

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:

- [Basic Example](https://googlemaps.github.io/js-markerwithlabel/examples/basic.html)

- [Events Example](https://googlemaps.github.io/js-markerwithlabel/examples/events.html)

- [Lettered Example](https://googlemaps.github.io/js-markerwithlabel/examples/lettered.html)

- [Picture Example](https://googlemaps.github.io/js-markerwithlabel/examples/picturelabel.html)