การปักหมุด (Marker) อ้างอิงจาก Lat,Lon บน Google Maps API

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

การปักหมุด (Marker) อ้างอิงจาก Lat,Lon บน Google Maps API

โพสต์โดย Ik Kat » 03/07/2017 5:15 pm

ในการนำ Google Maps มาใช้งานบนเว็บไซต์ การปักหมุดถือเป็นเรื่องที่สำคัญอย่างมากในการระบุตำแหน่ง หรือสถานที่เป้าหมาย ทั้งนี้สามารถอ้างอิงตำแหน่งที่อยู่ของเราได้จากการกำหนดค่า Latitude และ Longitude

ตัวอย่าง การปักหมุด เมื่อมีการนำเมาส์ไปชี้ที่เครื่องหมายจะปรากฏคำว่า Hello World!:

โค้ด: เลือกทั้งหมด

function initMap() {
  var myLatLng = {lat: 13.8380209, lng: 100.5814654};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}


รูปภาพ

ตัวอย่าง การกำหนดด้วย Method setMap() :

โค้ด: เลือกทั้งหมด

var myLatlng = new google.maps.LatLng(13.8380209,100.5814654);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

หากต้องการปิดเคร่องหมายให้กำหนดค่าเป็น marker.setMap(null);

ตัวอย่าง การปักหมุดมากกว่า 1 จุด :

โค้ด: เลือกทั้งหมด

    function initMap() {
   var mapOptions = {
     center: {lat: 13.8380209, lng: 100.5814654},
     zoom: 16,
   }
      
   var maps = new google.maps.Map(document.getElementById("map"),mapOptions);
   
   var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(13.836760, 100.582560),
      map: maps,
      title: 'Test1',
   });

   var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(13.836328, 100.582123),
      map: maps,
      title: 'Test2',
   });

}


รูปภาพ

การปักหมุดจำเป็นต้องใช้ค่า Latitude และ Longitude เราสามารถดูค่านี้ได้จากการใช้ Geocoding และนอกจากนี้เรายังสามารถแสดงข้อมูลที่กำหนดเอง หรือสามารถอนุญาตใช้ผู้สามารถย้ายเครื่องหมายได้

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 6 และ บุคคลทั่วไป 0 ท่าน