หน้าเว็บ

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 ในแบบของตนเอง 


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