เพิ่ม Marker บน Googlemap แสดง InfoWindow (ไฟล์.PHP) มากกว่าหนึ่งอย่างไร
ตอนนี้แสดงได้แค่ InfoWindow ที่ดึงหน้าจาก(RESET.php) ได้อันเดียว
อยากทำเหมือนกันอีกจุดต้องทำอย่างไร
###########################################
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Google Map API LV3 </title>
<script type="text/javascript" src="
http://maps.google.com/maps/api/js?key=xxxxx"></script>
<script type="text/javascript" src="jquery-1.11.2.min.js" ></script>
<script language="JavaScript">
var myOptions // ฟังก์ชันแสดงแผนที่
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var InfoWindow; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที
function setupMap() { // ฟังก์ชันแสดงแผนที
myOptions = {
zoom: 15, //ซูมแผ่นที่ จากตำแน่งที่กำหนด
center: new google.maps.LatLng(xxxxxxxx, xxxxxxxxx), //กำหนดแผ่นที่ให้ตำแหน่งเริ่มต้นกึ่งกลาง
mapTypeId: google.maps.MapTypeId.ROADMAP //กำหนดประเภทของแผ่นที่ ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
marker = new google.maps.Marker({ // สร้างตัว marker
map:map,
position: new google.maps.LatLng(xxxxxxxx, xxxxxxxxx),
//draggable: true //กำหนดสามารถลาก Markerได้
title:"คลิกเพื่อดูรายละเอียดของสถานที่!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
InfoWindow = new google.maps.InfoWindow({
content:$.ajax({
url:'RESET.php',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
async:false
}).responseText
});
// กำหนด event ให้กับตัว marker เมื่อคลิกที่ตัว marker ให้แสดง InfoWindow
google.maps.event.addListener(marker,'click',function(){
InfoWindow.open(map,marker);
});
}
</script>
</head>
<body onload="setupMap()">
<div id="map_canvas" style="width:800px;height:450px;"></div>
</body>
</html>
เพิ่ม Marker บน Googlemap แสดง InfoWindow (PHP) มากกว่าหนึ่งจุดอย่างไร
ตอนนี้แสดงได้แค่ InfoWindow ที่ดึงหน้าจาก(RESET.php) ได้อันเดียว
อยากทำเหมือนกันอีกจุดต้องทำอย่างไร
###########################################
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Google Map API LV3 </title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=xxxxx"></script>
<script type="text/javascript" src="jquery-1.11.2.min.js" ></script>
<script language="JavaScript">
var myOptions // ฟังก์ชันแสดงแผนที่
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var InfoWindow; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที
function setupMap() { // ฟังก์ชันแสดงแผนที
myOptions = {
zoom: 15, //ซูมแผ่นที่ จากตำแน่งที่กำหนด
center: new google.maps.LatLng(xxxxxxxx, xxxxxxxxx), //กำหนดแผ่นที่ให้ตำแหน่งเริ่มต้นกึ่งกลาง
mapTypeId: google.maps.MapTypeId.ROADMAP //กำหนดประเภทของแผ่นที่ ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
marker = new google.maps.Marker({ // สร้างตัว marker
map:map,
position: new google.maps.LatLng(xxxxxxxx, xxxxxxxxx),
//draggable: true //กำหนดสามารถลาก Markerได้
title:"คลิกเพื่อดูรายละเอียดของสถานที่!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
InfoWindow = new google.maps.InfoWindow({
content:$.ajax({
url:'RESET.php',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
async:false
}).responseText
});
// กำหนด event ให้กับตัว marker เมื่อคลิกที่ตัว marker ให้แสดง InfoWindow
google.maps.event.addListener(marker,'click',function(){
InfoWindow.open(map,marker);
});
}
</script>
</head>
<body onload="setupMap()">
<div id="map_canvas" style="width:800px;height:450px;"></div>
</body>
</html>
17 มีนาคม 2560 เวลา 20:39 น.