Bham
Bham

Reputation: 319

Google maps map image tiles

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. enter image description here How could i use this with tiles in google maps. Could someone point me in the right direction, tutorials, etc.

Upvotes: 2

Views: 3882

Answers (1)

Andrii Omelchenko
Andrii Omelchenko

Reputation: 13343

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:

Zoo schematics overlay

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.

Upvotes: 1

Related Questions