สร้าง Interactive Google Maps ให้น่าสนใจด้วย jMapping
jMapping เป็น
jQuery Plugin ตัวหนึ่งที่ใช้งานร่วมกับ Google Maps เน้นการปรับแต่ง และติดตั้งที่ง่ายมากครับแค่
Javascript ไม่กี่บรรทัดก็แสดงผล Interactive ได้ Google Maps API V3 ที่เน้น
Javascript และ
HTML นั้นเป็นเรืองที่ค่อน้างยากสำหรับคนที่ต้องการทำ Map API แบบ Interactive
ภาพตัวอย่าง
- Google_maps_jmapping.png (97.47 KiB) Viewed 1534 times
ถ้าเกิดว่าต้องการที่จะลดระยะเวลาในการทำ jMapping ก็แนะนำให้ลองใช้ตัว
jQuery เพราะมันจะช่วยลดระยะเวลาในการหา Bug ของ jMapping ได้พอสมควรเลยครับ
ขั้นตอนแรกไปดาวน์โหลด Plugin ของ jMapping ที่เว็บไซต์ของผู้พัฒนาครับที่
http://vigetlabs.github.io/jmapping/ ให้ทำการโหลดไฟล์ .zip มาแล้วให้ทำการวางไฟล์ไว้บนโปรเจคของเว็บไซต์ของเราเลยครับ ต่อไปมาดูในส่วของ Code วิธีการใช้งานครับ
1. ประกาศของของส่วนนี้ไว้ในส่วนของ Header ของเว็บไซต์เราไว้ครับ
โค้ด: เลือกทั้งหมด
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
<script type="text/javascript" src="markermanager.js"></script>
<script type="text/javascript" src="StyledMarker.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.jmapping.js"></script>
2.
Element ต่อไปที่เราจะทำงานด้วยคือ id ที่ชื่อ map ครับ ให้วาง Code ส่วนนี้ลงบน Body
โค้ด: เลือกทั้งหมด
<div id="map"></div>
<div id="map-side-bar">
<div class="map-location" data-jmapping="{id: 5, point: {lat: 35.925, lng: -79.053}, category: 'Gas'}">
<a href="#" class="map-link">Some Place</a>
<div class="info-box">
<p>Some thing for the info box.</p>
</div>
</div>
<div class="map-location" data-jmapping="{id: 8, point: {lat: 35.935, lng: -79.024}, category: 'Food'}">
<a href="#" class="map-link">Another Place</a>
<div class="info-box">
<p>Example Text.</p>
</div>
</div>
</div>
จะแสดงผล หน้าแผนที่ อยู่ฝั่งซ้าย และมี Div ที่ชื่อ map-side-bar อยู่ฝั่งขวามีตำแหน่งที่เราจะคลิกแล้ว ไอคอนฝั่งซ้ายจะเด้งขึ้นมาเท่านั้นก็เสร็จเรียบร้อย
[size=150][color=#40FF00][b]สร้าง Interactive Google Maps ให้น่าสนใจด้วย jMapping[/b][/color][/size]
jMapping เป็น [url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=34473]jQuery[/url] [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2111-plug-in--%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]Plugin[/url] ตัวหนึ่งที่ใช้งานร่วมกับ Google Maps เน้นการปรับแต่ง และติดตั้งที่ง่ายมากครับแค่ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2187-java-javascript-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]Javascript[/url] ไม่กี่บรรทัดก็แสดงผล Interactive ได้ Google Maps API V3 ที่เน้น [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2187-java-javascript-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]Javascript[/url] และ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2026-html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]HTML[/url] นั้นเป็นเรืองที่ค่อน้างยากสำหรับคนที่ต้องการทำ Map API แบบ Interactive
ภาพตัวอย่าง
[attachment=0]Google_maps_jmapping.png[/attachment]
ถ้าเกิดว่าต้องการที่จะลดระยะเวลาในการทำ jMapping ก็แนะนำให้ลองใช้ตัว [url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=34473]jQuery[/url] เพราะมันจะช่วยลดระยะเวลาในการหา Bug ของ jMapping ได้พอสมควรเลยครับ
ขั้นตอนแรกไปดาวน์โหลด Plugin ของ jMapping ที่เว็บไซต์ของผู้พัฒนาครับที่ http://vigetlabs.github.io/jmapping/ ให้ทำการโหลดไฟล์ .zip มาแล้วให้ทำการวางไฟล์ไว้บนโปรเจคของเว็บไซต์ของเราเลยครับ ต่อไปมาดูในส่วของ Code วิธีการใช้งานครับ
1. ประกาศของของส่วนนี้ไว้ในส่วนของ Header ของเว็บไซต์เราไว้ครับ
[code]<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
<script type="text/javascript" src="markermanager.js"></script>
<script type="text/javascript" src="StyledMarker.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.jmapping.js"></script>[/code]
2. [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/tutorial-reactjs/4856-elements.html]Element[/url] ต่อไปที่เราจะทำงานด้วยคือ id ที่ชื่อ map ครับ ให้วาง Code ส่วนนี้ลงบน Body
[code]<div id="map"></div>
<div id="map-side-bar">
<div class="map-location" data-jmapping="{id: 5, point: {lat: 35.925, lng: -79.053}, category: 'Gas'}">
<a href="#" class="map-link">Some Place</a>
<div class="info-box">
<p>Some thing for the info box.</p>
</div>
</div>
<div class="map-location" data-jmapping="{id: 8, point: {lat: 35.935, lng: -79.024}, category: 'Food'}">
<a href="#" class="map-link">Another Place</a>
<div class="info-box">
<p>Example Text.</p>
</div>
</div>
</div>[/code]
จะแสดงผล หน้าแผนที่ อยู่ฝั่งซ้าย และมี Div ที่ชื่อ map-side-bar อยู่ฝั่งขวามีตำแหน่งที่เราจะคลิกแล้ว ไอคอนฝั่งซ้ายจะเด้งขึ้นมาเท่านั้นก็เสร็จเรียบร้อย