Chris Crowe

Google Maps–without the labels

Some times it is nice to have a clean map without any labels all over the map.

You can do this with just a small bit of code and it works for the standard Map, Satellite and Terrain models.

Map Examples

For a live example see

http://weather.crowe.co.nz/mapdemo

Basically we just add some custom layers and control the urls’s that are used.

 <script type="text/javascript">
        var map = null;

        function CustomMap(name, alt, baseUrlIndex) {
            CustomMap.prototype.baseUrls =
               [
                    ["http://mt0.google.com", "http://mt1.google.com", "http://mt2.google.com", "http://mt3.google.com"],  // MAP
                    ["http://khms0.google.com", "http://khms1.google.com", "http://khms2.google.com", "http://khms3.google.com"], // Satellite
                    ["http://mts0.google.com", "http://mts1.google.com", "http://mts2.google.com", "http://mts3.google.com"]  // Terrain
               ];

            CustomMap.prototype.partUrls =
                ["/vt/lyrs=m@164000000,weather_nolabels&hl=en&x=", "/kh/v=113&src=app&x=", "/vt/lyrs=t@128,r@179000000,weather_nolabels&hl=en&x="];

            CustomMap.prototype.tileSize = new google.maps.Size(256, 256);
            CustomMap.prototype.maxZoom = 19;

            this.alt = alt;
            this.name = name;
            this.baseUrlIndex = baseUrlIndex;
        }

        CustomMap.prototype.getTile = function (coord, zoom, ownerDocument) {
            var MaxTilesAtThisZoomLevel = Math.pow(2, zoom);
            var x = coord.x % MaxTilesAtThisZoomLevel;

            var i = (x + 2 * coord.y) % this.baseUrls[this.baseUrlIndex].length;
            var salt = "Galileo".substr(0, (x * 3 + coord.y) % 8);
            var URL = [this.baseUrls[this.baseUrlIndex][i], this.partUrls[this.baseUrlIndex], x, "&y=", coord.y, "&z=", zoom, "&s=", salt].join("");

            var div = ownerDocument.createElement('IMG');
            div.src = URL;
            div.style.width = this.tileSize.width + 'px';
            div.style.height = this.tileSize.height + 'px';
            return div;
        };

        $(document).ready(function () {

            var myOptions =
                            {
                                zoom: 12,
                                minZoom: 3,
                                center: new google.maps.LatLng(-43.53, 172.6),
                                mapTypeId: 'mapNoNames',
                                mapTypeControlOptions: {
                                    mapTypeIds: ['mapNoNames', 'SatelliteNoNames', 'TerrainNoNames'],
                                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                                }
                            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            map.mapTypes.set('mapNoNames', new CustomMap("Map", "Map", 0));
            map.mapTypes.set('SatelliteNoNames', new CustomMap("Satellite", "Satellite", 1));
            map.mapTypes.set('TerrainNoNames', new CustomMap("Terrain", "Terrain", 2));


        });

    </script>

Print | posted on Wednesday, July 04, 2012 9:59 AM |