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


ทำบทความไว้เตือนความจำตัวเอง สิคับ
การสร้าง Marker พิกัด ลงบนแผนที่ Google MAP



<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;
}

/* css สำหรับ div คลุม google map */
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#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;

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.TERRAIN,
//mapTypeId: google.maps.MapTypeId.ROADMAP,
//mapTypeId: google.maps.MapTypeId.SATELLITE, 
//mapTypeId: google.maps.MapTypeId.HYBRID,

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

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

var marker = new google.maps.Marker({
position: my_Latlng,
map: map,
title: 'Marker Point'
});
}

$(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>








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