[SOLVED] My image tiles is not aligned to Google map

My image tiles is not aligned to Google map

I'm trying to display an image (tiles) on top of Google maps. It works fine except the image is not well aligned to Google maps.

Before I generated the image, I first calculated the image size width, height by converting from latitude and longitude to pixel location for certain zoom (example 19) using the SphericalMercator. as shown in Google example https://developers.google.com/maps/documentation/javascript/examples/map-coordinates

For Example:

Left Corner  Lat,Lng = 23.635069377090115 ,58.09107364729487
Pixel projection using SphericalMercator for zoom 19 , x= 88766786 , y=58035976

bottom, right Lat,Lng = 23.598520856653636, 58.14957298218598
Pixel projection using SphericalMercator for zoom 19 , x= 88788596 , y=58050848

Once, I got the pixel values for top, left corner and bottom, right comers. I calculated the x delta and y delta which I used as width, height for the generated image

for example:

x2-x1= 21810
y2-y1= 14872

I used a tool to convert an autocad plan to image with the above image width, height.

Than, I cut the image into tiles using imageMagic:

convert -crop 256x256 test4.png tile%d.png

and than I display these tiles.

Tiles displayed but it's not well aligned. Did I missed anything?

Solution

If you are keen to understand the math behind the Spherical Mercator tiles and cut the images yourself check the mashup and source code I prepared down on the page:

http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/

It is available also in other programming languages (PHP,C#,etc) rewritten by other people.

If you just want to solve the task - and have a perfectly matching overlay, optimized size of the tiles, sample viewer not only for Google Maps API, and much more just download the MapTiler from http://www.maptiler.com/.

For images missing the georeference, you either provide Bounding box (coordinates for north, south, east, west) or you can identify the features on the map visually, as seen in this video tutorial: http://youtu.be/eJxdCe9CNYg