The most simple way to overlay a custom map type is just to define the map type options in the controller and then add the directive in the google-map widget.

In this example a map type displaying black squares is overlayed on the map. This can be hidden changing the showOverlay value in the scope, as seen in Overlay map types API example.

Javascript

// Define map type options
$scope.squaresMapType = {
    getTile: function(coord, zoom, ownerDocument) {
        var div = ownerDocument.createElement('div');
        div.innerHTML = coord;
        div.style.width = this.tileSize.width + 'px';
        div.style.height = this.tileSize.height + 'px';
        div.style.fontSize = '10';
        div.style.borderStyle = 'solid';
        div.style.borderWidth = '1px';
        div.style.borderColor = '#AAAAAA';
        return div;
    },
    tileSize: new google.maps.Size(256, 256),
    name: 'Black Squares',
    maxZoom: 19,
};

// Define map options
$scope.map1 = {
    center: {
        latitude: 41.850033,
        longitude: -87.6500523
    },
    showOverlay: true,
    zoom: 10,
};

HTML

<google-map center="map1.center" zoom="map1.zoom">
    <map-type options="squaresMapType" show="map1.showOverlay"></map-type>
</google-map>
<a ng-click="map1.showOverlay = !map1.showOverlay">Toggle overlay</a>

You can overlay an Image map type pretty much the same way, just by defining the method getTileUrl in its options. MapTypes are handled internally and you don't need to care about creating a custom type or using Google API ones.

This example overlays Moscone Center pictures over the map, as seen in Overlaying an image map type API example.

Javascript

// Define map type options
$scope.mosconeCenterMapType = {
    getTileUrl: function(coord, zoom) {
        var bounds = {
            17: [[20969, 20970], [50657, 50658]],
            18: [[41939, 41940], [101315, 101317]],
            19: [[83878, 83881], [202631, 202634]],
            20: [[167757, 167763], [405263, 405269]]
        };

        if (zoom < 17 || zoom > 20 ||
            bounds[zoom][0][0] > coord.x || coord.x > bounds[zoom][0][1] ||
            bounds[zoom][1][0] > coord.y || coord.y > bounds[zoom][1][1]) {
            return null;
        }

        return [
            'http://www.gstatic.com/io2010maps/tiles/5/L2_', zoom, '_',
            coord.x, '_', coord.y, '.png'
        ].join('');
    },
    tileSize: new google.maps.Size(256, 256)
};

// Define map options
$scope.map2 = {
    center: {
        latitude: 37.78313383212,
        longitude: -122.4039494991302
    },
    zoom: 18,
    options: {
        minZoom: 17,
        maxZoom: 20
    }
};

HTML

<google-map center="map2.center" zoom="map2.zoom" options="map2.options">
    <map-type options="mosconeCenterMapType"></map-type>
</google-map>

You can alternatively give the directive an id attribute, so the map type can be used as a single layer like the ROAD, SATELLITE or other basic map types.

• show attribute is not used for single-layer map types, you need to use controls or explicitely set the map type you want in the javascript code.
• Additionnaly, you need to specify maxZoom parameter in the maptype options when using the maptype as a single layer.

This example displays a map of the moon instead of the earth, as seen on Image map types API example.

Javascript

// Define map type options.
$scope.moonMapType = {
    getTileUrl: function(coord, zoom) {
        var normalizedCoord = getNormalizedCoord(coord, zoom);
        if (!normalizedCoord) {
            return null;
        }
        var bound = Math.pow(2, zoom);
        return 'http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' +
            '/' + zoom + '/' + normalizedCoord.x + '/' +
            (bound - normalizedCoord.y - 1) + '.jpg';
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9, // This attribute is mandatory
    minZoom: 0,
    radius: 1738000,
    name: 'Moon'
};

// Define map options
$scope.map3 = {
    center: {
        latitude: 0,
        longitude: 0
    },
    zoom: 1,
    options: {
        mapTypeId: 'moon',
        mapTypeControlOptions: {
            mapTypeIds: ['moon']
        }
    }
};

HTML

<google-map center="map3.center" zoom="map3.zoom" options="map3.options">
    <map-type id="moon" options="moonMapType"></map-type>
</google-map>

With several map-type directives you can mix custom overlays and single layers, using id and show parameters. This is even possible to render the maptype in both ways, despite you may not want do this.

This example features the previously defined "moon" image map type, and "squares" map type. One is visible using the controls, the other is overlayed on the map (and can be toggled on/off using show).

Javascript

// Previously defined map types are reused

// Define map options
$scope.map4 = {
    center: {
        latitude: 0,
        longitude: 0
    },
    zoom: 3,
    options: {
        mapTypeControlOptions: {
            mapTypeIds: ['moon', google.maps.MapTypeId.ROADMAP]
        }
    }
};

HTML

<google-map center="map4.center" zoom="map4.zoom" options="map4.options">
    <map-type id="moon" options="moonMapType"></map-type>
    <map-type options="squaresMapType"></map-type>
</google-map>