MarkerWithLabels: Getting error "this.setValues is not a function"

[JonasSeegers]

I've discovered an issue with MarkerWithLabels. I'm loading the Google Maps API like so: <script defer async src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">. Within initMap, I try to create a MarkerWithLabel like so:

new MarkerWithLabel({
  position,
  map,
});

This leads to the error:

Uncaught (in promise) TypeError: this.setValues is not a function
    at MarkerWithLabel.$f (js?v=3&key=&callback=initMap:89)
    at MarkerWithLabel._.ag (js?v=3&key=&callback=initMap:90)
    at new MarkerWithLabel (markerwithlabel.js:614)
    at Function../src/components/markerCluster.ts.MarkerCluster.entryToMarker (markerCluster.ts:28)
    at markerCluster.ts:24
    at Array.map (<anonymous>)
    at Function../src/components/markerCluster.ts.MarkerCluster.entriesToMarkers (markerCluster.ts:24)
    at PayNowEatLaterMap.<anonymous> (payNowEatLaterMap.ts:77)
    at step (payNowEatLaterMap.ts:33)
    at Object.next (payNowEatLaterMap.ts:14)

I've already googled the error, but everything I found was related to the maps script not being loaded yet, which is not true for my case.

[jpoehnelt]

Note that your api key was in the trace. I removed it, but you should regenerate the key. Do you have a minimal example? The samples in this repository still work: https://googlemaps.github.io/v3-utility-library/packages/markerwithlabel/examples/basic.html

[belicam]

Getting the same error using npm packages @googlemaps/loader and @google/markerwithlabel.

Map is loaded correctly, but after trying inserting MarkerWithLabel getting the same error as @JonasSeegers

Error is easy to reproduce, installed npm packages and built following code with webpack:

import { Loader } from '@googlemaps/loader';
import MarkerWithLabel from '@google/markerwithlabel';

export default (function () {
    const el = document.createElement('div');
    el.style.height = '400px';

    document.body.append(el);

    const loader = new Loader({ version: 'weekly' });

    loader.load().then(() => {
        const opts = {
            scrollwheel: false,
            zoom: 8,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            fullscreenControl: true
        };

        const map = new google.maps.Map(el, opts);

        const marker = new MarkerWithLabel({
            position: new google.maps.LatLng(0, 0),
            draggable: true,
            raiseOnDrag: true,
            map: map,
            labelContent: 'testLabel',
            labelAnchor: new google.maps.Point(22, 0)
        });
    });
})();

[Ajax-ua]

I'm using MarkerWithLabels in Ionic 5 app and got the same error. Looks like something is wrong with the context when google.maps.Marker.apply(this, arguments) is called.

[jpoehnelt]

My first guess is that this has something to do with https://github.com/googlemaps/v3-utility-library/blob/907e1b3c397c881e8a07d8645a76a0c20790e6b1/packages/markerwithlabel/src/markerwithlabel.js#L617-L619 and the call to inherits.

[jpoehnelt]

Probably need to change this pattern to match https://github.com/googlemaps/v3-utility-library/blob/master/packages/markerclustererplus/src/overlay-view-safe.ts#L45

[marcabisamra]

This is also plaguing our application. I tried to do as you recommended @jpoehnelt but to no success. Not sure what's happening here as it only happens sporadically, and doesn't seem to happen when you Disable Cache in the network tab of Chrome

[Ajax-ua]

@jpoehnelt do you guys plan to investigate and fix this bug in the nearest future? I really need this feature in my project and eagerly await for the new version with bugfix

[medfx]

Same error here with Ionic5 + @googlemaps/loader, @google/markerclustererplus + @google/markerwithlabel.

Is there any dirty quickfix for this problem? I don't understand @jpoehnelt suggestions. Has MarkerClustererPlus anything to do with it?

Thanks!

[Ajax-ua]

@medfx I'm using markerwithlabel lib (https://www.npmjs.com/package/markerwithlabel) for now

[medfx]

@jpoehnelt what does the "needs more info" label actually means in this context? Please specify how and what information you need to proceed. Thank you!

[sanath-sfs]

This solved my problem

https://stackoverflow.com/a/53761344/7490702

You have to load the library after google maps

[medfx]

I load google maps via https://github.com/googlemaps/js-api-loader. ONLY after the map has loaded (promise/callback) I start the map init and ONLY after that I use MarkerWithLabel. It works most of the time. But sometimes it doesn't, like exactly when you are giving a presentation. 😄

[jpoehnelt]

I have rewritten this package into TypeScript and resolved the issue here.

Check it out at https://github.com/googlemaps/js-markerwithlabel and https://www.npmjs.com/package/@googlemaps/markerwithlabel.

There are some minor differences in API. Docs for it are at https://googlemaps.github.io/js-markerwithlabel/index.html.