Google Maps API Tutorial

By sarah

A project I’ve been recently working on required me to create an background google map with specific locations plotted. On top of this functionality, the design called for it to have a custom overlay to fit in with the branding of the website. And there started many long days of searching the web and playing around with scripts before finally producing a working map. The lack of a simple tutorial for this visually impressive feature has inspired me to write one myself.

I’m going to try and explain how to give an already embedded map a custom overlay. This will only work in accordance with V2 of Google’s map API.

1) Create a GCopyright Object

Google requires all tiles to have a copyright owner set. The GCopyright constructor follows the following form:

var copyright = new GCopyright(, , );

2) Create a GCopyrightCollection

You then have to create a GCopyrightCollection as you are going to be creating a set of tiles. This follows the form:

var copyrightCollection = new GCopyrightCollection();

3) Add the GCopyright Object to the GCopyright Collection

You then have to add your GCopyright instance to the GCopyrightCollection. This will group together the copyright of your generated tiles.

var copyrightCollection = new GCopyrightCollection('Chart');
copyrightCollection.addCopyright(copyright);

4) Create a GTile Layer Object

You then need to create a layer that will represent the actual images of the custom map type. Here you will need to decide on the minimum and maximum zoom levels of your map as well as the location of the tiles. This script will map the tile coordinate to the map tile where a is the coordinate and b is the zoom level.

var tilelayers = [new GTileLayer(copyrightCollection, 13, 15)];
tilelayers[0].getTileUrl = CustomGetTileUrl;

CustomGetTileUrl = function (a, b) {
if (a.x >= 533 && a.x <= 2133 && a.y >= 295 && a.y <= 1187) {
return "Uploads/Images/Map/" + b + "_" + a.x + "_" + a.y + ".jpg";
} else {
return "Uploads/Images/Map/" + b + "_" + a.x + "_" + a.y + ".jpg";
}
}

5) Create a GMapType Object

Most of this can be unchanged for your map but it is vital for the next step.

var custommap = new GMapType(tilelayers, G_SATELLITE_MAP.getProjection(), "Old OS");

6) Apply the GMapType to your map

Now you’ve set up your GMapType, just add it to your already created default google map.

map.addMapType(custommap);

Now this is all the code you will need in your javascript file. However at the moment it is pointing to images of tiles that don’t exist. So we need to save these to the folders we specified earlier. Now if you have a lot of time you could do this manually but the likelihood is you’re implementing multiple zoom levels in which case there will be hundreds or even thousands of images.

7) Configure your tile generator

There is a great script here http://mapki.com/wiki/Automatic_Tile_Cutter#Updated_Script. You will need to customise the following values in accordance with your map.

var FolderPath – //The path to the folder where the images will be stored.
var OrgX - //The x value
var OrgY - //The Y value
var OrgZoomLevel = 5; - //The zoom level
var OrgTileWidth - //The number of tiles wide your map is.
var OrgTileHeight - //The number of tiles high your map is.

http://anymap.org/GmapImage2TileGenerator/ - This app will help you work out map width, height and your first x and y values.

8) Run your tile generator

You need to open your custom map image in photoshop and run the script that you have just created. File > Scripts > Browse >. Make sure the folder that you have set in the script exists.

And you should now have a custom overlay for your google map. Here a few examples:
http://dentsunetwork.com/#/network/agencies
http://novembro.net/es/home

Related posts