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 }); 

Answer 1

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..

<script type="text/javascript">     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         });     } </script> <style>     .map-marker-label{         position: absolute;     color: blue;     font-size: 16px;     font-weight: bold;     } </style> 

This will work.

Answer 2

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