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

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

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

User avatar
Ik Kat
PHP Super Member
PHP Super Member
Posts: 291
Joined: 26/06/2017 2:32 pm

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

Post by Ik Kat » 03/07/2017 5:15 pm

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

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

Code: Select all

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!'
  });
}
Image

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

Code: Select all

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 จุด :

Code: Select all

    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',
	});

}
Image

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

  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 7 guests