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


การทำ Alert Message กล่องข้อความแจ้งเตือน เมื่อคลิกที่ 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;
}

#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.ROADMAP,

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

google.maps.event.addListener(marker, 'click', function() {
        alert("something");
});

}

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









Google เปลี่ยน Maps Platform พร้อมคิดเงินตามการใช้งานจริง

Google Maps API ปรับปรุงใหม่ เปลี่ยนชื่อเป็น Maps Platform พร้อมระบบคิดเงินแบบจ่ายตามการใช้งานจริง ตั้งแต่กลางเดือน กันยายน 2561 Google MAP ยกเลิกแผนที่ API ฟรี ต้องลงทะเบียน ID จ่ายเงินค่าใช้งานบนแผนที่

ใน Google Maps Platform นั้น จะถูกจัดกลุ่ม API ใหม่ทั้งหมด 18 ตัวที่แตกต่างกันไว้ใน 3 กลุ่มผลิตภัณฑ์หลัก คือ Maps, Routes และ Places เพื่อให้หา API ได้ง่ายขึ้น โดยการอัพเดตนี้ผู้ใช้ไม่จำเป็นต้องแก้ไขโค้ดใด ๆ

ถัดไปคือฟีเจอร์ด้านการเก็บเงิน Google เปลี่ยนระบบเก็บเงินของ Maps Platform ใหม่ จากเดิมที่จะมีแพลน Standard และ Premium ก็เปลี่ยนมาเป็นระบบจ่ายเงินแบบ pay-as-you-go สำหรับผลิตภัณฑ์หลัก คือจ่ายเงินเท่าที่ใช้ในแต่ละเดือน ดังนั้น API ก็ไม่ต้องถูกจำกัดการใช้งานตามแพลนแบบเดิม ซึ่ง Google Maps Platform จะอินทิเกรตเข้ากับคอนโซลของ Google Cloud Platform เพื่อให้ผู้ใช้สามารถติดตามและจัดการการใช้งานได้ง่ายขึ้นอีกด้วย

Google แจ้งว่า ตั้งแต่ 11 มิถุนายนเป็นต้นไปผู้ใช้ Google Maps Platform จะต้องมี API key ที่ถูกต้องและมีบัญชีเก็บเงินของ Google Cloud Platform เพื่อใช้งานผลิตภัณฑ์หลัก โดยเมื่อเปลี่ยนไปใช้ระบบเก็บเงินใหม่ Google จะให้เครดิต 200 ดอลลาร์ต่อเดือนฟรีสำหรับการใช้งาน Maps, Routes และ Places ซึ่งหากใช้เกินก็ให้จ่ายตามจริงตามตารางค่าใช้จ่าย

สำหรับผู้ใช้ Google Maps API เดิม สามารถอ่านคู่มือเกี่ยวกับการเปลี่ยนแปลงพร้อมคำแนะนำการย้ายไป Maps Platform ได้ได้ที่นี่




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