โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var map;
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
คำอธิบาย : ตัวอย่างข้างบนจะเป็นการแสดงตำแหน่ง latitude เเละ longitudeบนเเผนที่ให้เราอยู่เเล้ว ถ้าต้องการจะ Insert เข้าเพิ่มคำสั่ง ดังนี้
ให้เราเพิ่มคำสั่งเพื่อส่งค่า POST ให้กับ ไฟล์ php
โค้ด: เลือกทั้งหมด
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng() //
});
infowindow.open(map, marker);
// เก็บข้อมูลส่งไป post insert เข้าฐานข้อมูล
var location_lat = location.lat(); // เก็บค่า latitude ที่คลิก
var location_lon = location.lng(); // เก็บ longitude ที่คลิก
// สรัาง LatLng ตำแหน่ง สำหรับ google map
var pos = new google.maps.LatLng(location.lat(), location.lng());
$.post("add_location.php", {// ไฟล์ php รับค่าจาก post ไป insert
location_lat: location_lat, // ส่งค่าที่จะ insert
location_lon: location_lon // ส่งค่าที่จะ insert
}, function () {
map.panTo(pos); // เลื่อนแผนที่ไปยังตำแหน่งปัจจุบันที่จุด
map.setCenter(pos); // เลื่อนจุดกลางของเเผนที่ ตำแหน่งปัจจุบัน
});
}- Selection_245.png (228.33 KiB) Viewed 1605 times