การปักหมุด และ การทำ balloon popup google map android

package com.app.na5cent.library;

import java.text.DecimalFormat;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Point;
import android.graphics.drawable.Drawable;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.Projection;

import com.app.na5cent.ProfileActivity;
import com.app.na5cent.R;
import com.app.na5cent.User;

public class MapUserMarker extends Overlay {

    private Context context;
    private User user;
    private GeoPoint gop;
    private LinearLayout view;
    private LayoutInflater inflater;

    public MapUserMarker(Context context, User user) {
        this.context = context;
        this.user = user;
        loadContent();
    }

    private void loadContent() {
        gop = new GeoPoint((int) (this.user.getLocation().getLatitute() * 1E6), (int) (this.user.getLocation().getLongitude() * 1E6));
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        view = (LinearLayout) inflater.inflate(R.layout.balloon_popup, null);
        new ImageLoader(((ImageView) view.findViewById(R.id.popup_img))).execute(this.user.getImage());
    }

    @Override
    public boolean draw(Canvas canvas, MapView mapview, boolean shadow, long when) {
        super.draw(canvas, mapview, shadow);
        Projection projection = mapview.getProjection();
        Point screenPts = new Point();
        projection.toPixels(this.gop, screenPts);
        Bitmap bmp;
        if (user.getType().equals("0")) {
            bmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.point_blue);
            canvas.drawBitmap(bmp, screenPts.x - 20, screenPts.y - 20, null);
            return true;
        } else if (user.getType().equals("2")) {
            bmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.user_marker);
        } else if (user.getType().equals("1")) {
            bmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.friends_marker);
        } else {
            bmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.other_marker);
        }
        canvas.drawBitmap(bmp, screenPts.x - 33, screenPts.y - 67, null);
        return true;
    }

    public boolean onTap(GeoPoint g, MapView m) {
        Point pointTap = m.getProjection().toPixels(g, null);
        Point pointMap = m.getProjection().toPixels(this.gop, null);
        double x1 = pointMap.x - 3;
        double y1 = pointMap.y - 30;
        double x2 = pointTap.x;
        double y2 = pointTap.y;
        double r = Math.sqrt(
                Math.pow((x1 - x2), 2)
                + Math.pow((y1 - y2), 2));
        if (r <= 25) {
            m.getController().animateTo(this.gop);
            drawPopUp(this.gop, m);
            return true;
        }
        return super.onTap(g, m);
    }

    private void drawPopUp(GeoPoint g, MapView m) {
        LayoutParams lp;
        lp = new MapView.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT,
                g,
                -232,
                -350,
                LayoutParams.WRAP_CONTENT);

        Intent in = new Intent(context, ProfileActivity.class);
        in.putExtra("id", this.user.getId());

        ((ImageView) view.findViewById(R.id.popup_img)).setOnClickListener(new ImageClick(in));
        ((ImageView) view.findViewById(R.id.popup_exit)).setOnClickListener(new PopupExit(m));
        ((TextView) view.findViewById(R.id.popup_uname)).setText(this.user.getName());
        ((TextView) view.findViewById(R.id.popup_about)).setText(this.user.getAbout());
        ((TextView) view.findViewById(R.id.popup_distance)).setText("distance : " + this.user.getDistance());
        m.removeAllViewsInLayout();
        m.invalidate();
        m.addView(view, lp);
        m.invalidate();
    }

    private class PopupExit implements OnClickListener {

        private MapView map;

        public PopupExit(MapView m) {
            this.map = m;
        }

        @Override
        public void onClick(View v) {
            this.map.removeAllViewsInLayout();
            this.map.invalidate();
        }
    }

    private class ImageClick implements OnClickListener {

        private Intent in;

        public ImageClick(Intent i) {
            this.in = i;
        }

        @Override
        public void onClick(View v) {
            context.startActivity(in);
        }
    }
}

การใช้งาน

    private List<OverLay> list;
    private MapUserMarker mapusermarker;
    private MapCircleUserMarker mapcircleusermarker;
    private void drawUserMarker(){
        int number_of_user = userOnLocation.length;
        mapusermarker = null;
        mapcircleusermarker = null;
        mapusermarker = new MapUserMarker[number_of_user];
        mapcircleusermarker = new MapCircleUserMarker();         
        mapcircleusermarker.setLatitudeLongtiudeRadiusSearchAround(                
             requestl.getLocation(),
             radius_search_around
        );
        list = mapview.getOverlays();
        list.clear();
        list.add(mapcircleusermarker);

        for(int i=number_of_user-1; i >= 0; i--){
            mapusermarker[i] = new MapUserMarker(
                MapActivity.this,
                userOnLocation[i]
            );
            list.add(mapusermarker[i]);
        }
    }

เมื่อเราคลิ๊กที่ icon ก็จะมี balloon popup เด้งขึ้นมาซึ่งจะอยู่บนหัวของ icon นั้นๆ ถ้าต้องการปิดก็กดที่เครื่องหมายกากบาทครับ balloon นั้นก็จะหายไปเอง

อันนี้เป็น class ที่ผมเขียนเอาไว้น่ะครับ

เราจะต้องสร้าง form balloon popup ขึ้นมาครับ เป็นไฟล์ .xml เก็บไว้ในโฟลเดอร์ layout ครับ  ผมตั้งชื่อเป็น balloon_popup.xml  การอ้างถึงเราจะอ้างโดยใช้ R.layout.balloon_popup

        balloon popup เป็นเพียงแค่รูปภาพธรรมดาครับ ผมตั้งชื่อว่า balloon_popup_gradient.png  เอาไว้ในโฟลเดอร์เก็บรูปภาพของแอนดรอยด์(Drawable) ซึ่งผมก็ใช้ photoshop แต่งให้สวยงามเอา  จากนั้นก็นำมาใส่ในไฟล์ balloon_popup.xml  แล้วก็จัด Layout ตาม pattern ที่ต้องการครับ