Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone



Clound SSD Virtual Server

Android Google Map (Step by Step)

Android Google Map (Step by Step) ความตั้งใจแต่แรกได้เขียนบทความ Android กับ Google Map ไว้นานแล้ว แต่ไม่มีเวลามาทำต่อและเอาเนื้อหาขึ้นเว็บซะที และช่วงนี้มีเวลาว่าง 1-2 อาทิตย์ เลยอาศัยเวลาว่างจัดบทความเล็ก ๆ ประมาณ 5-6 บทความ สอนแบบง่าย ๆ ให้เข้าใจและเป็นตัวอย่างในการเขียน Android ในการเรียกใช้งาน Google Map (แผนที่) แบบ Step by Step ขออธิบายรุปแบบง่าย ๆ เกี่ยวกับ วิธีการเรียกใช้งาน Google Map ว่าเหมือนกับการเรียกใช้งาน Google Map บน Web Application ทั่ว ๆ ไป คือ Google Map จะมีชุดคำสั่งหรือเราเรียกว่า Library ชื่อว่า Google Maps Android API ที่ช่วยให้สามารถเรียกใช้งาน Google Map ได้ง่ายและสะดวกยิ่งขึ้น โดย Library ตัวนี้สามารถติดตั้งได้จาก Android SDK Manager จาก Package ที่มีชื่อว่า "Google Play services" ซึ่ง Package นี้จะเป็นแหล่วงรวบรวม Services และ Library ต่าง ๆ ที่อยู่ภายใต้บริการของ Google และอีกสิ่งหนึ่งที่ขาดไม่ได้คือ API Key ที่จะใช้งาน Map มันคือรหัส Key ใบเบิกทางที่จะไปเรียก Google Map มาแสดงผลบน Android App สามารถลงทะเบียนได้จากทาง Google Developer Console โดยในเบื้องต้นสามารถขอ API Key เพื่อใช้งานได้ฟรี ตามฟีเจอร์ที่และขนาดความสามารถของ Pacakge ซึ่งอาจจะถูก Limit ไว้ เช่น จำนวนที่ Request หรือ จำนวนหมุดที่ปักได้



Android and Google Map


ในการสมัคร API Key จาก Google Developer Console เราอาจจะได้รู้จักประโยคหรือ Keyword ใหม่ ๆ ในการเขียน Android App เช่น Debug Keystore และ SHA1 ซึ่งทั้ง 2 ตัวนี้มันไม่มีอะไรซับซ้อน ถ้าเราเพียงอยู่ในขั้นตอนการ Develop สามารถข้ามขั้นตอนนี้ และไปยังการขอ API Key ได้เลย

เกี่ยวกับ Debug Keystore และ SHA1
ถ้าจะให้เข้าใจง่าย ๆ Keystore และ SHA1 มันคือ Key และรหัส ที่แตกต่างกันในแต่ล่ะเครื่อง ที่จะถูกประทับตราลงใน App ที่ถูกส่งไปกับ .apk (เมื่อนำไปใช้งาน) เหตุที่มันมาเกี่ยวข้องก็คือ การขอ API Key จาก Google Map เราจะได้รหัสที่เป็น Key มาใช้งาน แล้วถ้าเกิดใครรู้ Key ที่เราสร้างขึ้น ก็สามารถนำไปใช้งานได้ และถ้ายิ่งเป็น Package ที่เสียค่าบริการด้วยแล้ว เราจะถูกแอบใช้ Key ไปโดยเสียผลประโยชน์เปล่า ๆ ฉะนั้น ในการสมัคร API Key เราสามารถระบุรหัส SHA1 ที่ได้จาก Keystore เพื่อภูกกับ App (Package name) ที่เราเขียนขึ้น ฉะนั้น Key นั้น ๆ จะใช้ได้เฉพาะ App ของเราเท่านั้น

สรุปสิ่งที่ต้องมีในการเขียน Android กับ Google Map
  • ปัจจุบัน Google Map API อยู่ที่เวอร์ 2 (V 2) : อันนี้แจ้งให้ทราบ
  • Google Maps Android API มาพร้อมกับ Package ของ Google Play services
  • Debug Keystore และ SHA1 (ถ้าอยู่ในเฟสของ Dev ก็ไม่ต้องสนใจ)
  • Google API Key ขอได้จาก Google Developer Console => https://console.developers.google.com/
  • Mobile หรือ Tablet สำหรับรัน เพราะ Map ไม่สามารถแสดงผลบน Emulator ได้


