หน้าหลัก โค้ด-บทความ php โค้ด-บทความ javascript โค้ด-บทความ css สารบัญ สารบัญ

ทักทายครับ

สวัสดีครับ หลังจากที่ blog นี้หยุดการอัพเดททบความเกี่ยวกับโค้ดในการใช้ทำเวปไปนานไม่ว่าจะเป็น code php, html, javascript, css, ajax เนื่องจากผมไม่ค่อยมีเวลาจนลืม blog นี้ไปเลย นึกขึ้นได้ตอนปีใหม่ ไปค้นหาใน google แล้วตกใจ เนื่องจาก blog นี้ไปอยู่ลำดับที่ 1 ของการค้นหา ไม่เชื่อลองดู เลยขอถือโอกาสเริ่มต้นใหม่ในช่วงปีใหม่นี้เริ่มอัพเดทบทความตั้งแต่ตอนนี้เป็นต้นไป หวังเป็นอย่างยิ่งว่าจะมีผู้ติดตามบทความของผมต่อไปน่ะครับ ปล.ท่านใดสนใจลงโฆษณาสามารถติดต่อได้ที่ hotcodephp@gmail.com

5 มิ.ย. 2555

Google Maps api v2 - การสร้างและปรับแต่ง Marker

วันนี้เราต่อเรื่อง Google Maps API V2 หลังจากที่หายไปนาน ใครลืมไปแล้วเข้าไปดูเรื่องเก่าได้ ที่นี่ โค้ดตัวนี้จะเป็นในเรื่องของการสร้างและปรับแต่ง Marker ด้วยการคลิกบนแผนที่ ผมขอใช้ภาษา php ในการเขียนโค้ด php น่ะครับ โค้ดคำสั่งในการเรียกใช้งานคือ


GEvent.addListener(map, "click", function(marker, point) {
map.addOverlay(new GMarker(point));});

map.addOverlay(new GMarker(point)); คือคำสั่งในการสร้าง Marker sซึ่งเราสามารถปรับแต่ งMarkers ได้เองดังตัวอย่าง

var icongreen = new GIcon();
icongreen.image = 'http://newsirius13.thport.com/picture/c003.png';
icongreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
icongreen.iconSize = new GSize(20, 22);
icongreen.shadowSize = new GSize(1, 1);
icongreen.iconAnchor = new GPoint(12, 8);
icongreen.infoWindowAnchor = new GPoint(5, 1);

GEvent.addListener(map, "click", function(marker, point) {
map.addOverlay(new GMarker(point, icongreen));});

ในตัวอย่างนี้จำทำการสร้างตัวแปลขึ้นมา1ตัว ชื่อ icongreen เพื่อเก็บการตั้งค่าต่างๆของ Markers และเรียกใช้โดยให้ใส่ตัวแปลลงไปในคำสังสร้างMarkerนั้นคือ new GMarker(point, "ใส่ตัวแปลที่ต้องการ (ในตัวอย่างคือicongreen)") ก็จะได้ Markersตามรูปแบบที่เราได้ปรับแต่งตามต้องการ

ส่วนอันนี้เป็นตัวอย่างการใช้งานทั้งหมดน่ะครับ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>newsirius13</title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAKaJQ6galA0QmFhNdQzYuwRQnaT__a1y-hZdnJBN4Ggj_4W3wVRTkKlGxp0EJvRTbiAqcn-FCYSTDog"
            type="text/javascript"></script>

    <script type="text/javascript">

    var icongreen = new GIcon(); 
    icongreen.image = 'http://newsirius13.thport.com/picture/c003.png';
    icongreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    icongreen.iconSize = new GSize(20, 22);
    icongreen.shadowSize = new GSize(1, 1);
    icongreen.iconAnchor = new GPoint(12, 8);
    icongreen.infoWindowAnchor = new GPoint(5, 1);

   function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(13.8196,100.0601), 7);


GEvent.addListener(map, "click", function(marker, point) {
map.addOverlay(new GMarker(point, icongreen));});

        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());

      }
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 800px; height: 500px"></div>
  </body>
</html>

ให้กดคลิกบนแผนที่จะทำการสร้างMarker ขึ้นมา

ไม่มีความคิดเห็น: