React-google-maps: MarkerWithLabel-Support

Created on 31 Aug 2015 · 15Comments · Source: tomchentw/react-google-maps

It would be very nice if this lib would support the markerwithlabel-addon (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html).

Right now there are two problems:

Hardcoded Marker-Classname in the MarkerCreator
Hardcoded Property-List in the MarkerCreator.

For the record, I made it work by monkey-patching the _createMarker-Method like this:

var composeOptions = require('react-google-maps/lib/utils/composeOptions');
var MarkerCreator = require('react-google-maps/lib/creators/MarkerCreator');
MarkerCreator.default._createMarker = function(mapHolderRef, markerProps) {
    // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
  var marker = new google.maps.MarkerWithLabel(composeOptions(markerProps, [
  // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerOptions
  "animation", "attribution", "clickable", "cursor", "draggable", "icon", "label", "opacity", "place", "position", "shape", "title", "visible", "zIndex", "labelContent", "labelClass"]));

  marker.setMap(mapHolderRef.getMap());

  return marker;
};

It would be much better if the MarkerCreator-Class could be configured from outside somehow (setting the propertylist and the marker-classname) or adding an explicit MarkerWithLabel-Component (both in the best case).

What do you think?

Source

flash1293

Most helpful comment

I did a quick mock up in my own project. But the code seems to be working as such:
https://gist.github.com/jshthornton/c586b4004c05646865895afd9e936341

If you guys are happy with the style I would happily fork and create a pull request.

jshthornton on 5 May 2016

👍9

All 15 comments

JFYI, I made an addon exactly for that in my fork, but I use not markerwithlabel, but https://github.com/scottdejonge/Map-Icons.

ksavenkov on 31 Aug 2015

I think for the future the best way is to make such things configurable to make it possible to create wrapper-components built on react-google-maps. Does it make sense to create a Pull-Request for this?

flash1293 on 31 Aug 2015

I would appreciate a proposal for the APIs.

tomchentw on 1 Sep 2015

Anyone interested?

tomchentw on 30 Sep 2015

Just checked @ksavenkov's work on Map-Icons and I found the demo of Map-Icons is really astonishing! What a beautiful icons on map! http://map-icons.com

I would love it to integrated into the addons component. @flash1293 suggests that we could make Marker configureable but I'm worried about the problem it generates. Instead, I would like it to be another wrapper components inside addons folder. What do you think?

tomchentw on 23 Nov 2015

+1 great feature

Bogdaan on 20 Jan 2016

I think I had to fork Map-Icons to make its sync between marker and overlay work in drawing mode. But that was long ago, maybe they've fixed that in upstream already.

ksavenkov on 20 Jan 2016

For the sake of dependency management I suggest we use an npm package such as https://www.npmjs.com/package/markerwithlabel

jshthornton on 5 May 2016

I did a quick mock up in my own project. But the code seems to be working as such:
https://gist.github.com/jshthornton/c586b4004c05646865895afd9e936341

If you guys are happy with the style I would happily fork and create a pull request.

jshthornton on 5 May 2016

👍9

Feel free to submit a PR. Close for now

We're also looking for maintainers. Involve in #266 to help strengthen our community!

tomchentw on 29 May 2016

@jshthornton - did you ever create your PR with the intended fix and have it merged in? I don't see anything in the PRs, but checking in case this was resolved via another method.