Google Maps API - 覆盖自定义道路

Question

我在使用Google Maps API时遇到了一些问题。我设法使用图像拼贴制作了一个cutom地图。这似乎工作正常。我只是想知道是否有办法在地图上覆盖道路？

目前我假设有两种可能的方法，或者API中的一些内置功能，我找不到麻烦。我已找到路径等，但我希望道路/街道有标签，调整大小等等，以及能够切换。

另一个选择是做第二个图像平铺并覆盖该图像，我不知道此刻如何做。

如果有人对此有任何信息，或者可以指出我正确的方向。非常感谢。

 /* <![CDATA[ */

    /* Global variable that will contain the Google Maps object. */
    var map = null

    // Google Maps Demo object
    var Demo = Demo || {};

    // The path to your tile images.
    Demo.ImagesBaseUrl = './mapImage/mapTiles/';
    Demo.ImagesRoadsUrl = './mapImage/overlayRoads/';

    // NuviaMap class
    Demo.NuviaMap = function(container) {
        // Create map
        // This sets the default info for your map when it is initially loaded.
        map = new google.maps.Map(container, {
            zoom: 1,
            center: new google.maps.LatLng(0, 0),
            mapTypeControl: false,
            streetViewControl: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            }
        });

        // Set custom tiles
        map.mapTypes.set('nuvia', new Demo.ImgMapType('nuvia', '#4E4E4E'));
        map.setMapTypeId('nuvia');

        // Loop through the marker info array and load them onto the map.
        for (var key in markers) {
            var markerData = markers[key];

            var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(markerData.lat, markerData.lng),
                    map: map,
                    title: markerData.title,
                    flat: markerData.flat,
                    visible: true,
                    infoBubble: new InfoBubble({
                            maxWidth: 300,
                            content: (markerData.image ? '<img src="' + markerData.image + '" width="80" align="left">' : '') + '<h3>' + markerData.title + '</h3>' + (markerData.info ? '<p>' + markerData.info + '</p>' : ''),
                        shadowStyle: 1,
                        padding: '10px'
                    }),
                // You can use custom icons, default icons, etc. In my case since a city was a marker the circle icon works pretty well.
                // I adjust the scale / size of the icon depending on what kind of city it is on my map.
                icon: {
                    url: markerData.icon,
                }
            });
        // We need to trap the click event for the marker so we can pop up an info bubble.
        google.maps.event.addListener(marker, 'click', function() {
            this.infoBubble.open(map, this);
        });
        activeMarkers.push(marker);
    }

    // This is dumb. We only want the markers to display at certain zoom levels so this handled that. 
    // Google should have a way to specify zoom levels for markers. Maybe they do but I could not find them.
    google.maps.event.addListener(map, 'zoom_changed', function() {
        var currentZoom = map.getZoom();

        for (var i = 0; i < activeMarkers.length; i++) {
            var thisTitle = activeMarkers[i].title;

            if (markers[thisTitle]['zoom'][currentZoom])
                activeMarkers[i].setVisible(true);
            else
                activeMarkers[i].setVisible(false);
        }
    });

    // This handles the displaying of lat/lng info in the lat/lng info container defined above in the HTML.
    google.maps.event.addListener(map, 'click', function(event) {
        $('#latLng').html("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng());
    });
    // Listener to display the X/Y coordinates
    google.maps.event.addListener(map, 'mousemove', function (event) {
        displayCoord(event.latLng);            
    });
    };

    // ImgMapType class
    Demo.ImgMapType = function(theme, backgroundColor) {
        this.name = this._theme = theme;
        this._backgroundColor = backgroundColor;
    };

    // Let Google know what size our tiles are and what our min/max zoom levels should be.
    Demo.ImgMapType.prototype.tileSize = new google.maps.Size(256, 256);
    Demo.ImgMapType.prototype.minZoom = 1;
    Demo.ImgMapType.prototype.maxZoom = 5;

    // Load the proper tile.
    Demo.ImgMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
        var tilesCount = Math.pow(2, zoom);

        if (coord.x >= tilesCount || coord.x < 0 || coord.y >= tilesCount || coord.y < 0) {
            var div = ownerDocument.createElement('div');
            div.style.width = this.tileSize.width + 'px';
            div.style.height = this.tileSize.height + 'px';
            div.style.backgroundColor = this._backgroundColor;
            return div;
        }

        var img = ownerDocument.createElement('IMG');
        img.width = this.tileSize.width;
        img.height = this.tileSize.height;
        // This tells what tile image to load based on zoom and coord info.
        img.src = Demo.Utils.GetImageUrl('tile_' + zoom + '_' + coord.x + '-' + coord.y + '.png');

        return img;
    };

    // Just basically returns the image using the path set way above and the name of the actual image file.
    Demo.Utils = Demo.Utils || {};
    Demo.Utils.GetImageUrl = function(image) {
        return Demo.ImagesBaseUrl + image;
    };

    // Opacity.
    Demo.Utils.SetOpacity = function(obj, opacity /* 0 to 100 */ ) {
        obj.style.opacity = opacity / 100;
        obj.style.filter = 'alpha(opacity=' + opacity + ')';
    };

    // Create ye ol' map.
    google.maps.event.addDomListener(window, 'load', function() {
        var nuviaMap = new Demo.NuviaMap(document.getElementById('nuvia-map'));
    });

    console.log('Ready Builder');
    /* ]]> */

这是我到目前为止工作的JS，（致http://www.cartographersguild.com/showthread.php?t=21088）