Create an overlay of Google Maps with Photoshop

1. Choose an area of your interest

Pan&zoom the map on the right or find a place by entering a location. Select the preferable map type (street/terrain/satellite) and whether to use the double resolution

2. Download the image and coordinates

Right click on the link bellow and choose "Save as" and save the image into your computer:

The image with the map

Copy into clipboard the coordinates of this image from the box bellow - you will need it later for pasting into MapTiler!

Note: Google Static Map API is used to legally generate the above map image.

3. Create your own map layer in Adobe Photoshop

With any graphic editing software you can easily create a new overlay layer with an exact geo positioning on top of this image of the base map. The downloaded map image can be proportionally resized, so you can prepare an overlay with a significantly higher resolution then the downloaded image - the coordinates will not change.

Once you are finished with your own map editing on top of this layer, save just your new overlay layer as a PNG with transparency covering exactly the same area as the original image.

4. Process you image with MapTiler

Open MapTiler application, choose "Tiles a la Google Maps" and drop in your own generated PNG file with transparency. To correctly position your image use these options:

Georeference

When asked for "Missing georeference" choose the option Specify bounding box (West South East North) and paste in the dialog the coordinates from the above box in Step 2.

Coordinate system

When asked for "Missing coordinate system" choose in the dropdown the option Specify the id-number from EPSG/ESRI database and type in the input box number 3857 for EPSG:3857 and follow by click on "Set" button next to it.

Now you can click "Continue", keep the default output options and click "Render"to prepare your map. You will get perfectly aligned zoomable map overlay displayed in Google Maps API, which can be further enriched with JavaScript programming with markers or additional functionality. The same rendered map tiles can be used to create your own native mobile application to show users their actual position on the map you drawn.