สร้าง Marker ใน Google Map หลายๆอัน จากการ Search แต่ละครั้งยังไงครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สร้าง Marker ใน Google Map หลายๆอัน จากการ Search แต่ละครั้งยังไงครับ

สร้าง Marker ใน Google Map หลายๆอัน จากการ Search แต่ละครั้งยังไงครับ

จากบทความนี้ >> https://www.ninenik.com/ค้นหา_พิกัด_ค่า_latitude_และ_longitude_ใน_Google_Map_จากฃื่อสถานที่-327.html

สมมติ เรา Search หาจากสถานที่ และกำหนดจุดให้กับ Marker อันแรกและกดเซฟเรียบร้อยแล้ว อยากจะ Search หาสถานที่อื่นๆ โดยให้สร้าง Marker อันต่อๆไป โดยที่ Marker อันแรกๆ ที่เราเคยกำหนดจุดมาแล้ว ยังคงแสดงอยู่ในแผนที่ พอจะมีวิธีมั้ยครับ

ขอบคุณล่วงหน้าครับ ^^

Vincentva 13-12-2010 04:31:41

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ต้องกำหนด ตัว marker เป็นตัวแปร array และสร้างฟังก์ชัน สำหรับสร้าง ตัว marker แต่ละตัว ทุกครั้ง

ที่มีการค้นหา ก็จะได้ ตัว marker ตามจำนวนการค้นหา ลองเอาตัวอย่างโค้ดต่อไปนี้ ไปประยุกต์ใช้งานดู

