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


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

การสร้าง Marker ให้แสดง INFO ทันที เมื่อโหลดแผนที่ 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 latitude=16.439936;
var longitude=102.828854;
var marker;
var infowindow;
 
function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// กำหนดจุดเริ่มต้นของแผนที่
var my_Latlng  = new GGM.LatLng(latitude, longitude);
var my_DivObj=$("#map_canvas")[0]; // กำหนด Option ของแผนที่
var myOptions = {
zoom: 12, // กำหนดขนาดการ 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: 'Coordinates :\nLatitude = '+latitude+'\nLongitude = '+longitude
});

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

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

infowindow.open(map, marker); // ให้แสดงรายละเอียด info ทุกครั้งที่โหลดแผนที่

}

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








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