แสดงภาพแผนที่ Google Maps ในแอปด้วย Google Static Map ~ Akexorcist

เดิมทีเจ้าของบล็อกได้ทำบทความเรื่อง Google Maps ไปแล้ว แต่ว่าบทความนั้นเป็นการใช้ Google Maps Android API v2 คราวนี้มาลองใช้ Google Static Maps กันดูบ้างละกันเนอะ

สำหรับ Google Static Maps เป็นบริการหนึ่งของ Google ที่ทำให้ผู้ใช้สามารถดึงข้อมูลแผนที่ให้ออกมาเป็นไฟล์ภาพได้ การใช้งานก็เพียงแค่เรียก URL เหมือนกับ Google Direction

ทดสอบ Google Static Maps

สำหรับการเปิดบน Web Browser ก็จะเห็นเป็นไฟล์ภาพทันที ผู้ใช้ไม่สามารถเลื่อนพิกัดไปมาได้เหมือน Google Maps แต่สำหรับ Google Static Maps จะเหมาะสำหรับแสดงตำแหน่งเป็นภาพนิ่ง ผู้ใช้ไม่มีการควบคุมหรือสั่งงานใดๆลงบนแผนที่ มีไว้ดูเท่านั้น

ในแอปพลิเคชันเจ้าของบล็อกจะให้แสดงภาพใน ImageView โดยจะมีขนาดของภาพที่จำกัดอยู่ที่ 1280 x 1280 px เท่านั้น และในตัวอย่างนี้เจ้าของบล็อกก็ได้เขียนเป็นคลาสให้เรียกใช้ เพียงแค่กำหนดค่าเบื้องต้นลงไปในโค๊ด ก็สามารถใช้งานได้

สำหรับคำสั่งในการใช้งาน Google Static Maps มีเยอะระดับนึง แต่เจ้าของบล็อกเอามาแค่บางส่วนที่สำคัญๆเท่านั้น ถ้าต้องการข้อมูลลเพิ่มเติมสามารถดูรายละเอียดได้ที่ Static Maps API V2 Developer Guide

ทีนี้ขอเข้าเรื่องของโค๊ดในการใช้งานกันต่อเลยละกัน สำหรับการดึงข้อมูลในแอนดรอยด์จะก็เป็นการดึงข้อมูลที่เป็นไฟล์ภาพบนหน้าเว็ปแล้วแปลงเป็นคลาส Bitmap เพื่อให้สามารถนำไปกำหนดให้แสดงบน Image View ได้

Bitmap bmp = null;
HttpClient httpclient = new DefaultHttpClient();   
HttpGet request = new HttpGet(URL); 

InputStream in = null;
try {
    in = httpclient.execute(request).getEntity().getContent();
    bmp = BitmapFactory.decodeStream(in);
    in.close();
} catch (IllegalStateException e) {
    e.printStackTrace();
} catch (ClientProtocolException e) {
    e.printStackTrace();
} catch (IOException e) {
    e.printStackTrace();
}

imageView.setImageBitmap(bmp);

คำสั่งสั้นดีใช่มั้ยล่ะ? สำหรับ URL คือ URL ที่ใช้กำหนดข้อมูลที่จะแสดง

แต่สิ่งนึงที่สำคัญเลยก็คือต้องขอ Permission เพื่อใช้งาน Internet เสียก่อน

<uses-permission android:name="android.permission.INTERNET"/>

ลองเริ่มดูจากตัวอย่างคร่าวๆในการใช้งาน Google Static Maps ก่อนดีกว่า สำหรับ URL ที่กำหนดให้ Google Static Maps (ขอเรียก GSM) จะเป็นดังนี้

https://maps.googleapis.com/maps/api/staticmap?
center=13.7648136,100.53824096
&zoom=16
&size=600x400
&scale=1
&maptype=roadmap
&sensor=false

ทดสอบโดยกดที่นี่

อันนี้เป็นตัวอย่างง่ายๆ โดยเจ้าของบล็อกพิมแยกบรรทัดให้ ซึ่งจริงๆแล้วเวลาใช้งานก็จะอยู่กันในแถวเดียวนั่นแหละ โดยที่
      center คือพิกัดของกลางภาพที่จะแสดง
      zoom ระดับการซูมของภาพในแผนที่ (1 - 20)
      size ขนาดของภาพกำหนดได้สูงสุด 640 x 640
      scale คือตัวคูณขนาดภาพได้สูงสุดคือ 2 (2 เท่า)
      maptype รูปแบบของแผนที่ที่จะแสดงในภาพ
      sensor การใช้งานเซนเซอร์เพื่อระบุที่อยู่ผู้ใช้

จาก URL ดังกล่าวก็คือภาพแรกสุดของบทความนี้นั่นเอง

สำหรับ size เจ้าของบล็อกได้บอกไว้ว่าสูงสุด 640 x 640 px แต่ก็สามารถใช้ scale เพื่อคูณขนาดภาพให้ใหญ่ขึ้นได้ โดยสูงสุดคือสองเท่า ทำให้ได้ภาพใหญ่สุด 1280 x 1280 px ซึ่งจริงๆแล้วสามารถกำหนดได้มากกว่านี้อีกเยอะเลย แต่ว่าเฉพาะ User ที่เป็นประเภท Business เท่านั้น (จ่ายเงิน) จะทำให้สามารถคูณขนาดภาพได้ถึง 4 เท่าเลยทีเดียว แต่ User ฟรีๆอย่างเจ้าของบล็อก 1280 x 1280 px ก็พอล่ะ

ส่วน maptype ก็จะเหมือนกับบน Google Maps Android API v2 เป๊ะๆเลย

และสามารถกำหนด Format ของไฟล์ภาพที่แสดงได้ด้วย มีให้เลือกทั้ง GIF, PNG8, PNG16, JPG และ JPG-Baseline

อีกทั้งสามารถปัก Marker ได้อีกด้วย โดยใช้คำสั่งดังนี้

https://maps.google.com/maps/api/staticmap?
size=400x400
&scale=2
&maptype=hybrid
&format=jpg
&language=th
&sensor=false
&zoom=15
&markers=13.729626,100.580443

ทดสอบโดยกดที่นี่

สำหรับคำสั่งนี้จะกำหนดแค่ตำแหน่งของ Marker เท่านั้น ไม่ได้กำหนด Center ของภาพ ดังนั้น Google Static Maps ก็จะอิงตำแหน่งจาก Marker เป็นหลักแทน ถ้ามีหลายอันก็เฉลี่ย

https://maps.google.com/maps/api/staticmap?
size=400x400
&scale=2
&maptype=hybrid
&format=jpg
&language=th
&sensor=false
&zoom=15
&markers=13.729626,100.580443
&markers=13.732575,100.582624
&markers=13.730475,100.575624

ทดสอบโดยกดที่นี่

จากคำสั่งข้างบนจะเห็นว่าสามารถเพิ่ม Marker ได้มากกว่าหนึ่งอันและ Center ของภาพจะอยู่ตรงกลางระหว่าง Marker ทั้งสามตัว

ถ้ากำหนด Center เข้าไปด้วย ภาพก็จะอิงตาม Center นั่นเอง โดยไม่สนใจว่า Marker ทีกำหนดนั้นจะหลุดขอบภาพหรือไม่ (ถ้าระยะระหว่าง Marker อยู่ไกล ก็ให้ลดค่า Zoom ลงเพื่อซูมออก)

https://maps.google.com/maps/api/staticmap?center=13.74075,100.585624
&size=400x400
&scale=2
&maptype=hybrid
&format=jpg
&language=th
&sensor=false
&zoom=14
&markers=13.729626,100.580443
&markers=13.732575,100.582624
&markers=13.730475,100.575624

ทดสอบโดยกดที่นี่

และนอกจากนี้ Marker ยังเพิ่มลูกเล่นอื่นๆเข้าไปได้อีกด้วย เช่น กำหนดสี Marker หรือตัวอักษรหรือเลขแสดงบน Marker โดยตัวอักษรหรือเลขนั้นจะต้องเป็นตัวพิมใหญ่และตัวเดียว

https://maps.google.com/maps/api/staticmap?
size=400x400
&scale=2
&maptype=hybrid
&format=jpg
&language=th
&sensor=false
&zoom=14
&markers=color:0x27a3ba|13.729626,100.580443
&markers=label:A|13.732575,100.582624

ทดสอบโดยกดที่นี่

พอแค่นี้ละกัน จริงๆแล้วยังมีอีกเยอะแต่ไม่ค่อยสำคัญ ทีนี้ก็ลองมาดูคลาสที่เข้าของบล็อกเขียนไว้แล้วดีกว่า โดยการทำงานจะไม่มีอะไรมาก หลักๆอยู่ที่การกำหนด URL ซึ่ง URL ที่ว่าก็จะเก็บไว้ในตัวแปรที่เป็น String นั่นเอง แล้วจึงนำไปกำหนดในคลาส HttpGet ตามตัวอย่างตอนแรก

GoogleStaticMaps.java

package app.akexorcist.googlestaticmap;

import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.Locale;

import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.util.Log;

public class GoogleStaticMaps {
    public final static String FORMAT_PNG8 = "png8";
    public final static String FORMAT_PNG32 = "png32";
    public final static String FORMAT_JPEG = "jpg";
    public final static String FORMAT_JPEG_NONPROG = "jpg-baseline";
    public final static String FORMAT_GIF = "gif";
    

    public final static String TYPE_DEFAULT = "roadmap";
    public final static String TYPE_SATELLITE = "satellite";
    public final static String TYPE_TERRAIN = "terrain";
    public final static String TYPE_HYBRID = "hybrid";
    
    public final static int MAX_SIZE = 1280;

    private String mapType = TYPE_DEFAULT;
    private String format = FORMAT_PNG8;
    private String language = Locale.getDefault().getLanguage();
    
    private int width = 200;
    private int height = 200;
    private int scale = 1;

    private ArrayList<String> arr_color = new ArrayList<String>();
    private ArrayList<String> arr_label = new ArrayList<String>();
    private ArrayList<Double> arr_lat = new ArrayList<Double>();
    private ArrayList<Double> arr_lon = new ArrayList<Double>();

    public GoogleStaticMaps() { }
    
    public GoogleStaticMaps(String mapType) { 
        this.mapType = mapType;
    }
    
    public GoogleStaticMaps(String mapType, String language) { 
        this.mapType = mapType;
        this.language = language;
    }
    
    public GoogleStaticMaps(int width, int height) { 
        if(width <= 640 || height <= 640) {
            scale = 1;
            this.width = width;
            this.height = height;
        } else {
            scale = 2;
            this.width = width / 2;
            this.height = height / 2;
        }
    }

    public GoogleStaticMaps(int width, int height, String mapType) { 
        if(width <= 640 || height <= 640) {
            scale = 1;
            this.width = width;
            this.height = height;
        } else {
            scale = 2;
            this.width = width / 2;
            this.height = height / 2;
        }
        this.mapType = mapType;
    }
    
    public GoogleStaticMaps(int width, int height, String mapType
                , String language) { 
        if(width <= 640 || height <= 640) {
            scale = 1;
            this.width = width;
            this.height = height;
        } else {
            scale = 2;
            this.width = width / 2;
            this.height = height / 2;
        }
        this.mapType = mapType;
        this.language = language;
    }
    
    public void setWidth(int width) {
        if(width <= 640) {
            scale = 1;
            this.width = width;
        } else {
            scale = 2;
            if(width >= 1280) 
                width = 1280;
            this.width = width / 2;
            this.height = this.height / 2;
        }
    }
    
    public int getWidth() {
        return this.width;
    }
    
    public void setHeight(int height) {
        if(height <= 640) {
            scale = 1;
            this.height = height;
        } else {
            scale = 2;
            if(height >= 1280) 
                height = 1280;
            this.width = this.width / 2;
            this.height = height / 2;
        }
    }
    
    public int getHeight() {
        return this.height;
    }
    
    public void setSize(int width, int height) {
        if(width <= 640 || height <= 640) {
            scale = 1;
            this.width = width;
            this.height = height;
        } else {
            scale = 2;
            this.width = width / 2;
            this.height = height / 2;
        }
    }
    
    public int[] getSize() {
        return new int[] { this.width, this.height };
    }
    
    public void setLanguage(String language) {
        this.language = language;
    }
    
    public void setImageFormat(String format) {
        if(format.equals(FORMAT_PNG8) 
                || format.equals(FORMAT_PNG32) 
                || format.equals(FORMAT_GIF) 
                || format.equals(FORMAT_JPEG) 
                || format.equals(FORMAT_JPEG_NONPROG)) 
            this.format = format;
        else 
            this.format = null;
    }
    
    public void setMapType(String mapType) {
        if(mapType.equals(TYPE_DEFAULT) 
                || mapType.equals(TYPE_SATELLITE)
                || mapType.equals(TYPE_TERRAIN) 
                || mapType.equals(TYPE_HYBRID)) 
            this.mapType = mapType;
        else 
            this.mapType = null;
    }
    
