How to go about creating an interactive map in Android

Question

I need a section of my application to have an interactive map of a square area that consists of about 10 buildings. You have to be able to click on a building and receive some information about it. I know there are a couple of ways to go about this, but I'm hoping someone with some background in this can give me some tips.

Here are some ways that I can think about accomplishing this.

Google Maps

I already implemented Google Maps API and it works quite well, but doesn't really have the effect I was looking for. Google Maps requires an internet connection and gives you access to the entire map. I need it to be locked into one area.

Webviews

This seems like a great alternative. I'm sure I can come up with a simple image map that will give you more information when you click a certain building. The only problem with this is that you also need an internet connection.

OpenGL?

I've never really looked into this too much, but I heard it is difficult and a pain to implement. It would be able to run locally, but is it worth it?

Are there any other way to go about developing an interactive map? Something to keep in mind is that I would also like to someday port this over to iOS (if anyone has any experience with that as well)

you don't need an internet connection to populate a WebView. You can save the html file in the /assets/ directory and load it at runtime. — edthethird, Aug 01 '12 at 18:53
Interesting... post that as an answer, and I'll also take other answers, and compare which method is "better" and then award the bounty. Thanks for the insight. — EGHDK, Aug 01 '12 at 18:55
Using cache on Google Maps is forbidden by the Android Maps APIs Terms of Service (see section 8.2). #justsayin — shkschneider, Aug 07 '12 at 09:29

score 7 · Accepted Answer · edited May 23 '17 at 12:14

If you want full control and are comfortable using html and javascript, I would highly recommend using the open source OpenLayers library. You can create an html page, save it in assets and run it locally on the device. You can create your own set of map tiles or even use one single jpeg file and then 'map' the buildings you want on it and then use the simple but extensive OpenLayers API to allow for building selection and information display. It even has multi-touch functionality built in for panning and zooming. Works great on and off mobile.

You can see a list of examples here. Doing a simple view source on any of the examples will give you a very clear idea of what they are doing. You can also take a look at this example which plots a bunch of image thumbnails on the map area from flicker with the ability to click for more details. This example uses an online feed, but you can easily use a local one.. even one passed in from the app to the webview.

ps. I have no affiliation to OpenLayers other than actively using it for my projects.

Ton of great answers. Best one to fit my needs. Thanks – EGHDK Aug 09 '12 at 16:26 — EGHDK, Aug 09 '12 at 16:26

score 5 · Answer 2 · edited Aug 08 '12 at 14:03

It might take 10 pages to answer your question from the start.

Let's look here first: https://developers.google.com/maps/documentation/android/hello-mapview
After you are able to use MapView, you just need to create your ItemizedOverlay Class.

Replace this class with HelloItemizedOverlay in the Tutorial.

public class GooglerMapItemizedOverlay extends ItemizedOverlay {

    private ArrayList<OverlayItem> mOverlayItems = new ArrayList<OverlayItem>();
    private Context mContext;
    private Paint rectPaint, textPaint;

    public GooglerMapItemizedOverlay(Drawable defaultMarker, Context context) {
        super(boundCenterBottom(defaultMarker));

        mContext = context;
        populate(); 
    }

    @Override
    protected OverlayItem createItem(int i) {
        return mOverlayItems.get(i);
    }

    public void addOverlayItem(OverlayItem overlay) {
        mOverlayItems.add(overlay);
        populate();
    }

    @Override
    public int size() {
        return mOverlayItems.size();
    }

    public void clear(){
        mOverlayItems.clear();
        populate(); 
    }

    @Override
    protected boolean onTap(int index) {
        // information goes here
      OverlayItem item = mOverlayItems.get(index);
      AlertDialog.Builder dialog = new AlertDialog.Builder(mContext);
      dialog.setTitle(item.getTitle());
      dialog.setMessage(item.getSnippet());
      dialog.show();
      return true;
    }
}

Hope this helps.

Why it doesn't ? he asking the way to plot some 10 buildings an can make interaction. Google map provide enough for you to plot the location, with your custom icon (yes, also your building icon) and can make interaction by use onTab that i include in my code. If you understand enough, it can make the camera view to make 3D look like, with out even using openGL :] — Sruit A.Suk, Aug 10 '12 at 06:47

score 2 · Answer 3 · edited May 23 '17 at 11:44

Google Maps

Will have the effect you want (custom location, cannot move, cannot zoom in or out)
But does not allow offline content

Here is how to do it (I did it and it works):

You center on the GPS coordinates that you want to restrict the area
You adjust the zoom level to restrict the area
You disable multitouch events to prevent zoom in or out
You disable dragging to prevent moving around
You handles click on the ItimizedOverlays that you created to handle actions

There are good answers on StackOverflow for each one of these steps.

score 0 · Answer 4 · answered Aug 02 '12 at 09:01

If you need to display always the same map, you could just display the map as background of layout (make the map image) and handle touch positions to show popups for certain building.

Or use webview like stated in the comment and handle touch x,y to map position of building.

How to go about creating an interactive map in Android

Google Maps

Webviews

OpenGL?

4 Answers4