Google maps Marker Label with multiple characters

Question

I am trying to add a 4 character label  eg  A123   to a Google Maps marker which has a wide icon defined with a custom path   var marker   new google maps Marker     position  latLon    label    text   A123       map  map    icon        path   custom icon path       fillColor    000000       labelOrigin  new google maps Point 26 5  20       anchor  new google maps Point 26 5  43      scale  1            The marker label API is restricted to a single character  so just shows a marker with  A  in the example above  I have tried using chrome developer tools to hack the html which is created by gmaps and reinstate the longer label  It displays perfectly with no modifications to the css required  so I just need to find a way to reinstate the other label chars which Google maps has stripped   I raised a Google Maps Issue to request that this restriction be lifted  Please consider voting for the Google issue by visiting link above and starring the issue to encourage Google to fix it - thanks   But in the meantime  is there a workaround I can use to remove the one char restriction    Is there a way I can create a custom extension of google maps Marker to show my longer label

User · Answer

First of all  Thanks to code author   I found the below link while googling and it is very simple and works best  Would never fail unless SVG is deprecated   https   codepen io moistpaint pen ywFDe   There is some js loading error in the code here but its perfectly working on the codepen io link provided    x000D   x000D  var mapOptions     x000D      zoom  16  x000D      center  new google maps LatLng -37 808846  144 963435  x000D       x000D    map   new google maps Map document getElementById  map-canvas    x000D        mapOptions   x000D   x000D   x000D  var pinz     x000D        x000D           location    x000D               lat    -37 807817  x000D               lon    144 958377 x000D             x000D           lable    2 x000D         x000D        x000D           location    x000D               lat    -37 807885  x000D               lon    144 965415 x000D             x000D           lable    42 x000D         x000D        x000D           location    x000D               lat    -37 811377  x000D               lon    144 956596 x000D             x000D           lable    87 x000D         x000D        x000D           location    x000D               lat    -37 811293  x000D               lon    144 962883 x000D             x000D           lable    145 x000D         x000D        x000D           location    x000D               lat    -37 808089  x000D               lon    144 962089 x000D             x000D           lable    999 x000D         x000D     x000D   x000D    x000D   x000D  for var i   0  i  lt   pinz length  i     x000D     var image    data image svg xml  3Csvg 20xmlns 3D 22http 3A 2F 2Fwww w3 org 2F2000 2Fsvg 22 20width 3D 2238 22 20height 3D 2238 22 20viewBox 3D 220 200 2038 2038 22 3E 3Cpath 20fill 3D 22 23808080 22 20stroke 3D 22 23ccc 22 20stroke-width 3D 22 5 22 20d 3D 22M34 305 2016 234c0 208 83-15 148 2019 158-15 148 2019 158S3 507 2025 065 203 507 2016 1c0-8 505 206 894-14 304 2015 4-14 304 208 504 200 2015 398 205 933 2015 398 2014 438z 22 2F 3E 3Ctext 20transform 3D 22translate 2819 2018 5 29 22 20fill 3D 22 23fff 22 20style 3D 22font-family 3A 20Arial 2C 20sans-serif 3Bfont-weight 3Abold 3Btext-align 3Acenter 3B 22 20font-size 3D 2212 22 20text-anchor 3D 22middle 22 3E    pinz i  lable     3C 2Ftext 3E 3C 2Fsvg 3E   x000D   x000D     x000D     var myLatLng   new google maps LatLng pinz i  location lat  pinz i  location lon   x000D     var marker   new google maps Marker   x000D        position  myLatLng  x000D        map  map  x000D        icon  image x000D        x000D    x000D  html  body   map-canvas   x000D    height  100   x000D    margin  0px  x000D    padding  0px x000D    x000D   lt div id  map-canvas  gt  lt  div gt  x000D   lt script async defer src  https   maps googleapis com maps api js key AIzaSyDtc3qowwB96ObzSu2vvjEoM2pVhZRQNSA amp signed in true amp callback initMap amp libraries drawing places  gt  lt  script gt  x000D   x000D   x000D    You just need to uri-encode your SVG html and replace the one in the image variable after  data image svg xml  in the for loop   For uri encoding you can use uri-encoder-decoder  You can decode the existing svg code first to get a better understanding of what is written

User · Answer

OK  here is one solution I have come up with which is pretty messed up   I put the full label text into the div using the fontFamily label attribute  Then I use querySelectorAll to match the resulting style attributes to pull out the refs and rewrite the tags once the map has loaded   var label    A123   var marker   new google maps Marker     position  latLon    label        text  label         Add in the custom label here     fontFamily   Roboto  Arial  sans-serif  custom-label-    label        map  map    icon        path   custom icon path       fillColor    000000       labelOrigin  new google maps Point 26 5  20       anchor  new google maps Point 26 5  43        scale  1          google maps event addListener map   idle   function       var labels   document querySelectorAll   style   custom-label       for  var i   0  i  lt  labels length  i             Retrieve the custom labels and rewrite the tag content     var matches   labels i  getAttribute  style   match  custom-label- A d d d         labels i  innerHTML   matches 1             This seems pretty brittle  Are there any approaches which are less awful

User · Answer

As of API version 3 26 10  you can set the marker label with more than one characters  The restriction is lifted   Try it  it works   Moreover  using a MarkerLabel object instead of just a string  you can set a number of properties for the appearance  and if using a custom Icon you can set the labelOrigin property to reposition the label   Source  https   code google com p gmaps-api-issues issues detail id 8578 c30  also  you can report any issues regarding this at the above linked thread

User · Answer

You can change easy marker label css without use any extra plugin   var marker   new google maps Marker           position  this overlay text          draggable  true          icon              label              text  this overlay field text            color    fff             fontSize   20px             fontWeight   bold             fontFamily   custom-label                     map map                 marker setMap map        style   custom-label     css   text-shadow    2px 2px  000

User · Answer

You can use MarkerWithLabel with SVG icons   Update   The Google Maps Javascript API v3 now natively supports multiple characters in the MarkerLabel  proof of concept fiddle  you didn t provide your icon  so I made one up   Note  there is an issue with labels on overlapping markers that is addressed by this fix  credit to robd who brought it up in the comments   code snippet    x000D   x000D  function initMap     x000D    var latLng   new google maps LatLng 49 47805  -123 84716   x000D    var homeLatLng   new google maps LatLng 49 47805  -123 84716   x000D   x000D    var map   new google maps Map document getElementById  map canvas      x000D      zoom  12  x000D      center  latLng  x000D      mapTypeId  google maps MapTypeId ROADMAP x000D        x000D   x000D    var marker   new MarkerWithLabel   x000D      position  homeLatLng  x000D      map  map  x000D      draggable  true  x000D      raiseOnDrag  true  x000D      labelContent   ABCD   x000D      labelAnchor  new google maps Point 15  65   x000D      labelClass   labels      the CSS class for the label x000D      labelInBackground  false  x000D      icon  pinSymbol  red   x000D        x000D   x000D    var iw   new google maps InfoWindow   x000D      content   Home For Sale  x000D        x000D    google maps event addListener marker   click   function e    x000D      iw open map  this   x000D        x000D    x000D   x000D  function pinSymbol color    x000D    return   x000D      path   M 0 0 C -2 -20 -10 -22 -10 -30 A 10 10 0 1 1 10 -30 C 10 -22 2 -20 0 0 z   x000D      fillColor  color  x000D      fillOpacity  1  x000D      strokeColor    000   x000D      strokeWeight  2  x000D      scale  2 x000D       x000D    x000D  google maps event addDomListener window   load   initMap   x000D  html  x000D  body  x000D   map canvas   x000D    height  500px  x000D    width  500px  x000D    margin  0px  x000D    padding  0px x000D    x000D   labels   x000D    color  white  x000D    background-color  red  x000D    font-family   Lucida Grande    Arial   sans-serif  x000D    font-size  10px  x000D    text-align  center  x000D    width  30px  x000D    white-space  nowrap  x000D    x000D   lt script src  https   maps googleapis com maps api js sensor false amp libraries geometry places amp ext  js  gt  lt  script gt  x000D   lt script src  https   cdn rawgit com googlemaps v3-utility-library master markerwithlabel src markerwithlabel js  gt  lt  script gt  x000D   lt div id  map canvas  style  height  400px  width  100    gt  lt  div gt  x000D   x000D   x000D

User · Answer

A much simpler solution to this problem that allows letters  numbers and words as the label is the following code  More specifically  the line of code starting with  icon    Any string or variable could be substituted for  k    for  i   0  i  lt  locations length  i                    k   i   1        marker   new google maps Marker         position  new google maps LatLng locations i  1   locations i  2               map  map        icon   http   chart apis google com chart chst d map pin letter amp chld     k     FF0000 000000        --- the locations array holds the lat and long and k is the row number for the address I was mapping  In other words if I had a 100 addresses to map my marker labels would be 1 to 100

User · Answer

For anyone trying to    show text under marker on google maps   or   Google Maps Marker Label With Multiple Characters        in 2019  it s worth noting some of the code referenced here no longer exists  officially   Google discontinued support for the  MarkerWithLabel  project a long time ago  It was originally hosted on Google code here  now it s unofficially hosted on Github here   But there is another project Google maintained until 2016  called  MapLabel s  That approach is different  and arguably better   You create a separate map label object with the same origin as the marker instead of adding a mapLabel option to the marker itself  You can make a marker with label with multiple characters using js-marker-label

[google-maps] Google maps Marker Label with multiple characters

Examples related to google-maps

Examples related to google-maps-api-3