    public String getMapType() {
        return this.mapType;
    }
    
    public void addMarker(double latitude, double longitude
            , String color, String label) {
        this.arr_color.add(color);
        this.arr_label.add(label);
        this.arr_lat.add(latitude);
        this.arr_lon.add(longitude);
    }
    
    public void addMarker(double latitude, double longitude
            , String label) {
        this.arr_color.add(null);
        this.arr_label.add(label);
        this.arr_lat.add(latitude);
        this.arr_lon.add(longitude);
    }
    
    public void addMarker(double latitude, double longitude) {
        this.arr_color.add(null);
        this.arr_label.add("");
        this.arr_lat.add(latitude);
        this.arr_lon.add(longitude);
    }
    
    public void removeMarker(int position) {
        this.arr_color.remove(position);
        this.arr_label.remove(position);
        this.arr_lat.remove(position);
        this.arr_lon.remove(position);
    }
    
    public int getMarkerCount() {
        return this.arr_lat.size();
    }
    
    public void clearMarker() {
        arr_color = new ArrayList<String>();
        arr_label = new ArrayList<String>();
        arr_lat = new ArrayList<Double>();
        arr_lon = new ArrayList<Double>();
    }
    
    public Bitmap getMapByCenter(double latitude, double longitude
                , int zoom) {
        String URL = "https://maps.google.com/maps/api/staticmap?";
        URL += "center=" + String.valueOf(latitude) 
                + "," + String.valueOf(longitude);
        URL += "&size=" + String.valueOf(width) 
                + "x" + String.valueOf(height);
        URL += "&scale=" + String.valueOf(scale);
        URL += "&maptype=" + String.valueOf(mapType);
        URL += "&format=" + String.valueOf(format);
        URL += "&language=" + String.valueOf(language);
        URL += "&sensor=false";
        
        if(zoom != -1)
            URL += "&zoom=" + String.valueOf(zoom);
        
        for(int i = 0 ; i < arr_lat.size() ; i++) {
            URL += "&markers=";
            if(arr_color.get(i) != null)
                URL += "color:" + arr_color.get(i) + "|";
            if(!arr_label.get(i).equals(""))
                URL += "label:" + arr_label.get(i).toUpperCase() + "|";
            URL += arr_lat.get(i) + "," + arr_lon.get(i);
        }
        Log.i("Check", URL);
        
        Bitmap bmp = null;
        HttpClient httpclient = new DefaultHttpClient();   
        HttpGet request = new HttpGet(URL); 

        InputStream in = null;
        try {
            in = httpclient.execute(request).getEntity().getContent();
            bmp = BitmapFactory.decodeStream(in);
            in.close();
        } catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (ClientProtocolException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        return bmp;
    }
    
    public Bitmap getMapByMarker() {
        String URL = "https://maps.google.com/maps/api/staticmap?";
        URL += "size=" + String.valueOf(width) 
                + "x" + String.valueOf(height);
        URL += "&scale=" + String.valueOf(scale);
        URL += "&maptype=" + String.valueOf(mapType);
        URL += "&format=" + String.valueOf(format);
        URL += "&language=" + String.valueOf(language);
        URL += "&sensor=false";
        
        for(int i = 0 ; i < arr_lat.size() ; i++) {
            URL += "&markers=";
            if(arr_color.get(i) != null)
                URL += "color:" + arr_color.get(i) + "|";
            if(!arr_label.get(i).equals(""))
                URL += "label:" + arr_label.get(i) + "|";
            URL += arr_lat.get(i) + "," + arr_lon.get(i);
        }
        Log.i("Check", URL);
        
        Bitmap bmp = null;
        HttpClient httpclient = new DefaultHttpClient();   
        HttpGet request = new HttpGet(URL); 

        InputStream in = null;
        try {
            in = httpclient.execute(request).getEntity().getContent();
            bmp = BitmapFactory.decodeStream(in);
            in.close();
        } catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (ClientProtocolException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        return bmp;
    }
    
}

โค๊ดยาวไปหน่อย เพราะทำให้รองรับการใช้งานหลายๆแบบ

1. ค่าคงที่แบบ String ที่เอาไว้ให้ผู้ใช้กำหนดรูปแบบไฟล์ภาพ

2. ค่าคงที่แบบ String ที่เอาไว้ให้ผู้ใช้กำหนดรูปแบบแผนที่

3. ค่าคงที่แบบ Integer เป็นค่าสูงสุดของขนาดภาพ

4. ตัวแปรกำหนด Format ของภาพ Map Type ของแผนที่และ Language ของภาษาที่ใช้ในภาพแผนที่ เวลาที่กำหนดค่าต่างๆ ก็จะกำหนดค่าที่ตัวแปรพวกนี้ โดยกำหนดผ่านการเรียกฟังก์ชันอีกทีนึง ไม่ได้กำหนดตรงๆ

5. ตัวแปรกำหนดความกว้างและความสูงและสเกลของภาพ เวลาที่กำหนดค่าเหล่านี้ก็จะกำหนดค่าที่ตัวแปรพวกนี้ โดยกำหนดผ่านการเรียกฟังก์ชันอีกทีนึง ไม่ได้กำหนดตรงๆ

6. คลาส ArrayList สำหรับเก็บข้อมูลที่ใช้กำหนด Marker โดยจะมีทั้งหมดสี่ตัวคือ สี, ข้อความ, ละติจูด และลองติจูด

7. ฟังก์ชันสำหรับกำหนดค่าให้กับคลาสดังกล่าว การประกาศด้วยฟังก์ชันนี้จะใช้การกำหนดค่าตาม Default เวลาประกาศคลาส Google Static Maps ก็จะประกาศดังนี้

GoogleStaticMaps gsm = new GoogleStaticMaps();

8. อีกหนึ่งฟังก์ชันสำหรับกำหนดค่าให้กับคลาสดังกล่าว การประกาศด้วยฟังก์ชันนี้จะมีการกำหนด Map Type ด้วย เวลาประกาศคลาส Google Static Maps ก็จะประกาศดังนี้

GoogleStaticMaps gsm = 
        new GoogleStaticMaps(GoogleStaticMaps.TYPE_HYBRID);

9. อีกหนึ่งฟังก์ชันสำหรับกำหนดค่าให้กับคลาสดังกล่าว การประกาศด้วยฟังก์ชันนี้จะกำหนด Map Type กับ Language เวลาประกาศคลาส Google Static Maps ก็จะประกาศดังนี้

GoogleStaticMaps gsm = 
        new GoogleStaticMaps(GoogleStaticMaps.TYPE_HYBRID, "th");

10. อีกหนึ่งฟังก์ชันสำหรับกำหนดค่าให้กับคลาสดังกล่าว การประกาศด้วยฟังก์ชันนี้จะกำหนดความกว้างกับสูงของภาพ เวลาประกาศคลาส Google Static Maps ก็จะประกาศดังนี้

GoogleStaticMaps gsm = new GoogleStaticMaps(600, 400);

11. อีกหนึ่งฟังก์ชันสำหรับกำหนดค่าให้กับคลาสดังกล่าว การประกาศด้วยฟังก์ชันนี้จะกำหนดความกว้างกับสูงและ Map Type เวลาประกาศคลาส Google Static Maps ก็จะประกาศดังนี้

GoogleStaticMaps gsm = 
        new GoogleStaticMaps(800, 480, GoogleStaticMaps.TYPE_TERRAIN);

12. อีกหนึ่งฟังก์ชันสำหรับกำหนดค่าให้กับคลาสดังกล่าว การประกาศด้วยฟังก์ชันนี้จะกำหนดความกว้างกับสูงและ Map Type กับ Language ของภาพที่แสดงด้วย เวลาประกาศคลาส Google Static Maps ก็จะประกาศดังนี้

GoogleStaticMaps gsm = 
        new GoogleStaticMaps(800, 480
        , GoogleStaticMaps.TYPE_TERRAIN, "jp");

หมายเหตุ - สำหรับ 7-12 เป็นฟังก์ชันที่เจ้าของบล็อก Overload ไว้ให้แล้ว ให้ผู้ใช้สามารถเลือกใช้คำสั่งเพื่อกำหนดค่าได้ตามใจชอบ
13. ฟังก์ชันสำหรับกำหนดค่าความกว้างของภาพ ถ้าน้อยกว่า 640 px ให้กำหนดให้สเกลเท่ากับ 1 ถ้ามากกว่าให้สเกลเท่ากับ 2 แล้วความกว้างหารสอง เพราะสเกลเท่ากับ 2 คือขนาดภาพใหญ่สองเท่า

14. ฟังก์ชันรับค่าความกว้างของภาพ Return เป็น Integer

15. ฟังก์ชันสำหรับกำหนดค่าความสูงของภาพ ถ้าน้อยกว่า 640 px ให้กำหนดให้สเกลเท่ากับ 1 ถ้ามากกว่าให้สเกลเท่ากับ 2 แล้วความสูงหารสอง เพราะสเกลเท่ากับ 2 คือขนาดภาพใหญ่สองเท่า

16. ฟังก์ชันรับค่าความสูงของภาพ Return เป็น Integer

17. ฟังก์ชันกำหนดความกว้างและความสูงของภาพ

18. ฟังก์ชันรับค่าความสูงและความกว้างของภาพ โดย Return เป็น Integer Array ที่มีสมาชิก 2 ตัว ตัวแรกคือค่าความกว้าง และตัวที่สองคือค่าความสูง

19. ฟังก์ชันสำหรับกำหนดภาษาบนภาพแผนที่ สำหรับภาษาที่จะแสดงในภาพขึ้นอยู่กับพื้นที่ด้วย สมมติเป็นประเทศไทย ก็จะมีภาษาไทยกับอังกฤษ ถ้าเป็นประเทศญี่ปุ่น ก็จะมีภาษาญี่ปุ่นกับอังกฤษ แต่สมมติว่าถ้าแสดงภาพแผนที่ในประเทศไทย แล้วกำหนดภาษาที่แสดงเป็นญี่ปุ่น ก็จะไม่มี โดยจะเปลี่ยนไปแสดงเป็นภาษาอังกฤษอัตโนมัติ

20. ฟังก์ชันสำหรับกำหนดรูปแบบของไฟล์ภาพ

21. ฟังก์ชันสำหรับกำหนดรูปแบบของพื้นผิวแผนที่

22. ฟังก์ชันรับค่ารูปแบบของพื้นผิวแผนที่ โดยมี Return เป็นตัวแปรแบบ String

23. ฟังก์ชันเพิ่ม Marker ลงบนแผนที่ โดยกำหนดละติจูด, ลองติจูด, สี และตัวอักษร ซึ่งจะนำไปเก็บไว้ในคลาสของ Array List

24. อีกหนึ่งฟังก์ชันเพิ่ม Marker ลงบนแผนที่ โดยกำหนดละติจูด, ลองติจูด และตัวอักษร ซึ่งจะนำไปเก็บไว้ในคลาสของ Array List ส่วน Array List ของสีก็จะกำหนดเป็น null แทน

25. อีกหนึ่งฟังก์ชันเพิ่ม Marker ลงบนแผนที่ โดยกำหนดละติจูด, ลองติจูด เพียงสองอย่าง ซึ่งจะนำไปเก็บไว้ในคลาสของ Array List ส่วน Array List ของสีก็จะกำหนดเป็น null แทน และ Arrat List ของตัวอักษรก็จะเป็นว่างเปล่า

26. ฟังก์ชันลบ Marker โดยอิงจากลำดับที่กำหนด สมมติว่าถ้ามี Marker สามตัว แล้วลบลำดับที่ 0 Marker ตัวแรกสุด (ดูที่ลำดับคำสั่ง) ก็จะถูกลบ

27. ฟังก์ชันเช็คจำนวน Marker ที่กำหนดไว้ โดยมี Return เป็นตัวแปรแบบ Integer

  28. ฟังก์ชันลบ Marker ทั้งหมดที่กำหนดไว้
  29. ฟังก์ชันสำหรับรวมค่าที่กำหนดไว้ทั้งหมดเป็น URL แล้วส่งข้อมูลไปที่ Google Static Maps ให้ออกมาเป็นภาพ แล้วใช้คลาส HttpClient กับ HttpGet เพื่อดึงข้อมูลเป็น Bitmap พอได้ข้อมูลเป็น Bitmap ก็ Return ค่ากลับไปเป็นคลาส Bitmap โดยที่ฟังก์ชันนี้จะมีการกำหนดตำแหน่งของภาพที่จะแสดงด้วย และจะมีการให้กำหนดพิกัดและระดับในการซูมของภาพ ดังนั้นภาพที่ได้ก็จะอิงตำแหน่งตรงกลางภาพตามที่กำหนด

  30. ฟังก์ชันนี้จะคล้ายกับฟังก์ชัน getMapByCenter (29) ที่นำค่าทั้งหมดไปรวมเป็น URL เพื่อดึงภาพเป็น Bitmap แต่ว่าฟังก์ชันนี้จะไม่มีการกำหนดตำแหน่งตรงกลางภาพแผนที่ โดยที่ฟังก์ชันนี้จะอิงจาก Marker ที่กำหนดแทน ดังนั้นภาพที่ได้จะก็อิงตำแหน่งโดยเฉลี่ยจากตำแหน่ง Marker

main.xml

<LinearLayout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_weight="1" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_weight="1" />

</LinearLayout>

สำหรับ Layout ที่สร้างในตัวอย่างนี้สังเกตุให้ดีๆ เจ้าของบล็อกได้ใช้ layout_weight เข้ามาช่วยด้วย [Android Design] Layout Weight ใช้อย่างไร ใช้ให้เป็น เพื่อให้ ImageView สองอันแบ่งครึ่งนึงหนึ่งจอพอดี เพราะตัวอย่างนี้จะให้แสดงแผนที่สองแบบ

Main.java

package app.akexorcist.googlestaticmap;

import android.os.Bundle;
import android.app.Activity;
import android.widget.ImageView;

public class Main extends Activity {
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        GoogleStaticMaps gsm = new GoogleStaticMaps();
        gsm.setSize(800, 800);
        gsm.addMarker(13.729526, 102.580533);
        gsm.addMarker(23.749536, 104.590543);
        gsm.addMarker(10.829546, 106.600553);
        ImageView imageView1 = (ImageView)findViewById(R.id.imageView1);
        imageView1.setImageBitmap(gsm.getMapByMarker());
        
        gsm.clearMarker();
        
        gsm.addMarker(13.729626, 100.580443);
        gsm.setLanguage("th");
        gsm.setMapType(GoogleStaticMaps.TYPE_HYBRID);
        gsm.setImageFormat(GoogleStaticMaps.FORMAT_JPEG);
        ImageView imageView2 = (ImageView)findViewById(R.id.imageView2);
        imageView2.setImageBitmap(gsm.getMapByCenter(13.73031, 100.58183, 15));
    }
}

1. ประกาศคลาส GoogleStaticMaps โดยให้ชื่อว่า gsm และกำหนดให้ภาพแผนที่ที่จะแสดงมีขนาด 800 x 800 px จากนั้นเพิ่ม Marker เข้าไปบนแผนที่ด้วยกัน 3 ตำแหน่ง แล้วทำการประกาศคลาส ImageView เพื่อแสดงแผนที่ โดยจะแสดงภาพแผนที่ของคำสั่งชุดนี้ที่ imageView1

2. ทำการเคลียร์ Marker บนแผนที่ออกก่อนจะใช้งานต่อ

3. ก่อนเลยก็เพิ่ม Marker ลงบนแผนที่ 1 ตำแหน่ง แล้วให้แสดงแผนที่แบบ Hybrid และไฟล์ภาพเป็น .jpg จากนั้นก็ประกาศคลาส ImageView เพื่อแสดงแผนที่ โดยจะแสดงภาพแผนที่ของคำสั่งชุดนี้ที่ imageView2

ภาพที่ดึงมาจาก Google Static Maps ก็จะมีสองภาพด้วยกัน โดยการกำหนดค่าจะแยกตามคำสั่งที่อยู่ใน 1 และ 3 ดังนั้นเมื่อแสดงภาพแผนที่จาก Google Static Maps ภาพซ้ายมือคือคำสั่งใน 1 ส่วนขวามือคือคำสั่งใน 3

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="app.akexorcist.googlestaticmap"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />
    <uses-permission android:name="android.permission.INTERNET"/>
    
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="app.akexorcist.googlestaticmap.Main"
            android:label="@string/app_name" 
            android:screenOrientation="sensorLandscape">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

เพียงเท่านี้ก็สามารถดึงภาพแผนที่ของ Google Maps มาแสดงอยู่บนบนแอปพลิเคชันอย่างง่ายๆได้แล้ว

สำหรับผู้ที่หลงเข้ามาอ่านคนใดต้องการไฟล์ตัวอย่าง สามารถดาวน์โหลดได้ที่ Google Static Maps [Google Drive]

02 May 2013