markerWithLabel doesn't work at all

[stelro]

Hello, I am using react-google-maps the last version and I am trying to Implement markerWitLabel, and I don't get any results at all, the markers don't show on the map nor I get any errors in the console. I am using exactly the same code from the example.
Maybe I am missing something? any 3d party library?

[jamesjsewell]

I'm getting the same thing. I see on the demo site they are importing css for the marker label so maybe I could try adding my own css somehow on the marker. I will experiment and report back. i'm not a contributor btw

[stelro]

I found what I was doing wrong, first I need to use some external library like v3-utility-library and pass the MarkerWithLabel function to google-maps-react, and secondly, I was using className on label content instead of class. But i have now another problem too, the labels don't render instantly, i have to reload the map 2-3 times to see them on the map.

[jamesjsewell]

In my case i went for the OverlayView component instead.

[tomchentw]

Was introduced by #573 but I can't get it to work as well……

[d46]

@stelro Yes that's the correct way. I sampled on my pr.

Also i'm using className too even labelContents are occur from HoCs

const ListingMarker = ({listing, onMarkerClick, selectedMarkerIds, outStanding, markerType = "listing"}) => {
  return (
    <Marker
      position={{
        lat: listing.map.coordinates.lat,
        lng: listing.map.coordinates.lon
      }}
      key={listing.id}
      defaultAnimation={2}
      markerWithLabel={window.MarkerWithLabel}
      opacity={0}
      onClick={() => onMarkerClick(listing)}
      labelContent={ReactDOMServer.renderToString(
        <MarkerPureBuilder marker={listing}
                                          markerType={markerType}
                                          outStanding={outStanding} />
      )}
      labelClass={style['map-price-container']}
      labelAnchor={new google.maps.Point(35, 27)}
    />
  );
};

Instant 50+ makers at the same time but i didn't realize any delay or reload bug. Are you getting this in example or your project ? If it is your code base, maybe there is a flaw in your approach.

[jamesjsewell]

@RGFnaGFuIEd1bmF5

1. what about the css import they are using in the demo ( is the css needed and where can i find it) ?
2. why/how is markerWithLabel being read from the window?
3. can you pass the google object down through props?

[d46]

@jamesjsewell

1. Yes. Check it out here. markerWithLabel.css. markerWithLabel produce markers with raw html. With this, we can make our custom markers. So css is require to styling them.

2. You can use https://github.com/warent/markerwithlabel library as a package.

3. What do you mean? react-google-maps require global google object.

[jamesjsewell]

@RGFnaGFuIEd1bmF5 thank you, I am new to this library and am making use of it. your answer to 3 answers my question. In regards to 1., so is this why my label is invisible? I am putting a Semantic Ui for react component in there instead of raw html and css

[d46]

Did you tried ReactDOMServer.renderToString() to get raw html from jsx ? My opinion pull my pr and play with it. It's really easy to use.

[MGHawes]

I've copied verbatim the marker you're using and have google.maps and markerwithlabel as globals and I get the error:

Uncaught TypeError: Cannot read property 'x' of undefined
    at MarkerLabel_.setAnchor (markerwithlabel.js:399)
    at MarkerLabel_.setMandatoryStyles (markerwithlabel.js:388)
    at MarkerLabel_.setStyles (markerwithlabel.js:371)
    at MarkerLabel_.draw (markerwithlabel.js:324)
    at MarkerLabel_.Cz (maps.googleapis.com/maps-api-v3/api/js/30/8/overlay.js:1)
    at Ez._.Sf.C (js:127)
    at zg.trigger (js:111)
    at zg.<anonymous> (js:51)
    at _.Ev.trigger (js:111)
    at _.Ev.<anonymous> (js:51)
    at Object.trigger (js:111)
    at _.Ev._.k.da (maps.googleapis.com/maps-api-v3/api/js/30/8/common.js:219)
    at js:127

It seems as though somehow the anchor is not properly set?
The label appears in the top left corner of the screen, as if its attaching to the map not the marker?
Also, the map becomes unusable, very slow to drag and not re-rendering.

[CDimonaco]

I'm having the same issue of @MGHawes with markerwithlabel in window object.

[d46]

@CDimonaco Wait #657 for new infrastructure.

[Kanakala]

