Google maps map image tiles - google-maps

Question

I've read that you can create a custom image map with tiles. Now i've seen a video where this proces is being done with LeafletJS video here
But how can i accomplish this with google maps. For instance i've the following example map of a zoo. How could i use this with tiles in google maps. Could someone point me in the right direction, tutorials, etc.

Answer 1

Creating tiles for map is not trivial task, and there are many utilities for that (e.g. maptiler). You should split your image to tiles, and save it in, for example, assets folder. Also you need implement custom TileProvider like in this answer of Alex Vasilkov.
But, actually, tiles necessary if you have "big" image, which can't be shown wholly due memory restriction, or you have several images for different zoom levels - in that case one tile of zoomlevel becomes 4 tiles of zoomlevel+1. Taipei zoo schamatics is not so big, so you can use GroundOverlay.
With your image as zoo drawable resource, you can use something like this:
#Override
public void onMapReady(GoogleMap googleMap) {
mGoogleMap = googleMap;
GroundOverlayOptions overlayZoo = new GroundOverlayOptions()
.image(BitmapDescriptorFactory.fromResource(R.drawable.zoo))
.transparency(0.5f)
.bearing(135)
.position(new LatLng(24.995517, 121.584058), 1000f);
mGoogleMap.addGroundOverlay(overlayZoo);
mGoogleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(24.995517, 121.584058), 15.0f));
}
and got something like that:
and it's zoomable, scrollable, rotatable etc.
Of course, it's just example, and you need more precisely referencing, bearing, removing unnecessary elements, etc. Also the image scheme itself is very approximate and differs from the real terrain.