Left caret below marker

[matter3]

Just noticed that a left caret seems to now be appearing below the marker when using map icons to place custom markers on a Google Map. You can see the issue on the demo page as well : http://map-icons.com/demo.html

Not sure the cause, just noticed it now.

[DevinWalker]

Yeah I just noticed that too. I can't figure out what's going on. It must be something Google changed with the API?

[DevinWalker]

Looks like Google Maps API released an update on the 21st:

3.21 21 July 2015 - Markers with Labels launched
https://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog

I'm going to dig a bit more and see if I can see if that's conflicting.

[jakeholland]

It seems to me that it is conflicting.

A marker label is a single textual character that appears inside a marker. You can specify a marker label as either a string or a MarkerLabel object that includes a string and other label properties. In both cases, only the first character of the specified string is displayed on the marker.

So its "copying" the same label that is being used for the map-icons.

[DevinWalker]

Yeah so basically the character you read is the is first character of the font icon.

< is from <i class="map-icon-hair-care" style="color:#FFFFFF; font-size: 20px;position: relative; top: 12px;"></i>

Why Google, why?

[DevinWalker]

OK so I figured it out. Essentially, Google as of this latest maps API release has taken over the "label" to only display the first character. This means in your code you should the params from "label" to something like "custom_label":

//Marker for map var location_marker = new Marker( { map : map, zIndex : 9, icon : marker_icon, custom_label: marker_label } );

Then update the two options.label to options.custom_label in https://github.com/scottdejonge/Map-Icons/blob/master/js/map-icons.js#L29-L33

I'll submit a PR to see with the fixed version

[DevinWalker]

PR submitted

[matter3]

Yup looks good thanks much 👍