@d46 I tried as you said in pr example for setting labelStyle in a marker. Instead of changing the label color, it returns with an error saying
this.label.setMap is not a function at MarkerWithLabel.setMap (markerwithlabel.js:548) at Cluster.addMarker (markerclusterer.js:497) at MarkerClusterer.addToClosestCluster_ (markerclusterer.js:1461) at MarkerClusterer.createClusters_ (markerclusterer.js:1517) at MarkerClusterer.redraw_ (markerclusterer.js:1373) at MarkerClusterer.addMarker (markerclusterer.js:1178) at new Marker (Marker.js:89) at eval (ReactCompositeComponent.js:295) at measureLifeCyclePerf (ReactCompositeComponent.js:75) at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294).
Could you please help me in fixing the issue.

[CDimonaco]

@Kanakala This feature does't work at all, wait for new release or put marker with label manually like i did.. So create your marker with label object and attach the map instance from the GoogleMap component, you can find it in the context... It's a little bit frustrating remember to manually setMap to null for markers you don't use anymore in the map but at least, it works.

[erfoon]

Seriously, there is no way to set style to label ?
I just want to center the alignment and change the font and color.
Help if anyone got a result. I'm trying something like this.
<Marker key={id} position={markerLocation} icon={markerIcon} label={markerLabel} labelStyle={{color: '#fff'}} />

[psr-ai]

Hi everyone,

I figured out a solution for the same. You will need to fork the library until they come up with the new infrastructure. In the lib/components/Marker.js, you'll need to add two setters for labelClass and labelAnchor inside the variable updaterMap. Here is my new function:

var updaterMap = {
  /*
   * @see https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/markerwithlabel/src/markerwithlabel.js
   */
  labelContent: function labelContent(instance, _labelContent) {
    instance.set("labelContent", _labelContent)
  },
  labelClass: function labelClass(instance, _labelClass) {
    instance.set("labelClass", _labelClass)
  },
  labelAnchor: function labelAnchor(instance, _labelAnchor) {
    instance.set("labelAnchor", _labelAnchor)
  },
  animation: function animation(instance, _animation) {
    instance.setAnimation(_animation)
  },
  clickable: function clickable(instance, _clickable) {
    instance.setClickable(_clickable)
  },
  cursor: function cursor(instance, _cursor) {
    instance.setCursor(_cursor)
  },
  draggable: function draggable(instance, _draggable) {
    instance.setDraggable(_draggable)
  },
  icon: function icon(instance, _icon) {
    instance.setIcon(_icon)
  },
  label: function label(instance, _label) {
    instance.setLabel(_label)
  },
  opacity: function opacity(instance, _opacity) {
    instance.setOpacity(_opacity)
  },
  options: function options(instance, _options) {
    instance.setOptions(_options)
  },
  place: function place(instance, _place) {
    instance.setPlace(_place)
  },
  position: function position(instance, _position) {
    instance.setPosition(_position)
  },
  shape: function shape(instance, _shape) {
    instance.setShape(_shape)
  },
  title: function title(instance, _title) {
    instance.setTitle(_title)
  },
  visible: function visible(instance, _visible) {
    instance.setVisible(_visible)
  },
  zIndex: function zIndex(instance, _zIndex) {
    instance.setZIndex(_zIndex)
  },
}

Now, the only nuance is you'll have to pass the labelAnchor, since there's no handling of null case in markerWithLabel.js file inside the setAnchor function. Here's mine which is working perfectly fine:

<Marker
    key={marker.id}
    position={{ lat: marker.latitude, lng: marker.longitude }}
    markerWithLabel={window.MarkerWithLabel}
    labelContent={`${marker.price}`}
    labelAnchor={new window.google.maps.Point(marker.latitude, marker.longitude)}
    labelClass={'map-marker-icon'}
/>

Now in map-marker-icon, you would need to set the css:

.map-marker-icon { display: block !important; margin: 0px !important; }

I couldn't find a way to override labelStyle in the same way, so had to use !important in the css. You can change the margins according to your needs.

[tomchentw]

Released v9.0.0

[rahpuser]

So there is still not support for label style in marker ? Do you have any roadmap on when is going to be supported ?

[tomchentw]

@rahpuser could you just check the new API released in v9.0.0:
https://tomchentw.github.io/react-google-maps/#markerwithlabel