Shows Maps with markers which contains descriptions with links to cleverroute main-page
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

63 lines
2.9 KiB

4 years ago
# 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/Build/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)
4 years ago
## Description
The library provides Markers with labels for Google Maps Platform.
4 years ago
> **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!
4 years ago
## 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`
Alternativly 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 `MarkerWithLabel`.
4 years ago
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
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)