Modernine TV
ชื่อผู้แจ้ง : ชื้อผู้แจ้งข่าว admin     สถานีฯ admin      เวลาที่แจ้งข่าว แจ้งวันที่ : 19 สิงหาคม 2560 เวลา 20:26:52      ถูกเปิดอ่านแล้ว 93 ครั้ง  93 / 0 ครั้ง   เพิ่มขนาดตัวอักษร เพิ่มขนาดตัวอักษร 
ประเภท : [ บทความ ]      ออกแบบเว็บไซต์      ออกแบบเว็บไซต์      ออกแบบเว็บไซต์
ชื่อเรื่อง : การทำแผนที่ Google MAP ให้คลิกแสดงพิกัด Marker


ทำบทความใว้เตือนความจำตัวเองสิคับ

ทำแผนที่ Google MAP ให้คลิกลงบนแผนที่ แล้วแสดง Marker แสดงพิกัด Latitude และ Longitude



<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map</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;
}

#map_canvas { 
position:relative;
float:left;
top:0px;
width:100%;
height:100%;
margin:auto;
}
</style>
</head>

<body>
<div id="map_canvas"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var marker;
var infowindow;

function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// กำหนดจุดเริ่มต้นของแผนที่
var my_Latlng  = new GGM.LatLng(13.7543682,100.540299);  // กำหนด object ไปแสดงแผนที่ id=map_canvas
var my_DivObj=$("#map_canvas")[0]; // กำหนด Option ของแผนที่
var myOptions = {
zoom: 6, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง
// กำหนดรูปแบบแผนที่
mapTypeId: google.maps.MapTypeId.ROADMAP,

mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่ 
position:GGM.ControlPosition.TOP_RIGHT, // จัดตำแหน่งตัวควบคุมแผนที่
style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style ของตัวควบคุม
}
};

map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map

// กำหนด event ให้แผนที่แสดง marker เมื่อคลิกที่ MAP
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});

}

function placeMarker(location) {
if (!marker || !marker.setPosition) {
marker = new google.maps.Marker({
position: location,
map: map,
});

}else{
marker.setPosition(location);
}

if (!!infowindow && !!infowindow.close) {
infowindow.close();
}

infowindow = new google.maps.InfoWindow({
content: 'Latitude : ' + location.lat() + '<br>Longitude : ' + location.lng()
});

infowindow.open(map, marker);

// กำหนด event ให้กับตัว marker เมื่อคลิกที่ตัว marker ให้แสดง info
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker); 
});

}

$(function(){
$("<script/>", {
 "type": "text/javascript",
 src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
}).appendTo("body");
});

</script>  
</body>
</html>








จัดทำโดย คณะเจ้าหน้าที่บริษัท อสมท จำกัด ( มหาชน ) ผู้มีโอกาสเข้าร่วมอบรมเทคโนโลยีดิจิตอล ณ ประเทศญี่ปุ่น