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

Registered : 104,082

HOME > Google Maps APIs สอนวิธีการใช้ Maps ของ Google เพื่อเรียกใช้งานแผนที่และแสดงผลบนเว็บไซต์ > ตอนที่ 1 : Google Maps API (JavaScript) เบื้องต้นกับการใช้งานแผนที่บนของกูเกิลแมพ (Step by Step)




ตอนที่ 1 : Google Maps API (JavaScript) เบื้องต้นกับการใช้งานแผนที่บนของกูเกิลแมพ (Step by Step)

Google Maps API (JavaScript) เบื้องต้นกับการใช้งานแผนที่บนของกูเกิลแมพ (Step by Step) บทความนี้จะเป็นเนื้อหาและความรู้เกี่ยวกับ การเขียน Google Maps API ด้วย JavaScript และ CSS เพื่อแสดงผลแผนที่บนหน้าเว็บไซต์ การแสดงแผนที่ในหน้าเว็บ การแสดงแผนที่ในรูปแบบต่างๆ การแสดงรายละเอียดและตำแหน่ง Location ต่างๆ ที่ต้องการ การปักหมุด พร้อมกับแสดงรายละเอียดของแผนที่ การค้นหาตำแหน่ง/ระยะทาง และการเขียน Google Maps ร่วมกับฐานข้อมูล PHP/MySql เช่น การดึง Location จากฐานข้อมูลมาปักหมุดที่แผนที่ ซึ่งจะใช้การรับส่งข้อมูลที่อยู่ในรูปแบบของ jQuery และ Json และวิธีการใช้งาน Map อื่นๆ ที่เกี่ยวข้อง



Google Maps JavaScript API


ในหัวข้อแรก เพื่อทำความเข้าใจกับพื้นฐานของ Google Maps ในขั้นแรกเราจะต้องรู้ว่า Google Maps คืออะไร มีหน้าที่ทำอะไร และ การที่เราจะใช้บริการนั้น จะต้องทำอย่างไร เสียค่าใช้จ่ายอะไรบ้าง

Google Maps คืออะไร???
Google Maps คือ บริการแผนที่ของ Google ซึ่งให้บริการ Services ที่เกี่ยวข้องกับแผนที่ทั้งหมด โดยในปัจจุบัน แผนที่ของกูเกิ้ลนั้นมีอยู่หลากหลายประเภทมาก อาทิเช่นที่เราใช้บริการแผนที่บนเว็บไซต์ หรือ App บน Smartphone และทางช่องทางอื่นๆ อีกมากมายนับไม่ถ้วน โดย Services เหล่านี้เราสามารถเรียกใช้งานได้ฟรี ในกรณีที่ผ่าน Application ทั่วๆ ไป แต่ถ้าในกรณีที่เราจะมีการเรียกใช้งานในเว็บไซต์หรือ App ที่พัฒนาขึ้นเอง Google Maps ก็จะมี API ให้ใช้งานได้เช่นเดียวกัน แต่ให้เข้าใจนิดหนึ่งว่า Services ต่างๆ ของ Google นั้นมีข้อจำกัดหรือ Limit ในการใช้งาน แต่ถ้าหากต้องการใช้ในบริมาณที่สูงขึ้น ก็จะต้องซื้อ Package ที่ทาง Google Maps มีมาให้ ซึ่งโดยปกติจะมีการจำกัดจำนวนที่ Request เข้ามาเรียกใช้งาน


จะใช้ Google Maps จะต้องทำย่างไร ??
ในมุมมองของนักพัฒนาหรือ Developer ทั่วๆ ไป การใช้งาน Google Maps พื้นฐาน เราสามารถใช้งานได้ฟรี เพียงแค่มี Account ของ Gmail จากนั้นก็สมัครเพื่อขอ API มาใช้งาน

Google Map Developer

ช่องทางการสมัคร Google Maps API

Google Maps API (JavaScript)

จะเห็นว่า API ของ Google Maps นั้นรองรับการพัฒนา Application หลากหลายรูปแบบ ในที่นี้ให้เลือก GET STARTED โดยเลือกเป็นแบบ Web

Google Maps API (JavaScript)

