หน้าเว็บ

17 พ.ย. 2557

มาแต่ง Google Map กันเถอะ [part 3 - แปะ Marker บน Google Maps API Styled Map Wizard]

หลังจากสร้าง Google Maps Style ในรูปแบบที่เราต้องการแล้ว ก็ดึง JSON code มาใช้ร่วมกับ Java Script แล้วทำการสร้างไฟล์แผนที่ของเราขึ้นมา ต่อไปเราจะกล่าวถึงการ PIN ตำแหน่ง หรือ Marker ลงบนแผนที่ของเรา

แผนที่ ที่ได้จากการสร้าง Google Maps Style
(รายละเอียดติดตามได้ที่ Part2)

ทำการเพิ่มคำสั่ง Marker ลงไปใน map.js โดยใส่ใว้ถัดจาก คำสั่ง
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

รูปแบบคำสัง Marker ดังนี้
 var marker = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            animation: google.maps.Animation.DROP,
                            title: "Welcome to Thailand" //แสดงเมื่อนำเมาส์ชี้ที่ Marker pin 
 });
 
        var info = new google.maps.InfoWindow({
                            content: '<h1>Hello</h1>' //คำที่แสดงเมื่อคลิก Marker pin
                        });
        google.maps.event.addListener(marker, 'click', function(){
            info.open(map, marker);
        });



แค่นี้ก็จะได้แผนที่แสดงตำแหน่งที่สมบรูณ์แล้ว


เป็นอันว่าจบบทเรียน เรื่อง "มาแต่ง Google Map กันเถอะ" แล้วนะคะ โดยข้อดีของเครื่องมือ Google Maps API Styled Map Wizard คือ สามารถแสดงแผนที่ในรูปแบบที่เราต้องการได้ แต่ก็ต้องอาศัยความรู้พื้นฐานของการเขียนโค้ดนิดหน่อย ถึงจะสามารถนำมาประยุกต์ใช้ได้จริงๆ

ส่วนข้อเสีย ก็ขัดกับข้อดีแหละค่ะ ถ้าคนที่ไม่มีความรู้พื้นฐานการเขียนโค้ดเลย อาจจะทำให้การนำไปใช้ยากหน่อย
 
ยังไงก็ ลองนำไปประยุกต์ใช้กับเว็บไซต์ของตนเองดูนะคะ เพื่อความโดดเด่นไม่ซ้ำใคร ^3^

สำหรับข้อมูลเพิ่มเติมสามารถติดตามได้ที่ https://developers.google.com/maps/
เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ:

14 พ.ย. 2557

มาแต่ง Google Map กันเถอะ [part 2 - วิธีใช้ Google Maps API Styled Map Wizard กับเว็บ]

ก่อนหน้านี้เราได้ลองเล่น Google Maps API Styled Map Wizard กันไปแล้ว คราวนี้ถึงเวลานำไปใช้จริงแล้วสิ



จากรูป ด้านขาวมือจะมี Tool ชื่อว่า Map Style อยู่  มองมาข้างล่างจะเจอปุ่ม "Show JSON"   เมื่อกดแล้วจะพบกับ โค้ด หน้าตาประมาณนี้

Google Maps API v3 Styled Maps JSON
[
  {
    "featureType": "landscape",
    "stylers": [
      { "hue": "#ffaa00" },
      { "saturation": -1 },
      { "lightness": -3 },
      { "gamma": 1 }
    ]
  },{
    "featureType": "road.highway",
    "stylers": [
      { "gamma": 1 },
      { "saturation": -54 },
      { "lightness": 8 },
      { "hue": "#22ff00" }
    ]
  },{
    "featureType": "road.arterial",
    "stylers": [
      { "hue": "#ffbb00" },
      { "saturation": 1 },
      { "lightness": 1 },
      { "gamma": 1 }
    ]
  },{
    "featureType": "road.local",
    "stylers": [
      { "hue": "#00ffff" },
      { "saturation": 1 },
      { "lightness": 30 },
      { "gamma": 1 }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "hue": "#00bbff" },
      { "saturation": 7 },
      { "gamma": 1 },
      { "lightness": -26 }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "hue": "#66ff00" },
      { "saturation": 33 },
      { "lightness": -28 },
      { "gamma": 1 }
    ]
  },{
  },{
    "featureType": "administrative",
    "stylers": [
      { "hue": "#0008ff" },
      { "saturation": 49 },
      { "lightness": -3 }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "saturation": 1 },
      { "hue": "#ffb300" }
    ]
  }
]
โค้ดนี้ยังไม่สามารถนำมาใช้ได้เลยนะคะ ต้องสร้าง Map ก่อน


