How to apply text to Google Maps polylines?

Question

I apologize that this is a repeat question. I have followed answers but have worked as I want. I have the Label class but it is not what I want.

I have a map with a custom grid drawn on it. thanks to @geocodezip

var map;

var qtrArray = [];
var linesArray = [];
var Startlatlng;
var llOffset = 0.0666666666666667;

var drawGridBox = false;
var gridline;
var polylinesquare;
var latPolylines = [];
var lngPolylines = [];
var bounds = new google.maps.LatLngBounds();

function initialize() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(34.00, -84.00),
        zoom: 10,
        streetViewControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true
    });

    google.maps.event.addListener(map, 'click', function (event) {
    createGridBox(event.latLng);
    });
    DrawGridOn();
    google.maps.event.addListener(map, 'idle', function () {
        createGridLines(map.getBounds());
    }); 
}
google.maps.event.addDomListener(window, 'load', initialize);

function DrawGridOn() {
    drawGridBox = true;
}

function DrawGridOff() {
    drawGridBox = false;
}


function ClearLastGrid() {
    polyline.setMap(null);
}

function createGridLines(bounds) {
    for (var i = 0; i < latPolylines.length; i++) {
        latPolylines[i].setMap(null);
    }
    latPolylines = [];
    for (var i = 0; i < lngPolylines.length; i++) {
        lngPolylines[i].setMap(null);
    }
    lngPolylines = [];
    if (map.getZoom() <= 6) return;
    var north = bounds.getNorthEast().lat();
    var east = bounds.getNorthEast().lng();
    var south = bounds.getSouthWest().lat();
    var west = bounds.getSouthWest().lng();

    // define the size of the grid
    var topLat = Math.ceil(north / llOffset) * llOffset;
    var rightLong = Math.ceil(east / llOffset) * llOffset;

    var bottomLat = Math.floor(south / llOffset) * llOffset;
    var leftLong = Math.floor(west / llOffset) * llOffset;

    for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) {
        // lines of latitude
        latPolylines.push(new google.maps.Polyline({
            path: [
            new google.maps.LatLng(latitude, leftLong),
            new google.maps.LatLng(latitude, rightLong)],
            map: map,
            geodesic: true,
            strokeColor: '#0000FF',
            strokeOpacity: 0.5,
            strokeWeight: 1
        }));
    }
    for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) {
        // lines of longitude
        lngPolylines.push(new google.maps.Polyline({
            path: [
            new google.maps.LatLng(topLat, longitude),
            new google.maps.LatLng(bottomLat, longitude)],
            map: map,
            geodesic: true,
            strokeColor: '#0000FF',
            strokeOpacity: 0.5,
            strokeWeight: 1
        }));
    }
}

function createGridBox(point) {
    // Square limits
    var bottomLeftLat = Math.floor(point.lat() / llOffset) * llOffset;
    var bottomLeftLong = Math.floor(point.lng() / llOffset) * llOffset;

    var i;

    var gridLineSquare = [
    new google.maps.LatLng(bottomLeftLat, bottomLeftLong), //lwr left
    new google.maps.LatLng(bottomLeftLat, bottomLeftLong + llOffset), //lwr right
    new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong + llOffset), //upr right
    new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong),
    new google.maps.LatLng(bottomLeftLat, bottomLeftLong)];


    for (i = 0; i < gridLineSquare.length; i++) {
        bounds.extend(gridLineSquare[i]);
    }

    // external.getData(event.latLng);
    if (drawGridBox == true) {
        polyline = new google.maps.Polyline({
            path: gridLineSquare,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        polyline.setMap(map);
        qtrArray.push(polyline);
    }
}

All I really want to do is label the horizontal lines with the latitude (on the left side of the map) and label the vertical lines with the longitude. I know how to display that information by the OnClick event in an InfoWindow but that is cheesey. I have seen a few claims from custom classes but none have panned out. Since all the examples are two years old, at a minimum, I was hoping something new has come along.

Answer 1

The better i have found are this, but not recent

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/

Image

the image came from this sample