จากนั้นให้เลือก Google Maps JavaScript API

Google Maps API (JavaScript)

จากนั้นให้คลิกที่ GET A KEY

Google Maps API (JavaScript)

ขั้นแรกให้ตั้งชื่อ Project








Google Maps API (JavaScript)

จากนั้นเราก็จะได้ Key ที่จะนำไปใช้งาน ง่ายมาก


Google API Console

หรือจะสมัครผ่าน Google API Console ก็ได้เช่นเดียวกัน

Google Maps API (JavaScript)

ใช้การสร้าง Project เช่นเดียวกัน

Google Maps API (JavaScript)

สร้าง Project ใหม่

Google Maps API (JavaScript)

จากนั้นให้ไปที่หน้า Dashboard เพื่อเข้าจัดการ

Google Maps API (JavaScript)

ดูข้อมูล API Key คลิกที่ "ข้อมูลรับรอง" จะเห็นว่ามีคีย์ที่เคยสร้างไว้ สามารถ เพิ่มแก้ไข ได้ตลอดเวลา

Google Maps API (JavaScript)

ก่อนอื่นเราจะต้องปรับแต่งสถานะของ API ว่าเปืดใช้งานแล้วหรือยัง โดยไปที่ "ไลบรารี่" -> "Google Maps JavaScript API"

Note!! ในหน้านี้เราจะเห็นว่า API รองรับการพัฒนา Application ได้หลากหลายรูปแบบ เราสามารถที่จะเปิดใช้งาน API อื่นๆ ได้เช่นเดียวกัน

Google Maps API (JavaScript)

สามารถเปิด-ปิด ตัว API ได้ตลอดเวลา

Example : ตัวอย่างการแสดงแผนที่ของ Google Maps แบบง่าย ๆ

Code
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #map {
        height: 500px;
        width: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 13.847860, lng: 100.604274},
          zoom: 11
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAK3RgqSLy1toc4lkh2JVFQ5ipuRB106vU&callback=initMap"
    async defer></script>
  </body>
</html>

จาก Code เราจะใส่ API Key ตรงนี้

API Key
maps.googleapis.com/maps/api/js?key=[i]YOUR_API_KEY

เป็นการกำหนดค่า Latitude and Longitude ที่จะแสดงผลตรงกลาง Map
center: {lat: 13.847860, lng: 100.604274},


Result

Google Maps API (JavaScript)

แผนที่แสดงในหน้าเว็บ








   
Share


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


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


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2017-04-08 12:35:29 / 2017-04-09 07:05:09
  Download : No files
 Sponsored Links / Related

 
ตอนที่ 2 : Google Maps API การเปิด-ปิด Control ต่างๆ ที่อยู่บนหน้า Maps แผนที่
Rating :

 
ตอนที่ 3 : Google Maps API การแสดงมุมมองของแผนที่ต่างๆ เช่น Zoom , Map Type
Rating :

 
ตอนที่ 4 : Google Maps API การสร้าง Custom Maps Style กำหนดรูปแบบของแผนที่
Rating :

 
ตอนที่ 5 : Google Maps API การปักหมุด (Marker) บนแผนที่ จาก Lat,Lon และรายละเอียด
Rating :

 
ตอนที่ 6 : Google Maps API การปักหมุด (Marker) หลายตำแหน่งจากข้อมูลชุด Array
Rating :

 
ตอนที่ 7 : Google Maps API การปักหมุด (Marker) หลายตำแหน่งจากข้อมูลชุด Json Object
Rating :

 
ตอนที่ 8 : Google Maps API Geolocation การอ่านและโฟกัสตำแหน่ง Location ปัจจุบัน
Rating :

 
ตอนที่ 9 : Google Maps API Geocoding การค้นหาระบุตำแหน่ง Location บนแผนที่
Rating :

 
ตอนที่ 10 : Google Maps API การปักหมุด (Marker) บนแผนที่ จาก 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
ปรับแต่งเว็บให้โหลดเร็ว


สุดยอด Source Code V2.0
 

แจ้งชำระเงิน/โอนเงิน
 

Hit Link
   


Acc : thaicreate@hotmail.com










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