1. หน้าสำหรับแสดงแผนที่ index.html

<html>
<html>
<head>
<link rel="stylesheet" href="map.css">
<script src="http://www.google.com/jsapi/"></script>
<script src="sample.js"></script>
</head>
<body>
     <div id="map"></div>
</body>
</html>


2. กำหนด style  map.css

@charset "utf-8";
html,body{
  width: 100%;
  height: 100%;
}
#map{
  width: 600px;
  height: 450px;
}


3. สร้างไฟล์ map.js

google.load("maps", "3.x", {"other_params":"sensor=false"});

//ฟังก์ชันกำหนดค่าของแผนที่
function initialize() {

//กำหนดพิกัด
  var myLatLng = new google.maps.LatLng(13.797849, 100.547436);


  var mapOptions = {
    zoom: 15,                                 //ระดับการซูม
    center: myLatLng,                         //พิกัดกึ่งกลางแผนที่
    mapTypeId: google.maps.MapTypeId.ROADMAP,  //ประเภทของแผนที่
    mapTypeControlOptions: {
       mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'simple']
    }
 
  };
  
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
  //ค่าที่ได้จาก Google Maps API v3 Styled Maps JSON
  var samplestyle = [
  {
    "featureType": "landscape",
    "stylers": [
      { "hue": "#ffaa00" },
      { "saturation": -1 },
      { "lightness": -3 },
      { "gamma": 1 }
    ]
  },{
    "featureType": "road.highway",
    "stylers": [
      { "gamma": 1 },
      { "saturation": -54 },
      { "lightness": 8 },
      { "hue": "#22ff00" }
    ]
  },{
    "featureType": "road.arterial",
    "stylers": [
      { "hue": "#ffbb00" },
      { "saturation": 1 },
      { "lightness": 1 },
      { "gamma": 1 }
    ]
  },{
    "featureType": "road.local",
    "stylers": [
      { "hue": "#00ffff" },
      { "saturation": 1 },
      { "lightness": 30 },
      { "gamma": 1 }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "hue": "#00bbff" },
      { "saturation": 7 },
      { "gamma": 1 },
      { "lightness": -26 }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "hue": "#66ff00" },
      { "saturation": 33 },
      { "lightness": -28 },
      { "gamma": 1 }
    ]
  },{
  },{
    "featureType": "administrative",
    "stylers": [
      { "hue": "#0008ff" },
      { "saturation": 49 },
      { "lightness": -3 }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "saturation": 1 },
      { "hue": "#ffb300" }
    ]
  }
];
  
  var samplestyleOptions = {
    name: "Style"
  };
  
  var sampleMapType = new google.maps.StyledMapType(samplestyle, samplestyleOptions);
  map.mapTypes.set('simple', sampleMapType);
  map.setMapTypeId('simple');

 
}

//เรียกใช้แผนที่
google.setOnLoadCallback(initialize);


แค่นี้ก็เป็นอันเสร็จพิธี 
เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ:

13 พ.ย. 2557

มาแต่ง Google Map กันเถอะ [part 1 - ลองเล่น Google Maps API Styled Map Wizard กัน]

