Google Maps API Tutorial

Translate this page:

Custom Map Types

To create a custom map, you first need to create a set of 256*256 tiles, or obtain a set for which you have the relevant permissions. Or, alternatively, write your own tileserver code that runs on your server and can create the tile images on the fly.

A Simple Custom Map

To use these tiles as a simple Custom Map Type, you need to do following:

Create a GCopyright object
Create a GCopyrightCollection
Add the GCopyright to the GCopyrightCollection
Create a GTileLayer object
Create a GMapType object
Add the GMapType to the map

These steps are well described in The Mapki so I'll not repeat that information here.

Here's an example.

The only significant difference between this example and the Makpki information is that my tiles are stored as images in my web folder, rather than being generated by a tileserver script.

Aligning your map

There's a very nice facility at open.atlas.free.fr/GMapsTransparenciesImgOver.php which can be used to align a map image in the correct place on top of a Google map.

It specifies the preprocessing (scaling and padding) that should be performed on your image before using something like the Automatic Tile Cutter mapki.com/wiki/Automatic_Tile_Cutter to cut your image into tiles.

Bounds checks

One problem with the previous example is that it causes the API to perform standard error tile handling when the user drags the map out of the custom region. This is a bit ugly and slow.

So what we can do is to add a check in the CustomGetTileUrl() code to see if the tile is in the custom region, and if not return a special "blank.jpg" tile.

Here's an example.

It would have been nice to have been able to store the information about the custom region tiles in a series of GBounds() objects (one for each supported zoom level) and test to see if the GPoint() representing the tile number is inside the GBounds(), but there is no GBounds.contains(point) method.

Bounds Checks 2

Instead of returning a blank tile for tiles that are outside the custom region, you could return the URL of a tile from G_NORMAL_MAP or G_SATELLITE_MAP.

The problem with this is that you should then display the Google copyright string whenever a Google tile is visible. This turns out to be extremely tricky to get right.

In this example, I display the custom copyright string whenever a custom tile is visible and the Google copyright string whenever no custom tiles are visible.

If you know a better way of handling the copyright, please let me know atlas@econym.demon.co.uk

Common CustomGetTileUrl formats

This code returns URLs in the format created by the Photoshop tile splitter: "http://mydomain.com/tiles/5295_5922_3.jpg"

      CustomGetTileUrl=function(a,b){
          return "http://mydomain.com/tiles/"+a.x+"_"+a.y+"_"+(17-b)+".jpg";
      }

This code returns URLs in the format created by the Paint Shop Pro tile splitter: "http://mydomain.com/tiles/14_5922x5295.jpg"

      CustomGetTileUrl=function(a,b){
          return "http://mydomain.com/tiles/"+b+"_"+a.y+x+a.x+".jpg";
      }

This code returns URLs in the format used by the Google Normal Map tileserver: "http://mydomain.com/tileserver.php?x=5295&y=5922&zoom=3"

      function CustomGetTileUrl(a,b) {
        var z = 17 - b;
        var f = "http://mydomain.com/tileserver.php?x="+a.x+"&y="+a.y+"&zoom="+z;
        return f;
      }

Potential Pitfalls

Some API features, such as polylines and ground overlays, perform their calculations at zoom level 17, rather than at the max zoom level of the map type. These features will fail if the GProjection() of the map type ahs less than 18 zoom levels.

Back to Mike's Homepage
Up to the start of this tutorial