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)

Answer 1

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.

Answer 2

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

1. Let's look here first: https://developers.google.com/maps/documentation/android/hello-mapview

2. 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.

Answer 3

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):

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

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

• 1&2: https://developers.google.com/maps/documentation/android/reference/com/google/android/maps/MapView
• 3: Android and GoogleMaps: disable the mapView dragging
• 4: https://developers.google.com/maps/documentation/android/hello-mapview