วันนี้ไปเจอของดีของ Google มาเลยอยากจะเอามาเผยแพร่ให้สาธารณชนได้ลองใช้กัน เชื่อว่าหลายคนยังไม่รู้จัก "Google Maps API Styled Map Wizard" อร้ายยย อยากจะบอกว่าปลื้มมากกกก เบื่อหน้าตา Google Map แบบเดิมจะตายอยู่แล้ว มาลองเปลี่ยนสีสันให้เป็นไปตามรูปแบบและสไตล์ของ Map ให้เป็นไปตามเว็บของเราดีกว่า เพื่อความ Model //เกี่ยวมั้ย ^^


มาเริ่มกันเลยจ้าาา ~O~


ก่อนเริ่มตามลิ้งนี้ไปเลย >> Google Maps API Styled Map Wizard


เมื่อเปิดขึ้นมาจะพบกับหน้าตาแบบนี้






[[ ด้านซ้ายมือ Selectors เป็นเครื่องมือกำหนดลักษณะ ]]

1. Feature type - เป็นการกำหนดรูปแบบให้แผนที่ สามารถเลือกกำหนดลักษณได้เฉพาะส่วน เช่น ถนน, แม่น้ำ, สวนสาธารณะ

2. Stylers - กำหนดรูปแบบลักษณะที่แสดง ประกอบด้วย

    2.1 Visibility - เป็นการกำหนดเส้นขอบ

    2.2 Invert lightness - กลับค่าการแสดง

    2.3 Color - สี โดยกำหนดค่าเป็น RGB

    2.4 Weight - ความหนา

    2.5 Hue - ค่าสี (มันต่างจาก color ยังไงใครรู้ช่วยอธิบายเพิ่มให้ที ^^)

    2.6 Saturation - ค่าความอิ่มตัวของสี

    2.7 Lightness - ความสว่าง

    2.8 Gamma - ค่าแกมม่า

[[ด้านขาวมือ Map Style จะแสดงค่าที่เรากำหนด]]
สามารถเพิ่มและดูโค้ดได้ในรูปแบบ JSON

Before
↓↓


เมื่อกำหนดค่าต่างๆ เรียบร้อยแล้วก็จะได้ Google Map หน้าตาใหม่ที่สวยงาม

After
↓↓


สวยปะหละ(แต่งไปเรื่อยหนะ YY) ลองไปเล่นดูนะคะเผื่อจะได้ Google Map ในแบบของตนเอง 


เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ:

24 ก.พ. 2557

เรื่องวุ่นๆ ของ mailer


ขอบคุณรูปภาพน่ารักจาก
 http://kqkangaroo.deviantart.com/art/DON-T-SEND-ME-MORE-MAIL-415491991

ข่าวคราวเงียบหายมาสองสามเดือน อยากตะโกนดังว่า "กลับมาแล้วคร้าาาาาาาาาาาาา"  เนื่องจากอยู่ในช่วงพระศุกร์เข้าพระเสาร์แทรก อะไรก็ยุ่งไปหมด แต่หลังจากนี้จะไม่มีอะไรมาขัดขวางเราได้แล้ว หึหึหึ  เลยจะค่อยๆ ทะยอยเล่า(หรือบ่น ><) ถึงปัญหาระดับ PHP แล้ววิธีแก้ปัญหาทั้งหมดก่อนหน้านี้ นะเคอะ

เข้าเรื่องค่ะ

หลายคนมีปัญหากับสคริปส่งอีเมลล์กันเหลือเกิน รวมตัวเราด้วยแหละ /~~  จนมาเจอตัวหนึ่งอยากบอกว่าเริดอะ ชอบมากจนถึงขั้นติดใจ (เทพๆ ทั้งหลาย อย่าอ่านต่อเลย อายค่ะ 5555) หลายๆ คนคงรู้จักกันในนาม phpmailer แต่หลายคนยก็ไม่รู้จัก  เอ๋!!! แล้วมันคืออะไร ใช้ยังไงหละ

ถ้าถามว่ามันคืออะไร เชิญหาในอากู๋<google>ได้นะคะ (ขี้เกียจอธิบาย ;P) แต่ถ้าถามว่ามันใช้ยังไงหละก็ เตรียมตัวลุยไปพร้อมกันเลยคร้าาาาาาาาาาาาาาา

อันดับแรก ต้องไปโหลด phpmailer มาจากเว็บก่อนนะคะ ลองหาดูค่ะ

ต่อมาก็แตกไฟล์ออกมาค่ะ จะเจออะไรย้วยเยี้ยเยอะแยะมากมายจนไม่อยากทำต่อ อดทนใว้จ๊ะ T^T



เลือกเฉพาะไฟล์  class.phpmailer.php, class.smtp.php, class.pop3.php นะคะ แยกใส่ Folder ต่างหากเลยเดี๋ยวงง 

จากนั้นสร้างไฟล์ชื่อว่า send.php แล้วใส่ code ทั้งหมดนี้ลงไป (แนะนำให้พิมพ์เองนะ จะได้จำได้)

<?

require 'class.phpmailer.php';
//------------------------------ Connect Email -----------------------------//   
    $mail1 = new PHPMailer();

   
    $mail->CharSet = "utf-8";
   
    $mail->From = "yourmail@domainname.com";  //อีเมลล์ผู้ส่ง

    $mail->FromName = "Your name";  //ชื่อคนส่ง

    $mail->Host = "mail.domainname.com"; 
     //SMTP Server โดนเมนที่จดเองบางที่จะเหมือนตัวอย่าง แต่บางที่จะใช้ stmp.domainname.com
    //แต่เมลล์ทั่วไปจะใช้ stmp.gmail.com(gmail), stmp.live.com(hotmail), stmp.mail.yahoo.com

    $mail->Port = 25; //port ก็ขึ้นอยู่กับผู้ให้บริการอีเมลล์นะ ลองหาดูว่าใครใช้อะไร

    $mail->Mailer = "smtp"; //จะกำหนดค่าเป็น stmp หรือ pop3 ตามใจจ้า ซึ่งแต่ละแบบก็ไม่เหมือนกัน ลองหาข้อมมูลเอานะ แต่แนะนำ stmp
    $mail->AddAddress("to1@domainname.com"); //อีเมลล์ผู้รับคนที่ 1
    $mail->AddAddress("to2@domainname.com"); //อีเมลล์ผู้รับคนที่ 2 (จะมีอีก 10 ยังได้เลย ^^)
   
   
    $mail->WordWrap = 100;  
    $mail->Subject = "send mail by Mailer";
    $mail->Body    = $contents01; //ข้อความที่จะส่งไปสามารใส่เป็นตัวแปลได้ หรือหากต้องการใส่เป็นประโยคทั่วไป ทำได้โดยใส่ฟันหนู (" ") ครอบข้อความ เช่น $mail->Body    = "คิดถึงนะ";

    $mail->IsHTML(false);
   
    $mail->SMTPAuth = "true";
    $mail->Username = "youruser@domainname.com"; //อีเมลล์ผู้ส่ง
    $mail->Password = "yourpassword"; //รหัสผ่านสำหรับอีเมลล์ผู้ส่ง
   

    $mail->Send();  //ส่งเลยยยยยยยยยยย



//------------------------------ Check Send-----------------------------//   
 
if(!$mail1->Send()&&!$mail2->Send())
{
   echo "Message could not be sent. <p>";
   echo "Mailer Error: " . $mail->ErrorInfo;
   exit;
}
else
{
   echo "Complete HAHAHA";
}

?>


 แค่นี้ก็เรียบร้อยโรงเรียนเราแล้วจ้า อาจจะอธิบายได้ไม่ละเอียดเท่าไหร่ อย่าโกรธกันนะ เราเชื่อว่าถ้าคุณพร้อมที่จะเรียนรู้แล้วไม่มีอะไรยากเกินกว่าความสามารถมนุษย์หรอกน่า เคอะปะ ~O~


เขียนโดย ที่
ป้ายกำกับ:
สมัครสมาชิก: บทความ (Atom)