About @googlemaps/markerwithlabel

The npm package @googlemaps/markerwithlabel is an essential tool for developers looking to enhance the functionality of Google Maps in their web applications. This node module allows for the customization of markers on Google Maps with the additional capability of attaching text labels to these markers. Such functionality is pivotal for applications that require a more descriptive approach to marking locations on the map, such as real estate sites, tourist apps, or any platform that benefits from detailed geographical annotations. By using this package, developers can provide a richer, more informative user experience, making it easier for users to interact with maps and understand complex data at a glance.

To get started with enhancing your Google Maps integration, the npm install @googlemaps/markerwithlabel command is all you need. This simple installation process adds the package to your project, setting you up to utilize its features without hassle. Once installed, you can easily customize both the appearance and behavior of your map markers. The package supports a variety of label options including font size, color, and even HTML content, enabling a high degree of customization that can fit any branding or display requirements you might have.

The benefits of using @googlemaps/markerwithlabel in your projects extend beyond mere aesthetics. This module not only improves the visual appeal of your maps but also enhances the interaction between the user and the map. Labels can be dynamically updated based on user actions or other live data, which can be incredibly useful for applications tracking real-time events or changes. Additionally, the clear labeling provided by this package helps in reducing user confusion, making your application more intuitive and user-friendly. Whether you are developing a delivery tracking system, a public transport route planner, or a social event locator, @googlemaps/markerwithlabel adds a layer of clarity and professionalism that can significantly boost user engagement and satisfaction.

googlemaps npm packages

Find the best node modules for your project.

Search npm

@googlemaps/js-api-loader

Wrapper for the loading of Google Maps JavaScript API script in the...

@googlemaps/markerclusterer

Creates and manages per-zoom-level clusters for large amounts of markers...

@googlemaps/google-maps-services-js

Node...

@googlemaps/url-signature

Sign a URL for Google Maps Platform requests...

@googlemaps/jest-mocks

[![npm](https://img.shields.io/npm/v/@googlemaps/jest-mocks)](https://www.npmjs...

@googlemaps/markerwithlabel

[![npm](https://img.shields.io/npm/v/@googlemaps/markerwithlabel)](https://www.npmjs...

@googlemaps/three

[![npm](https://img.shields.io/npm/v/@googlemaps/three)](https://www.npmjs...

Dependencies

Core dependencies of this npm package and its dev dependencies.

@babel/preset-env, @babel/runtime-corejs3, @googlemaps/jest-mocks, @rollup/plugin-babel, @rollup/plugin-commonjs, @rollup/plugin-typescript, @types/google.maps, @types/jest, @types/selenium-webdriver, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, chromedriver, core-js, eslint, eslint-config-prettier, eslint-plugin-jest, eslint-plugin-prettier, geckodriver, jest, prettier, rollup, rollup-plugin-terser, selenium-webdriver, ts-jest, typedoc, typescript

Documentation

A README file for the @googlemaps/markerwithlabel code repository. View Code

Google Maps JavaScript MarkerWithLabel

GitHub contributors

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

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: