Google Maps V3 marker with label

Question

How can I add label to my marker if my markers are populated on ajax success each result   map gmap  addMarker      position   new google maps LatLng result latitude  result longitude        I tried like this  but with no success   map gmap  addMarker           position   new google maps LatLng result latitude  result longitude         bounds   true       icon   markerIcon       labelContent    A        labelAnchor   new google maps Point result latitude  result longitude        labelClass    labels      the CSS class for the label      labelInBackground   false

User · Accepted Answer

I doubt the standard library supports this.

But you can use the google maps utility library:

http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

var marker = new MarkerWithLabel({
   position: myLatlng,
   map: map,
   draggable: true,
   raiseOnDrag: true,
   labelContent: "A",
   labelAnchor: new google.maps.Point(3, 30),
   labelClass: "labels", // the CSS class for the label
   labelInBackground: false
 });

The basics about marker can be found here: https://developers.google.com/maps/documentation/javascript/overlays#Markers

User · Answer

The way to do this without use of plugins is to make a subclass of google s OverlayView   method   https   developers google com maps documentation javascript reference hl en OverlayView  You make a custom function and apply it to the map   function Label          this setMap g map        Now you prototype your subclass and add HTML nodes   Label prototype   new google maps OverlayView    subclassing google s overlayView Label prototype onAdd   function             this MySpecialDiv                 document createElement  div            this MySpecialDiv className        MyLabel           this getPanes   overlayImage appendChild this MySpecialDiv     attach it to overlay panes so it behaves like markers      you also have to implement remove and draw functions as stated in the API docs  or this won t work   Label prototype onRemove   function            remove your stuff and its events if any   Label prototype draw   function           var position   this getProjection   fromLatLngToDivPixel this get  position        translate map latLng coords into DOM px coords for css positioning var pos   this get  position                    myLabel                css                    top      position y    px                    left     position x    px                               That s the gist of it  you ll have to do some more work in your specific implementation

User · Answer

Support for single character marker labels was added to Google Maps in version 3 21  Aug 2015   See the new marker label API   You can now create your label marker like this   var marker   new google maps Marker     position  new google maps LatLng result latitude  result longitude      icon  markerIcon    label        text   A            If you would like to see the 1 character restriction removed  please vote for this issue   Update October 2016   This issue was fixed and as of version 3 26 10  Google Maps natively supports multiple character labels in combination with custom icons using MarkerLabels

User · Answer

If you just want to show label below the marker  then you can extend google maps Marker to add a setter method for label and you can define the label object by extending google maps overlayView like this     lt script type  text javascript  gt      var point     lat  22 5667  lng  88 3667        var markerSize     x  22  y  40          google maps Marker prototype setLabel   function label           this label   new MarkerLabel             map  this map            marker  this            text  label                     this label bindTo  position   this   position                var MarkerLabel   function options            this setValues options           this span   document createElement  span            this span className    map-marker-label               MarkerLabel prototype     extend new google maps OverlayView              onAdd  function                 this getPanes   overlayImage appendChild this span               var self   this              this listeners                 google maps event addListener this   position changed   function     self draw                               draw  function                 var text   String this get  text                 var position   this getProjection   fromLatLngToDivPixel this get  position                 this span innerHTML   text              this span style left    position x -  markerSize x   2   -  text length   3    10    px               this span style top    position y - markerSize y   40     px                         function initialize            var myLatLng   new google maps LatLng point lat  point lng           var gmap   new google maps Map document getElementById  map canvas                  zoom  5              center  myLatLng              mapTypeId  google maps MapTypeId ROADMAP                     var myMarker   new google maps Marker               map  gmap              position  myLatLng              label   Hello World                draggable  true                    lt  script gt   lt style gt       map-marker-label          position  absolute      color  blue      font-size  16px      font-weight  bold         lt  style gt    This will work

[google-maps-api-3] Google Maps V3 marker with label

Examples related to google-maps-api-3