Google Maps - วิธีแสดงข้อมูลบน Marker ด้วย Info Window

Google Maps - วิธีแสดงข้อมูลบน Marker ด้วย Info Window

บ่อยครั้งจำเป็นต้องแสดงข้อมูลเพื่ออธิบาย Marker ที่ปักหมุนลงบน Google Maps เพื่ออธิบาย อาทิเช่น ที่อยู่, เบอร์โทรศัพท์, คำอธิบายสถานที่ และอื่นๆ บทความนี้จะสอนวิธีการใส่ Info Window เพื่อแสดงข้อความเมื่อทำการ Click บน Marker

Jul 01, 2016

แก้ไขล่าสุด มีผู้อ่าน 6,346  |  GOOGLE MAPS

หลังจากที่สามารถใช้ Marker ได้จากบทความที่แล้ว บ่อยครั้งจำเป็นต้องแสดงข้อมูลเพื่ออธิบาย Marker ที่ปักหมุนลงบน Google Maps เพื่ออธิบาย อาทิเช่น ที่อยู่, เบอร์โทรศัพท์, คำอธิบายสถานที่ และอื่นๆ บทความนี้จะสอนวิธีการใส่ Info Window เพื่อแสดงข้อความเมื่อทำการ Click บน Marker แสดงตัวอย่างดังรูปด้านล่าง

 

Source Code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</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"></script>
<script>
function initialize() {
    var myLatlng = new google.maps.LatLng(13.7500, 100.4833);
    var mapOptions = {zoom : 5, center : myLatlng};
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var contentString = '<div style="font-size: 18px;">Hello Thailand. Share.OlanLab.Com is here.</div>';

    var infowindow = new google.maps.InfoWindow({
        content : contentString
    });
    var marker = new google.maps.Marker({
        position : myLatlng,
        map : map,
        title : 'Share.OlanLab.Com'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });
}
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

 

สร้างตัวแปรที่ทำการเก็บพิกัดที่ต้องการ

var myLatlng = new google.maps.LatLng(13.7500, 100.4833);


สร้าง Map

var mapOptions = {zoom : 5, center : myLatlng};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  • zoom กำหนดค่าการ zoom
  • center กำหนดค่ากึ่งกลางของ Map

 


สร้าง Info Window

var contentString = '<div style="font-size: 18px;">Hello Thailand. Share.OlanLab.Com is here.</div>';

var infowindow = new google.maps.InfoWindow({
    content : contentString
});
  • content ข้อมูลที่ต้องการแสดงภายใน Info Window เป็น HTML จากตัวอย่าง เราใส่ div ที่กำหนดขนาด font เป็น 18 และมีข้อความว่า "Hello Thailand. Share.OlanLab.Com is here."

 

สร้าง Marker และกำหนด Event ให้ Marker เมื่อมีการ Click ให้แสดง Info Window 

var marker = new google.maps.Marker({
        position : myLatlng,
        map : map,
        title : 'Share.OlanLab.Com'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });

 

เมื่อหน้านี้โหลดเสร็จให้ทำการเรียก Method :  initialize() เพื่อทำการสร้าง Map และปักหมุด Marker 

google.maps.event.addDomListener(window, 'load', initialize);

 


แบ่งปัน

ชอบ +1

บันทึก

ฝากคำถาม คำแนะนำ ได้ที่

Facebook : Share.OlanLab.Com
LINE ID : @olanlab
อีเมล์ : olan@olanlab.com

หลักสูตร

สอนการใช้ Google Map Javascript Api

ปัจจุบันการนำแผนที่ Google Map มาใช้บน Website ช่วยอำนวยความสะดวก ให้ผู้เข้าชมได้มากด้วยฟังก์ชั่นการใช้หลากหลาย วิธีการใช้และติดตั้งเป็นยังไงติดตามผ่านหลักสูตรนี้ได้เลยครับ
Share คลังความรู้ด้านเทคโนโลยี สารสนเทศ นวัตกรรมคอมพิวเตอร์ สอนเขียนโปรแกรม Php Java Html CSS Javascript C C++ Objective-C และอื่นๆ บนระบบปฏิบัติการ Window Linux Unix CentOS IOS Android
โดยผู้เขียนที่มีความเชี่ยวชาญเฉพาะ ให้บริการพื้นที่สำหรับนักเขียนที่ต้องการแบ่งปันความรู้ พร้อมให้คำปรึกษาแก่ผู้ที่สนใจ โดยไม่เสียค่าใช้จ่าย