การปักหมุด (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 »

ในการนำ 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 และนอกจากนี้เรายังสามารถแสดงข้อมูลที่กำหนดเอง หรือสามารถอนุญาตใช้ผู้สามารถย้ายเครื่องหมายได้
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 28