
ตัวอย่างการใช้งาน Google Maps JavaScript API v3 ในการวางรูปภาพ Complex Marker ด้วยภาพกราฟิกนามสกุล png ลงไปใน Google Maps ให้น่าสนใจกว่า Marker ตัวเดิมวิธีการไม่ยากครับ แค่หาภาพมาวางซ้อน นามสกุล .png ก็พอ
สร้างไฟล์ index.html ขึ้นมา แล้วใส่ Code ดังนี้ครับ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Heroes of Google Maps</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> function initialize() { var mapOptions = { zoom: 15, center: new google.maps.LatLng(13.577082,100.590107) } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); setMarkers(map, beaches); } var beaches = [ ['Bahamut', 13.607783,100.595085, 4], ['Heroes Company', 13.611453,100.549423, 5], ['River Battles', 13.577082,100.590107, 3], ['Temple of Dooms', 13.57508,100.573284, 2], ['Dragon Clan', 13.602277,100.559036, 1] ]; function setMarkers(map, locations) { var image = { url: 'images/heroes.png', size: new google.maps.Size(90, 39), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(0, 39) }; var shape = { coord: [1, 1, 1, 20, 18, 20, 18 , 1], type: 'poly' }; for (var i = 0; i < locations.length; i++) { var beach = locations[i]; var myLatLng = new google.maps.LatLng(beach[1], beach[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: image, shape: shape, title: beach[0], zIndex: beach[3] }); } } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html> |
ทดสอบนะครับ จะเห็นว่า ตัวอย่างที่ทำให้จะทำงานแบบนี้ครับ
โคตรง่าย เพราะผมไม่ได้เขียนอะไรใหม่เลย นอกจากขนาด Width และ Height ของภาพกราฟิกผมแค่นั้นครับ
1 2 3 4 5 6 7 |
var image = { url: 'images/heroes.png', //90 คือขนาด Width ภาพ, 39 คือขนาด Height ภาพ size: new google.maps.Size(90, 39), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(0, 39) }; |
ทดสอบได้ที่ http://www.daydev.com/demo/mapquest/