ส่วนเพิ่มเติม หรืออะไรที่มากกว่านี้ ต้องอาศัยความเข้าใจ ในการนำไปประยุกต์ใช้งานของแต่ละคน

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map API 3 - 01 google map search and marker</title>
<style type="text/css">
html { height: 100% }
body { 
	height:100%;
	margin:0;padding:0;
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	width:550px;
	height:400px;
	margin:auto;
	margin-top:50px;
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
Search Place 
  <input name="namePlace" type="text" id="namePlace" size="40" />
  <input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
  <hr />
<!--  <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" size="17" />  
    Longitude  
    <input name="lon_value" type="text" id="lon_value" value="0" size="17" />  
  Zoom  
  <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />  
  <input type="submit" name="button" id="button" value="บันทึก" />  
  </form>  
</div> 
  
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var geocoder; // กำหนดตัวแปรสำหรับ เก็บ Geocoder Object ใช้แปลงชื่อสถานที่เป็นพิกัด
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var i=0; // ค่าสำหรับเก็บ ลำดับ index ของ ตัว marker แต่ละตัว
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	geocoder = new GGM.Geocoder(); // เก็บตัวแปร google.maps.Geocoder Object
	// กำหนดจุดเริ่มต้นของแผนที่
	var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0];
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 13, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
	};
	map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	
	// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
	GGM.event.addListener(map, 'zoom_changed', function() {
		$("#zoom_value").val(map.getZoom());   // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value 	
	});

}
//  สร้างฟังก์ชัน สำหรับสร้าง ตัว marker แต่ละตัว 
function add_marker(index,my_Latlng){
	my_Marker[index] = new GGM.Marker({ // สร้างตัว marker ไว้ในตัวแปร my_Marker
		position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
		map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
		draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
		title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
	});	

	GGM.event.addListener(my_Marker[index], 'click', function() {
		var my_Point = my_Marker[index].getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
        map.panTo(my_Point); // ให้แผนที่แสดงไปที่ตัว marker		
        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
        $("#lon_value").val(my_Point.lng());  // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
        $("#zoom_value").val(map.getZoom());  // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_valu			
	});			
		// กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร	
	GGM.event.addListener(my_Marker[index], 'dragend', function() {
		var my_Point = my_Marker[index].getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
        map.panTo(my_Point); // ให้แผนที่แสดงไปที่ตัว marker		
        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
        $("#lon_value").val(my_Point.lng());  // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
        $("#zoom_value").val(map.getZoom());  // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_valu			
	});			
	
}
$(function(){
	// ส่วนของฟังก์ชันค้นหาชื่อสถานที่ในแผนที่
	var searchPlace=function(){ // ฟังก์ชัน สำหรับคันหาสถานที่ ชื่อ searchPlace
		var AddressSearch=$("#namePlace").val();// เอาค่าจาก textbox ที่กรอกมาไว้ในตัวแปร
		if(geocoder){ // ตรวจสอบว่าถ้ามี Geocoder Object 
			geocoder.geocode({
				 address: AddressSearch // ให้ส่งชื่อสถานที่ไปค้นหา
			},function(results, status){ // ส่งกลับการค้นหาเป็นผลลัพธ์ และสถานะ
      			if(status == GGM.GeocoderStatus.OK) { // ตรวจสอบสถานะ ถ้าหากเจอ
					var my_Point=results[0].geometry.location; // เอาผลลัพธ์ของพิกัด มาเก็บไว้ที่ตัวแปร
					map.setCenter(my_Point); // กำหนดจุดกลางของแผนที่ไปที่ พิกัดผลลัพธ์
					i++;
					add_marker(i,my_Point);
					$("#lat_value").val(my_Point.lat());  // เอาค่า latitude พิกัดผลลัพธ์ แสดงใน textbox id=lat_value
					$("#lon_value").val(my_Point.lng());  // เอาค่า longitude พิกัดผลลัพธ์ แสดงใน textbox id=lon_value 
					$("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_valu	 							
				}else{
					// ค้นหาไม่พบแสดงข้อความแจ้ง
					alert("Geocode was not successful for the following reason: " + status);
					$("#namePlace").val("");// กำหนดค่า textbox id=namePlace ให้ว่างสำหรับค้นหาใหม่
				 }
			});
		}		
	}
	$("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace ให้ทำงานฟังก์ฃันค้นหาสถานที่
		searchPlace();	// ฟังก์ฃันค้นหาสถานที่
	});
	$("#namePlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
		if(event.keyCode==13){	// 	ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter ให้เรียกฟังก์ชันค้นหาสถานที่
			searchPlace();		// ฟังก์ฃันค้นหาสถานที่
		}		
	});

});
$(function(){
	// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
	// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
	// v=3.2&sensor=false&language=th&callback=initialize
	//	v เวอร์ชัน่ 3.2
	//	sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
	//	language ภาษา th ,en เป็นต้น
	//	callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize	
	$("<script/>", {
	  "type": "text/javascript",
	  src: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>

ตัวอย่าง

Search Place

Ninenik 13-12-2010

ความคิดเห็นที่ 2

ขอบคุณอีกครั้งนะครับ

แต่ขอรบกวนอีกนิดครับ

คือถ้าเราอยากจะลบ Marker ที่ปักหมุดลงไปแล้ว มีวิธียังไงบ้างครับ ต้องสร้างปุ่มขึ้นมา เพื่อกด Delete Marker รึเปล่าครับ แล้วมันจะทำให้ลบ Marker ทั้งหมด หรือ ลบ Marker ตัวล่าสุดที่เราเพิ่งปักหมุดลงไป .. ถ้าผมอยากให้เราเลือกได้ว่า จะลบ Marker ตัวที่ต้องการ จะทำได้รึเปล่าครับ

vincentva 13-12-2010 12:04

ความคิดเห็นที่ 3

หากต้องการลบเฉพาะ marker ที่ต้องการ ให้นำโค้ดต่อไปนี้ ไปใว้ต่อจากบรรทัดที่ 63 ก่อนบรรทัดที่ 64

เงื่อนไข เกิดเมื่อเราคลิกขวาที่ตัว marker ก็จะแจ้งถามว่าต้องการลบหรือไม่

	GGM.event.addListener(my_Marker[index], 'rightclick', function() {
		if(confirm("Delete this marker?")){
			my_Marker[index].setMap();
		}
	});

แต่ถ้าต้องการลบทั้งหมด ให้สร้างปุ่มลบทั้งหมด เช่น

  <input type="button" name="del_marker" id="del_marker" value="clear" />

แล้วนำโค้ดด้านล่างไปต่อที่บรรทัดที่ 133 ในโค้ดตัวอย่าง

	$("#del_marker").click(function(){
		if(my_Marker.length>0){
			for(n=1;n<my_Marker.length;n++){
				my_Marker[n].setMap();
			}
		}
	});

Ninenik 13-12-2010

ความคิดเห็นที่ 4

สอบถามหน่อยครับ

ถ้าเกิดเราปักหมุด Marker ไปแล้ว 5 จุด เกิดไปลบจุดที่ 3 ออก ใน Marker Array ... index มันจะเลื่อนให้อัตโนมัติรึเปล่าครับ เช่นในที่นี้ เลื่อน index จาก 4 มา 3 และเลื่อน index 5 มา 4

vincentva 13-12-2010 14:50

ความคิดเห็นที่ 5

index ของ array จะไม่เลื่่อนอัตโนมัติ ค่า array ตัวที่ลบ จะหายไป

Ninenik 13-12-2010

ความคิดเห็นที่ 6

อย่างงี้เราก็ต้องวนลูป เพื่อเลื่อน index แล้วเอาโค้ดไปแทรกใน event ที่เรากด right click เพื่อลบ marker ใช่ป่ะครับ

ขอบคุณมากๆครับ ที่ช่วยเหลือ ได้ประโยชน์มากเลยครับ

vincentva 13-12-2010 15:45

ความคิดเห็นที่ 7

ผมก็อบโค้ดแล้ว มันโหลด Map ไม่ขึ้นอะครับ เป็นเพราะอะไรหรอครับ

Piyapan Pakpisitjalene 08-06-2017 14:19

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน