Search code examples
javascriptgoogle-mapsgeocodingtile

Google Maps: Custom Tiles being pushed up


I'm working on creating custom map tiles (.PNG) which I can show with ImageMapType from the Google Maps API range. In general, the tiles are shown fine and I get the tiles I want with no real problems.

However, an issue which I can not seem to solve at all, is a weird upwards push of the tiles at a single specific zoom level (9). My original tiles do have many gaps for the ocean in them, so I generate blank tiles to fill in the gaps by surrounding my original map tiles with transparent points in a grid.

For testing purposes, and to show you the exact issue, i've made the grid points visible, and quickly taken a snapshot of the upwards push during the transition phase. The top left of the dark region is where the corner was for the previous layer, and after zooming in, the top marked section is where the corner moved it.

After I go past this layer, into layer 10, the corner goes back down a level, to where it would have been if layer 9 wasnt so buggy.

Hope I've provided enough information and I'll be grateful of any advice. An upwards shift in map tile location


Solution

  • For zoom problem keep one transparent div with z-index and then set map zoom on 9 also hide its zoom control from map By this no one can zoom your map and for tile problem I need its demo page for more information but with this answer i attached a url for your help with full tutorial just check it : https://developers.google.com/maps/documentation/javascript/v2/overlays#Custom_Map_Types

    Gud luck