เริ่มต้นการเขียน Android กับ Google Map (Step by Step)

Android Google Map

ก่อนอื่นให้เปิด Android SDK Manager ติดตั้ง Package ที่มีชื่อว่า "Google Play services"

Android Google Map

หลังจากที่ติดตั้งแล้วตัว Library จะอยู่ที่ Path

C:\android-sdks\extras\google\google_play_services\libproject\google-play-services_lib

โฟเดอร์ C:\android-sdks อาจจะอยู่แตกต่างกันไป และเราจะ Add ไฟล์นี้เพื่อเรียกใช้งานในโปรเจค หรือจะเรียกใช้งาน bin\google-play-services_lib.jar โดยเพิ่ม JAR เข้าไปในโปรเจคได้เลย

Android Google Map

ให้เปิดโปรแกรม Eclipse (ส่วน Android Studio ก็ไม่ได้แตกต่างกัน) เลือกเมนู File -> Import

Android Google Map

(ในกรณีที่เรียกใช้งาน bin\google-play-services_lib.jar สามารถข้ามขั้นตอนนี้ไปได้เลย)








เลือก Existing Android Code Into Workspace

Android Google Map

เลือกเปิด Library ของ google-play-services_lib

Android Google Map

ไฟล์ Library ของ google-play-services_lib

Android Google Map

มายัง Project ปัจจุบันของเรา คลิกขวาเลือก Properties

(ย้ำ ในกรณีที่เรียกใช้งาน bin\google-play-services_lib.jar สามารถข้ามขั้นตอนนี้ไปได้เลย)

Android Google Map

เลือก Android และ Add ดังภาพ

Android Google Map

เลือก google-play-services_lib

Android Google Map

ตอนนี้เราได้ชุด Library ของ google-play-services_lib เข้ามาใน Project เรียบร้อยแล้ว

Android Google Map

ใน AndroidManifest.xml เพิ่ม Permission ดังนี้

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />


ขั้นตอนการอ่านค่า Keystore และ SHA1 (ถ้าอยู่ในเฟสของ Dev ก็ไม่ต้องสนใจ ข้ามไปขั้นตอนการสมัคร API Key ได้เลย)

Android Google Map

ไฟล์ debug.keystore จะมาพร้อมกับ Android SDK ปกติจะอยู่ที่

Windows
C:\Users\<your_user_name>\.android\debug.keystore

Mac OS X
~/.android/debug.keystore


เราสามารถใช้คำสั่ง

Windows
keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

Mac OS X
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android


เพื่อทำการอ่านรหัสของ SHA1

Android Google Map

ปกติแล้วมันจะได้ แต่ถ้า Error ดังรูปแสดงว่าไม่ได้ Set Path ของ Java JDK ไว้ซึ่งมันไม่รู้จักคำสั่งของ keytool

Android Google Map

ให้ Search หาว่ามันอยู่ที่ไหน หรือไม่ก็ไป Set Path ที่ Environment Variables

Android Google Map

ใช้การ CD เข้ามาใน Path ของ JDK

Android Google Map

ทดสอบรันใหม่เราจะได้รหัสของ SHA1 ซึ่งอันที่จริงแล้วมันมีรหัสหลายประเภท ขึ้นอยู่ว่า API นั้น ๆ ต้องการรหัสชุดไหน

Android Google Map

คลิกขวาเพื่อ Select All และ Copy

MD5: 31:39:AC:F1:C5:1E:F0:8C:90:2B:2C:BD:C9:F0:44:76
SHA1: 63:83:0D:91:E5:E0:1A:64:46:56:04:CB:19:5E:2E:78:E7:95:13:40
SHA256: 4C:3D:AD:DE:74:25:FE:6A:A6:53:75:9D:81:65:7C:5E:52:7D:F5:69:75:16:5A:6C:7E:D7:DB:F1:F4:4B:E4:AA
Signature algorithm name: SHA256withRSA
Version: 3

รหัส SHA1 ที่จะใช้ในการสมัคร API Key

การสมัคร Google API Key จำเป็นจะต้องมี ถ้าไม่มีจะไม่สามารถเรียก Map มาแสดงได้

Google Developer Console
https://console.developers.google.com/

URL สำหรับการสมัคร ซึ่งจะต้องใช้ Account ของ Gmail

Android Google Map

หลังจากที่ Login เข้ามาแล้ว จะเป็นหน้าจอของ Google API

Android Google Map

ให้คลิกไปที่ขวามือเลือก Create a project...

Android Google Map

กรอกชื่อ Project และเลือก Create

Android Google Map

หลังจากที่ Create Project เรียบร้อยแล้ว เราจะกลับมายังหน้า Dashboard

Android Google Map

ให้เลือก Manage all project...








Android Google Map

แสดงรายชื่อ Project ทั้งหมดที่มีอยู่ปัจจุบัน ให้คลิกเพื่อเข้าไปจัดการกับ API

Android Google Map

เลือก API Enable and manage APIs

Android Google Map

คลิกที่ Overview -> Google Maps Android API

Android Google Map

เลือก Enable API

Android Google Map

ในฝั่งของซ้ายมือเลือก Credentials

Android Google Map

เลือก Add credentials -> API Key

Android Google Map

เลือก Android key

Android Google Map

ในขั้นตอนนี้สำคัญมาก จะเห็นว่ามีในส่วนที่จะให้เพิ่ม Add package name and fingerprint

Android Google Map

จะเห็นว่ามีให้กรอก Package name และ SHA-1 ซึ่งเป็นรหัสที่เราได้ก่อนหน้านี้ ส่วน Package name มาจากโปรเจคของเรา

(ย้ำว่าในเฟส Dev ไม่จำเป็นต้องกรอกรหัสนี้ก็ได้)

Android Google Map

หลังจากนั้นเราจะได้ API Key ที่จะใช้งาน

Android Google Map

API Key ที่ได้

Android Google Map

ในไฟล์ AndroidManifest.xml ให้เพิ่ม API Key และชุดคำสั่งนี้ลงไป (ให้ถูกตำแหน่งด้วย ไม่งั้น App ไม่แสดง Map)

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
		 
		<uses-library android:name="com.google.android.maps" > </uses-library> 
		 
		<meta-data
		     android:name="com.google.android.maps.v2.API_KEY"
		     android:value="AIzaSyBPlg32Atd1FsDgmn_c5pefEkOotGqs3z8" />
		
	  	<meta-data
		    android:name="com.google.android.gms.version"
		    android:value="@integer/google_play_services_version" />	
	    		 	          
    </application>


Android Google Map

เป็นโครงสร้างของโปรเจค สามารถใช้ได้ทั้งบน Eclipse และ Android Studio

activity_main.xml

Android Google Map

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/googleMap"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:name="com.google.android.gms.maps.SupportMapFragment"/>

ในการใช้งานแนะนำให้ใช้ fragment

MainActivity.java
package com.myapp;

import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import android.os.Bundle;

import android.support.v4.app.FragmentActivity;

public class MainActivity extends FragmentActivity {

	  // Google Map
    private GoogleMap googleMap;
 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        googleMap = ((SupportMapFragment)getSupportFragmentManager()
                .findFragmentById(R.id.googleMap)).getMap();
 
    } 
    
}

ในการเขียน Code ของ Java แนะนำให้ extends ไปยัง FragmentActivity ซึ่งจะสามารถใช้งาน Google Map ได้อย่างไม่มีปัญหา

Screenshot

Android Google Map

ผลลัพธ์ที่ได้

สำหรับหัวข้อแรกนี้อาจจะยาวนิดหนึ่ง แต่เนื้อหาใจความแล้วไม่มีอะไรซับซ้อน ถ้าสมาชิกท่านใดยังไม่สามารถทำให้ Map แสดงผลได้ ลองตรวจสอบขั้นตอนว่าได้ขาดขั้นตอนใดขั้นตอนหนึ่งหรือไม่


.

   
Share


ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท


ลองใช้ค้นหาข้อมูล


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2015-11-16 16:15:57 / 2017-03-26 21:13:27
  Download : No files
 Sponsored Links / Related

 
Android Google Map : Focus, Zoom Level , Map Type
Rating :

 
Android Google Map : Change Map Type (Normal, Satellite, Hybrid and Terrain)
Rating :

 
Android Google Map : Check Enabled Location Services
Rating :

 
Android Google Map : Get Current Location (Latitude, Longitude)
Rating :

 
Android Google Map : Marker Location (Latitude , Longitude)
Rating :

 
Android Google Map : Adding Multiple Marker (Latitude, Longitude)
Rating :

 
Android Google Map : Marker from Current Location (LocationChanged)
Rating :

 
Android Google Map : Get Address Name from Latitude,Longitude (Geocoder)
Rating :

 
Android Google Map : Search and Find Location
Rating :

 
Android Google Map : Marker Location from PHP/MySQL (JSON)
Rating :


ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่