ก่อนหน้านี้เราได้ลองเล่น 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);
แค่นี้ก็เป็นอันเสร็จพิธี
