How to display a label next to a Marker for Google Maps?

Question

I would like to display a text label next to the markers on google maps. I've used Virtual Earth before and I'm just starting to use Google Maps. I tried setting the Title property but that only changes the roll over text.

Is there a way to display a small line of text underneath a marker that will stay there as the user zooms, pans and uses the map?

Thanks in advance!

Answer 1

For Google Maps JavaScript API v3, check out the examples here.

Source code available in normal and minimised forms.

Answer 2

There's a good label class here, though you'll have to add it alongside the markers.

Answer 3

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

Demo: jsFiddle

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

Here is some sample code which would solve the problem: https://github.com/printercu/google-maps-utility-library-v3-read-only/tree/master/markerwithlabel/examples

This is a custom class called InfoBox. You can see the API ref on the link above

The js file can be included from here: https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/infobox/src/infobox.js

Cheers!

Answer 5

Even this question has been answered I have found this resource, which I think is a good solution for this issue and could be helpful. Also, a similar solution could be found here.