Map view bubble example

main.xml

map_tag_bubble.xml

manifest.xml

map_bubble_background.xml

MapBubbleActivity.java

package monstercodz.blogspot.com;

import java.util.ArrayList;
import java.util.List;

import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.ItemizedOverlay;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;
import com.google.android.maps.MyLocationOverlay;
import com.google.android.maps.OverlayItem;

public class MapBubbleActivity extends MapActivity {
 private MapView map = null;
 private MyLocationOverlay me = null;
 private View viewBubble;
 private ViewGroup parentBubble;
 private OverlayItem item;
 private GeoPoint geo;

 @Override
 public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        map = (MapView) findViewById(R.id.map);

        map.getController().setCenter(
                        getPoint(40.76793169992044, -73.98180484771729));
        map.getController().setZoom(17);
        map.setBuiltInZoomControls(true);

        Drawable marker = getResources().getDrawable(R.drawable.marker);

        marker.setBounds(0, 0, marker.getIntrinsicWidth(),
                        marker.getIntrinsicHeight());

        map.getOverlays().add(new SitesOverlay(marker));

        me = new MyLocationOverlay(this, map);
        map.getOverlays().add(me);
 }

 @Override
 public void onResume() {
        super.onResume();

        me.enableCompass();
 }

 @Override
 public void onPause() {
        super.onPause();

        me.disableCompass();
 }

 @Override
 protected boolean isRouteDisplayed() {
        return (false);
 }

 @Override
 public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_S) {
                map.setSatellite(!map.isSatellite());
                return (true);
        } else if (keyCode == KeyEvent.KEYCODE_Z) {
                map.displayZoomControls(true);
                return (true);
        }

        return (super.onKeyDown(keyCode, event));
 }

 private GeoPoint getPoint(double lat, double lon) {
        return (new GeoPoint((int) (lat * 1000000.0), (int) (lon * 1000000.0)));
 }

 private class SitesOverlay extends ItemizedOverlay {
        private List items = new ArrayList();

        public SitesOverlay(Drawable marker) {
                super(marker);
                boundCenterBottom(marker);

                items.add(new OverlayItem(getPoint(40.748963847316034,
                                -73.96807193756104), "UN", "United Nations"));
                items.add(new OverlayItem(getPoint(40.76866299974387,
                                -73.98268461227417), "Lincoln Center",
                                "Home of Jazz at Lincoln Center"));
                items.add(new OverlayItem(getPoint(40.765136435316755,
                                -73.97989511489868), "Carnegie Hall",
                                "Where you go with practice, practice, practice"));
                items.add(new OverlayItem(getPoint(40.70686417491799,
                                -74.01572942733765), "The Downtown Club",
                                "Original home of the Heisman Trophy"));

                populate();
        }

        @Override
        protected OverlayItem createItem(int i) {
                return (items.get(i));
        }
        
        @Override
        public boolean onTap(GeoPoint p, MapView mapView) {
         dimissbubble();
         return super.onTap(p, mapView);
        }

        @Override
        protected boolean onTap(int i) {

                item = getItem(i);
                geo = item.getPoint();
                addBubble(geo);  //We call the functtion addbubble passing the position of the item tapped
                return (true);
        }

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

 private void dimissbubble(){
  if (viewBubble != null) {
   map.removeView(viewBubble);
   viewBubble = null;
  }
 }

 //the main function about bubble
 private void addBubble(GeoPoint point) {
  dimissbubble();
 //if there isn't any bubble on the screen enter
        if (viewBubble == null) {

                parentBubble = (ViewGroup) map.getParent();
               //We inflate the view with the bubble
                viewBubble = getLayoutInflater().inflate(R.layout.map_tag_bubble,
                                parentBubble, false);

                //to position the bubble over the map. The -128 and -150 are the offset.
                MapView.LayoutParams mvlp = new MapView.LayoutParams(
                                MapView.LayoutParams.WRAP_CONTENT,
                                MapView.LayoutParams.WRAP_CONTENT, geo, -128, -150,
                                MapView.LayoutParams.LEFT);
                
                /*LayoutParams mvlp = new MapView.LayoutParams(
            MapView.LayoutParams.WRAP_CONTENT, 
            MapView.LayoutParams.WRAP_CONTENT, geo, 
            MapView.LayoutParams.TOP | MapView.LayoutParams.CENTER_HORIZONTAL);*/
                
                LinearLayout f = (LinearLayout) viewBubble;
 //Fill the text
                ((TextView) f.findViewById(R.id.tag_title_textview))
                .setText(item.getTitle());
                ((TextView) f.findViewById(R.id.tag_last_seen_textview))
                .setText(item.getSnippet());

                // ((TextView)((FrameLayout)viewBubble))).findViewById(R.id.bubbleText))))
 //And the event.
                viewBubble.setOnClickListener(new OnClickListener() {

                        //When we touch the bubble it is removed. And make null viewBubble to reuse it.
                        @Override
                        public void onClick(View v) {
                                map.removeView(viewBubble);
                                viewBubble = null;

                        }
                });
                //As you see, add in the map.
                map.addView(viewBubble, mvlp);
        }
 }
 }

you file structure should look like this

you drawable image

Download the source code clickHere