Google Map API : สร้าง Marker บน Google Map

[ย้ายบทความจาก Gushared.com]
   หลังจากที่ได้ลองนำ Google Map มาใส่ในเว็บไซต์ของเราแล้ว ครั้งนี้เราจะลองนำ Marker มาปักบน Google Map ของเรามั่งครับ ซึ่งตัวอย่างที่ผมจะนำมาแสดงให้ดู จะค่อนข้างครอบคุมและสามารถนำไปประยุกต์ใช้ต่อได้ วิธีการใช้ก็ไม่ยากแค่เพิ่มโค๊ดมาสามสี่บรรทัด เป็นโค๊ดสำหรับสร้าง Marker แล้วเราก็ใช้เมธอด setMap() เรียกมาแสดงได้เลย

Basic Maker

 <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAu08o0WD6buv6P6bu--XFyo2KrIScQgrg&sensor=false"></script>
        <script>
  function loadmap()
  {
   var mapSet = {
     center:new google.maps.LatLng(13.727896,100.524124),
     zoom:7,
     mapTypeId:google.maps.MapTypeId.ROADMAP
     };
   var map=new google.maps.Map(document.getElementById("googleMap"),mapSet);
                        //Create marker object
   var marker=new google.maps.Marker({  
    position:new google.maps.LatLng(13.727896,100.524124),  
   });
                        //Set marker to google map
   marker.setMap(map);
  }
   google.maps.event.addDomListener(window, 'load', loadmap);
 </script>
 <div id="googleMap" style="width:500px;height:400px;"></div>

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

Animate Maker

var marker=new google.maps.Marker({  
 position:new google.maps.LatLng(13.727896,100.524124),  
 animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

เพิ่มบรรทัดที่ 3 เพื่อสร้างอนิเมชันให้กับ Marker
ผลลัพธ์ที่ได้

Maker จากรูปที่ผู้ใช้ต้องการ

var marker=new google.maps.Marker({  
 position:new google.maps.LatLng(13.727896,100.524124),  
 animation:google.maps.Animation.BOUNCE,
        icon:'http://www.blogger.com/favicon-image.g?blogID=4977604473694267116',
});
marker.setMap(map);

บรรทัดที่ 4 เป็นส่วนที่เราสามารถนำ Marker ของเราเองมาแสดงไว้ ^_^
ผลลัพธ์ที่ได้