หน้าเว็บ

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


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

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)