Google Maps - วิธีเปลี่ยนหน้าตา Google Maps (Look And Feel) ด้วย Styles

Google Maps - วิธีเปลี่ยนหน้าตา Google Maps (Look And Feel) ด้วย Styles

หน้าตาการแสดงผลบนแผนที่ Google Maps สามารถปรับแต่งได้ตามความต้องการของผู้พัฒนาด้วย Styles บน Google Maps Javascript API v3

Jul 01, 2016

แก้ไขล่าสุด มีผู้อ่าน 2,759  |  GOOGLE MAPS

หน้าตาการแสดงผลบนแผนที่ Google Maps สามารถปรับแต่งได้ตามความต้องการของผู้พัฒนาด้วย Styles บน Google Maps Javascript API v3 

 

เรามาเริ่มต้นดูตัวอย่างการแสดงผลแบบปกติ

 


เมื่อทำการเปลี่ยนหน้าตา Google Maps (Look And Feel) ด้วย Styles

เปลี่ยนหน้าตาเป็นแบบนี้แล้วนึกถึงแผนที่ในหนังซอมบี้ว่าไหมครับ ?

 

วิธีการเปลี่ยนหน้าตา Google Maps ด้วย Styles


Source Code

var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);
var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

  var featureOpts = [
    {
      stylers: [
        { hue: '#890000' },
        { visibility: 'simplified' },
        { gamma: 0.5 },
        { weight: 0.5 }
      ]
    },
    {
      elementType: 'labels',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'water',
      stylers: [
        { color: '#890000' }
      ]
    }
  ];

  var mapOptions = {
    zoom: 12,
    center: brooklyn,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var styledMapOptions = {
    name: 'Custom Style'
  };
  var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
  map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
}

google.maps.event.addDomListener(window, 'load', initialize);

 

1. กำหนด Styles ของ Maps รายละเอียดข้อมูล Styles สามารถคลิ๊กดูได้ที่นี้

var featureOpts = [
    {
      stylers: [
        { hue: '#890000' },
        { visibility: 'simplified' },
        { gamma: 0.5 },
        { weight: 0.5 }
      ]
    },
    {
      elementType: 'labels',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'water',
      stylers: [
        { color: '#890000' }
      ]
    }
  ];

 

2. ทำการตั้ง Styles ให้กับ Map เท่านี้ก็สามารถเปลี่ยนหน้าตา Google Maps ที่ Website ของเราได้ตามต้องการแล้วครับ

var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

 


แบ่งปัน

ชอบ +1

บันทึก

ฝากคำถาม คำแนะนำ ได้ที่

Facebook : Share.OlanLab.Com
LINE ID : @olanlab
อีเมล์ : olan@olanlab.com

หลักสูตร

สอนการใช้ Google Map Javascript Api

ปัจจุบันการนำแผนที่ Google Map มาใช้บน Website ช่วยอำนวยความสะดวก ให้ผู้เข้าชมได้มากด้วยฟังก์ชั่นการใช้หลากหลาย วิธีการใช้และติดตั้งเป็นยังไงติดตามผ่านหลักสูตรนี้ได้เลยครับ
Share คลังความรู้ด้านเทคโนโลยี สารสนเทศ นวัตกรรมคอมพิวเตอร์ สอนเขียนโปรแกรม Php Java Html CSS Javascript C C++ Objective-C และอื่นๆ บนระบบปฏิบัติการ Window Linux Unix CentOS IOS Android
โดยผู้เขียนที่มีความเชี่ยวชาญเฉพาะ ให้บริการพื้นที่สำหรับนักเขียนที่ต้องการแบ่งปันความรู้ พร้อมให้คำปรึกษาแก่ผู้ที่สนใจ โดยไม่เสียค่าใช้จ่าย