การอัปเกรดแอปพลิเคชัน Maps JavaScript API จากเวอร์ชัน 2 เป็นเวอร์ชัน 3

กิจกรรมใหม่สําหรับการสนับสนุน MVC

API เวอร์ชัน 3 เพิ่มเหตุการณ์ประเภทใหม่เพื่อแสดงการเปลี่ยนแปลงสถานะของ MVC ขณะนี้เหตุการณ์มี 2 ประเภท ได้แก่

• ระบบจะส่งต่อเหตุการณ์ของผู้ใช้ (เช่น เหตุการณ์เมาส์ "คลิก") จาก DOM ไปยัง Maps JavaScript API เหตุการณ์เหล่านี้แยกต่างหากและแตกต่างจากเหตุการณ์ DOM มาตรฐาน
• การแจ้งเตือนการเปลี่ยนแปลงสถานะของ MVC จะแสดงการเปลี่ยนแปลงในออบเจ็กต์ Maps API และตั้งชื่อตามรูปแบบ property_changed

ออบเจ็กต์ Maps API แต่ละรายการจะส่งออกเหตุการณ์ที่มีชื่อจำนวนหนึ่ง แอปพลิเคชันที่มีความสนใจในเหตุการณ์ที่เฉพาะเจาะจงควรลงทะเบียน Listener เหตุการณ์สําหรับเหตุการณ์เหล่านั้นและเรียกใช้โค้ดเมื่อได้รับเหตุการณ์เหล่านั้น กลไกที่ทำงานตามเหตุการณ์นี้เหมือนกันทั้งใน Maps JavaScript API v2 และ v3 ยกเว้นเนมสเปซที่เปลี่ยนจาก GEvent เป็น google.maps.event

GEvent.addListener(map, 'click', function() {
  alert('You clicked the map.');
});

google.maps.event.addListener(map, 'click', function() {
  alert('You clicked the map.');
});

การนำ Listener เหตุการณ์ออก

คุณควรนํา Listener เหตุการณ์ออกเมื่อไม่จําเป็นต้องใช้อีกต่อไปเพื่อเหตุผลด้านประสิทธิภาพ การนํา Listener เหตุการณ์ออกทํางานในลักษณะเดียวกันใน v2 และ v3

1. เมื่อคุณสร้าง Listener เหตุการณ์ ระบบจะแสดงผลออบเจ็กต์ทึบแสง (GEventListener ใน v2, MapsEventListener ใน v3)
2. เมื่อต้องการนํา Listener เหตุการณ์ออก ให้ส่งออบเจ็กต์นี้ไปยังเมธอด removeListener() (GEvent.removeListener() ใน v2 หรือ google.maps.event.removeListener() ใน v3) เพื่อนํา Listener เหตุการณ์ออก

การรอรับเหตุการณ์ DOM

หากต้องการบันทึกและตอบสนองต่อเหตุการณ์ DOM (Document Object Model) เวอร์ชัน 3 มีgoogle.maps.event.addDomListener()วิธีแบบคงที่ ซึ่งเทียบเท่ากับGEvent.addDomListener()วิธีในเวอร์ชัน 2

การใช้อาร์กิวเมนต์ที่ส่งในเหตุการณ์

เหตุการณ์ UI มักจะส่งอาร์กิวเมนต์เหตุการณ์ซึ่ง Listener ของเหตุการณ์จะเข้าถึงได้ เราลดความซับซ้อนของอาร์กิวเมนต์เหตุการณ์ส่วนใหญ่ใน v3 เพื่อให้สอดคล้องกับออบเจ็กต์ใน API มากขึ้น (ดูรายละเอียดได้ในข้อมูลอ้างอิง v3)

ไม่มีอาร์กิวเมนต์ overlay ใน Listener เหตุการณ์ v3 หากคุณลงทะเบียนเหตุการณ์ click ในแผนที่ v3 การเรียกกลับจะเกิดขึ้นเมื่อผู้ใช้คลิกแผนที่ฐานเท่านั้น คุณสามารถลงทะเบียนการเรียกกลับเพิ่มเติมในการวางซ้อนที่คลิกได้หากต้องการตอบสนองต่อการคลิกเหล่านั้น

// Passes an overlay argument when clicking on a map

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();

GEvent.addListener(map,'click', function(overlay, latlng) {
  if (latlng) {
    var marker = new GMarker(latlng);
    map.addOverlay(marker);
  }
});

// Passes only an event argument

var myOptions = {
    center: new google.maps.LatLng(-25.363882, 131.044922),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'),
    myOptions);

google.maps.event.addListener(map, 'click', function(event) {
  var marker = new google.maps.Marker({
      position: event.latLng,
      map: map
  });
});

การเปลี่ยนแปลงประเภทการควบคุม

มีการเปลี่ยนแปลงบางอย่างกับประเภท control เกิดขึ้นเมื่อใช้ v3 API

1. v3 API รองรับแผนที่ประเภทอื่นๆ เพิ่มเติม รวมถึงแผนที่ภูมิประเทศและความสามารถในการเพิ่มแผนที่ประเภทที่กำหนดเอง
2. การควบคุมแบบลําดับชั้น v2 GHierarchicalMapTypeControl ไม่มีให้บริการแล้ว คุณสามารถสร้างเอฟเฟกต์ที่คล้ายกันโดยใช้การควบคุม google.maps.MapTypeControlStyle.HORIZONTAL_BAR
3. เลย์เอาต์แนวนอนที่ GMapTypeControl ระบุใน v2 ไม่พร้อมใช้งานใน v3

การเพิ่มการควบคุมลงในแผนที่

เมื่อใช้ Maps JavaScript API v2 คุณจะต้องเพิ่มการควบคุมลงในแผนที่ผ่านเมธอด addControl() ของออบเจ็กต์แผนที่ ใน v3 คุณจะแก้ไขออบเจ็กต์ MapOptions ที่เชื่อมโยงแทนการเข้าถึงหรือแก้ไขตัวควบคุมโดยตรง ตัวอย่างด้านล่างแสดงวิธีปรับแต่งแผนที่เพื่อเพิ่มการควบคุมต่อไปนี้

• ปุ่มที่ช่วยให้ผู้ใช้สลับระหว่างแผนที่ประเภทต่างๆ ได้
• มาตราส่วนแผนที่

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);

// Add controls
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());

var myOptions = {
    center: new google.maps.LatLng(-25.363882, 131.044922),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,

    // Add controls
    mapTypeControl: true,
    scaleControl: true
};

var map = new google.maps.Map(document.getElementById('map'),
    myOptions);

การควบคุมการวางตำแหน่งบนแผนที่

การควบคุมตำแหน่งมีการเปลี่ยนแปลงอย่างมากในเวอร์ชัน 3 ใน v2 วิธีการ addControl() จะรับพารามิเตอร์ที่ 2 (ไม่บังคับ) ซึ่งช่วยให้คุณระบุตําแหน่งของตัวควบคุมสัมพันธ์กับมุมของแผนที่ได้

ใน v3 คุณจะตั้งค่าตําแหน่งของการควบคุมผ่านพร็อพเพอร์ตี้ position ของตัวเลือกการควบคุม ตำแหน่งของการควบคุมเหล่านี้ไม่ใช่ตำแหน่งที่แน่นอน แต่ API จะจัดวางการควบคุมอย่างชาญฉลาดโดย "จัดเรียง" การควบคุมรอบๆ องค์ประกอบแผนที่ที่มีอยู่ภายในข้อจำกัดที่กำหนด (เช่น ขนาดแผนที่) วิธีนี้ช่วยให้มั่นใจว่าการควบคุมเริ่มต้นจะเข้ากันได้กับการควบคุมของคุณ ดูข้อมูลเพิ่มเติมได้ที่การควบคุมการระบุตำแหน่งใน v3

โค้ดต่อไปนี้จะจัดตำแหน่งตัวควบคุมจากตัวอย่างข้างต้นใหม่

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);

// Add map type control
map.addControl(new GMapTypeControl(), new GControlPosition(
    G_ANCHOR_TOP_LEFT, new GSize(10, 10)));

// Add scale
map.addControl(new GScaleControl(), new GControlPosition(
    G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 20)));

var myOptions = {
  center: new google.maps.LatLng(-25.363882, 131.044922),
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP,

  // Add map type control
  mapTypeControl: true,
  mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_LEFT
  },

  // Add scale
  scaleControl: true,
  scaleControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_RIGHT
  }
};

var map = new google.maps.Map(document.getElementById('map'),
    myOptions);

การควบคุมที่กำหนดเอง

Maps JavaScript API ช่วยให้คุณสร้างการควบคุมการไปยังส่วนต่างๆ ที่กําหนดเองได้ หากต้องการปรับแต่งการควบคุมด้วย v2 API คุณจะต้องสร้างคลาสย่อยของคลาส GControl และกำหนดตัวแฮนเดิลสำหรับเมธอด initialize() และ getDefaultPosition() ไม่มีคลาสที่เทียบเท่าคลาส GControl ใน v3 แต่ระบบจะแสดงการควบคุมเป็นองค์ประกอบ DOM แทน หากต้องการเพิ่มการควบคุมที่กําหนดเองด้วย v3 API ให้สร้างโครงสร้าง DOM สําหรับการควบคุมในคอนสตรคเตอร์เป็นองค์ประกอบย่อยของ Node (เช่น องค์ประกอบ <div>) และเพิ่มโปรแกรมรับฟังเหตุการณ์เพื่อจัดการเหตุการณ์ DOM ดัน Node ไปยังอาร์เรย์ controls[position] ของแผนที่เพื่อเพิ่มอินสแตนซ์ของการควบคุมที่กำหนดเองลงในแผนที่

เมื่อใช้คลาส HomeControl ที่เป็นไปตามข้อกําหนดของอินเทอร์เฟซที่ระบุไว้ข้างต้น (ดูรายละเอียดในเอกสารประกอบการควบคุมที่กําหนดเอง) ตัวอย่างโค้ดต่อไปนี้จะแสดงวิธีเพิ่มการควบคุมที่กําหนดเองลงในแผนที่

map.addControl(new HomeControl(),
    GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));

var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
    homeControlDiv);

การเพิ่มและนำไฟล์ซ้อนทับออก

ประเภทของวัตถุที่แสดงโดยการวางซ้อนจะเหมือนกันระหว่าง v2 กับ v3 แต่มีการจัดการต่างกัน

เพิ่มและนำการวางซ้อนใน v2 API ออกจากแผนที่โดยใช้เมธอด addOverlay() และ removeOverlay() ของออบเจ็กต์ GMap2 ใน v3 คุณจะกำหนดแผนที่ให้กับการวางซ้อนผ่านพร็อพเพอร์ตี้ map ของคลาสตัวเลือกการวางซ้อนที่เกี่ยวข้อง นอกจากนี้ คุณยังเพิ่มหรือนําการวางซ้อนออกได้โดยตรงโดยเรียกใช้เมธอด setMap() ของออบเจ็กต์การวางซ้อน และระบุแผนที่ที่ต้องการ การตั้งค่าพร็อพเพอร์ตี้แผนที่เป็น null จะนำการวางซ้อนออก

ไม่มีเมธอด clearOverlays() ใน v3 หากต้องการจัดการชุดการวางซ้อน คุณควรสร้างอาร์เรย์เพื่อเก็บการวางซ้อน เมื่อใช้อาร์เรย์นี้ คุณจะเรียกใช้ setMap() กับการวางซ้อนแต่ละรายการในอาร์เรย์ได้ (โดยส่ง null หากต้องการนำออก)

เครื่องหมายที่ลากได้

โดยค่าเริ่มต้น เครื่องหมายจะคลิกได้ แต่จะลากไม่ได้ ตัวอย่างต่อไปนี้จะเพิ่มเครื่องหมายที่ลากได้

var myLatLng = new GLatLng(-25.363882, 131.044922);
var map = new GMap2(document.getElementById('map'));
map.setCenter(myLatLng, 4);

var marker = new GMarker(latLng, {
  draggable: true
});
map.addOverlay(marker);

var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var map = new google.maps.Map(
  document.getElementById('map'), {
  center: myLatLng,
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker({
    position: myLatLng,
    draggable: true,
    map: map
});

ไอคอน

คุณสามารถกำหนดไอคอนที่กำหนดเองให้แสดงแทนเครื่องหมายเริ่มต้นได้ หากต้องการใช้รูปภาพที่กำหนดเองใน v2 ให้สร้างอินสแตนซ์ GIconจาก G_DEFAULT_ICON type แล้วแก้ไข หากรูปภาพมีขนาดใหญ่กว่าหรือเล็กกว่าไอคอนเริ่มต้น คุณต้องระบุรูปภาพด้วยอินสแตนซ์ GSize v3 API ลดความซับซ้อนของกระบวนการนี้ลงเล็กน้อย เพียงตั้งค่าพร็อพเพอร์ตี้ icon ของหมุดเป็น URL ของรูปภาพที่กําหนดเอง แล้ว API จะปรับขนาดไอคอนโดยอัตโนมัติ

Maps JavaScript API ยังรองรับไอคอนที่ซับซ้อนด้วย ไอคอนที่ซับซ้อนอาจมีหลายไทล์ รูปร่างที่ซับซ้อน หรือระบุ "ลําดับกอง" ของลักษณะที่รูปภาพควรแสดงสัมพันธ์กับการวางซ้อนอื่นๆ หากต้องการเพิ่มรูปร่างลงในเครื่องหมายใน v2 คุณต้องระบุพร็อพเพอร์ตี้เพิ่มเติมในแต่ละอินสแตนซ์ GIcon แล้วส่งค่านี้เป็นตัวเลือกไปยังคอนสตรคเตอร์ GMarker ใน v3 ไอคอนที่ระบุด้วยวิธีนี้ควรตั้งค่าพร็อพเพอร์ตี้ icon เป็นออบเจ็กต์ประเภท Icon เวอร์ชัน 3 ไม่รองรับเงาเครื่องหมาย

ตัวอย่างต่อไปนี้แสดงธงชายหาดที่หาดบอนไดในออสเตรเลีย โดยส่วนที่โปร่งใสของไอคอนจะคลิกไม่ได้

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();

var flagIcon = new GIcon(G_DEFAULT_ICON);
flagIcon.image = '/images/beachflag.png';
flagIcon.imageMap = [1, 1, 1, 20, 18, 20, 18 , 1];
var bbLatLng = new GLatLng(-33.890542, 151.274856);

map.addOverlay(new GMarker(bbLatLng, {
  icon: flagIcon
}));

var map = new google.maps.Map(
  document.getElementById('map'), {
  center: new google.maps.LatLng(-25.363882, 131.044922),
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
};
var bbLatLng = new google.maps.LatLng(-33.890542, 151.274856);

var bbMarker = new google.maps.Marker({
    icon: '/images/beachflag.png'
    shape: shape,
    position: bbLatLng,
    map: map
});

เส้นประกอบ

เส้นประกอบประกอบด้วยอาร์เรย์ของ LatLng รวมถึงชุดส่วนของเส้นที่เชื่อมต่อตำแหน่งเหล่านั้นตามลำดับ การสร้างและการแสดงออบเจ็กต์ Polyline ใน v3 คล้ายกับการใช้ออบเจ็กต์ GPolyline ใน v2 ตัวอย่างต่อไปนี้วาดรูปหลายเส้นเชิงเรขาคณิตที่มีความกว้าง 3 พิกเซลและโปร่งแสงครึ่งหนึ่งจากซูริกไปซิดนีย์ผ่านสิงคโปร์

var polyline = new GPolyline(
  [
    new GLatLng(47.3690239, 8.5380326),
    new GLatLng(1.352083, 103.819836),
    new GLatLng(-33.867139, 151.207114)
  ],
  '#FF0000', 3, 0.5, {
  geodesic: true
});

map.addOverlay(polyline);

var polyline = new google.maps.Polyline({
  path: [
    new google.maps.LatLng(47.3690239, 8.5380326),
    new google.maps.LatLng(1.352083, 103.819836),
    new google.maps.LatLng(-33.867139, 151.207114)
  ],
  strokeColor: '#FF0000',
  strokeOpacity: 0.5,
  strokeWeight: 3,
  geodesic: true
});

polyline.setMap(map);

โพลีไลน์ที่เข้ารหัส

เวอร์ชัน 3 ไม่รองรับการสร้างออบเจ็กต์ Polyline จากเส้นประกอบที่เข้ารหัสโดยตรง แต่ไลบรารีเรขาคณิตจะมีวิธีการเข้ารหัสและถอดรหัสเส้นประกอบแทน ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีโหลดไลบรารีนี้ได้ในส่วนไลบรารีใน Maps API เวอร์ชัน 3

ตัวอย่างด้านล่างวาดรูปหลายเส้นที่เข้ารหัสเดียวกัน โค้ด v3 ใช้เมธอด decodePath() จากเนมสเปซ google.maps.geometry.encoding

var polyline = new GPolyline.fromEncoded({
  points: 'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H',
  levels: 'PPP',
  zoomFactor: 2,
  numLevels: 18,
  color: '#ff0000',
  opacity: 0.8,
  weight: 3
});

map.addOverlay(polyline);

var polyline = new google.maps.Polyline({
  path: google.maps.geometry.encoding.decodePath(
    'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H'),
  strokeColor: '#FF0000',
  strokeOpacity: 0.5,
  strokeWeight: 3,
});

polyline.setMap(map);

รูปหลายเหลี่ยม

รูปหลายเหลี่ยมจะกําหนดขอบเขตภายในลูปปิด ออบเจ็กต์ Polygon ประกอบด้วยชุดจุดในลําดับที่เรียงตามลําดับ คล้ายกับออบเจ็กต์ Polyline คลาส Polygon ของ v3 คล้ายกับคลาส GPolygon ของ v2 มาก ยกเว้นคุณไม่จําเป็นต้องระบุจุดเริ่มต้นที่ปลายเส้นทางซ้ำอีกเพื่อปิดลูป API v3 จะปิดรูปหลายเหลี่ยมโดยอัตโนมัติด้วยการวาดเส้นที่เชื่อมต่อพิกัดสุดท้ายกลับไปยังพิกัดแรก ข้อมูลโค้ดต่อไปนี้สร้างรูปหลายเหลี่ยมที่แสดงสามเหลี่ยมเบอร์มิวดา

var map = new GMap2(document.getElementById('map'));

map.setCenter(new GLatLng(24.886436, -70.268554), 5);

var bermudaTriangle = new GPolygon(
  [
    new GLatLng(25.774252, -80.190262),
    new GLatLng(18.466465, -66.118292),
    new GLatLng(32.321384, -64.75737),
    new GLatLng(25.774252, -80.190262)
  ],
  '#FF0000', 2, 0.8, '#FF0000', 0.35);

map.addOverlay(bermudaTriangle);

var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(24.886436, -70.268554),
  mapTypeId: google.maps.MapTypeId.TERRAIN,
  zoom: 5
});

var bermudaTriangle = new google.maps.Polygon({
  paths: [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
  ],
  strokeColor: '#FF0000',
  strokeWeight: 2,
  strokeOpacity: 0.8,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});

bermudaTriangle.setMap(map);

รูปร่างที่ผู้ใช้แก้ไขได้

คุณสามารถทำให้ผู้ใช้แก้ไขเส้นประกอบและรูปหลายเหลี่ยมได้ ข้อมูลโค้ดต่อไปนี้มีความหมายเหมือนกัน

map.addOverlay(polyline);
polyline.enableEditing();

polyline.setMap(map);
polyline.setEditable(true);

ดูความสามารถในการวาดขั้นสูงเพิ่มเติมได้ในคลังภาพวาดในเอกสารประกอบ v3

หน้าต่างข้อมูล

InfoWindow จะแสดงเนื้อหาในหน้าต่างที่ลอยอยู่เหนือแผนที่ ความแตกต่างที่สำคัญระหว่างวิดเจ็ตข้อมูลเวอร์ชัน 2 กับเวอร์ชัน 3 มีดังนี้

• API เวอร์ชัน 2 รองรับ GInfoWindow เพียงรายการเดียวต่อแผนที่ แต่ API เวอร์ชัน 3 รองรับ InfoWindow หลายรายการพร้อมกันในแต่ละแผนที่
• InfoWindow เวอร์ชัน 3 จะยังคงเปิดอยู่เมื่อคุณคลิกแผนที่ GInfoWindow ของ v2 จะปิดโดยอัตโนมัติเมื่อคุณคลิกแผนที่ คุณสามารถจําลองลักษณะการทํางานของ v2 ได้โดยการเพิ่ม click listener ในออบเจ็กต์ Map
• API เวอร์ชัน 3 ไม่ได้รองรับInfoWindowแบบแท็บโดยกำเนิด

การวางซ้อนพื้น

หากต้องการวางรูปภาพบนแผนที่ คุณควรใช้ออบเจ็กต์ GroundOverlay ตัวสร้างของ GroundOverlay นั้นเหมือนกันใน v2 และ v3 โดยพื้นฐานแล้ว โดยจะระบุ URL ของรูปภาพและขอบเขตของรูปภาพเป็นพารามิเตอร์

ตัวอย่างต่อไปนี้วางแผนที่โบราณของนวร์ก รัฐนิวเจอร์ซีย์บนแผนที่เป็นการวางซ้อน

var bounds = new GLatLngBounds(
    new GLatLng(40.716216, -74.213393),
    new GLatLng(40.765641, -74.139235));

var overlay = new GGroundOverlay(
    'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    bounds);

map.addOverlay(overlay);

var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.716216, -74.213393),
    new google.maps.LatLng(40.765641, -74.139235));

var overlay = new google.maps.GroundOverlay(
    'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    bounds);

overlay.setMap(map);

ประเภทแผนที่ที่พบบ่อย

แผนที่พื้นฐาน 4 ประเภทมีให้บริการทั้งในเวอร์ชัน 2 และ 3 ดังนี้

• MapTypeId.ROADMAP (แทนที่ G_NORMAL_MAP) แสดงมุมมองแผนที่ถนน
• MapTypeId.SATELLITE (แทนที่ G_SATELLITE_MAP) แสดงภาพถ่ายดาวเทียมของ Google Earth
• MapTypeId.HYBRID (แทนที่ G_HYBRID_MAP) แสดงมุมมองปกติและมุมมองดาวเทียมผสมกัน
• MapTypeId.TERRAIN (แทนที่ G_PHYSICAL_MAP) แสดงแผนที่ภูมิศาสตร์ตามข้อมูลภูมิประเทศ

ด้านล่างนี้คือตัวอย่าง v2 และ v3 การตั้งค่าแผนที่เป็นมุมมองภูมิประเทศ

map.setMapType(G_PHYSICAL_MAP);
    

map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
    

Maps JavaScript API v3 ได้ทำการเปลี่ยนแปลงบางอย่างกับแผนที่ประเภทที่ใช้ไม่บ่อยด้วย ดังนี้

• ไทล์แผนที่สำหรับวัตถุท้องฟ้าที่ไม่ใช่โลกไม่มีให้บริการเป็นประเภทแผนที่ใน v3 API แต่เข้าถึงได้ในรูปแบบแผนที่ที่กำหนดเองตามที่แสดงในตัวอย่างนี้
• ไม่มีแผนที่ประเภทพิเศษใน v3 ที่จะมาแทนที่ประเภท G_SATELLITE_3D_MAP จาก v2 แต่คุณสามารถผสานรวมปลั๊กอิน Google Earth ในแผนที่ v3 ได้โดยใช้คลังนี้

ภาพระดับการซูมสูงสุด

ภาพถ่ายดาวเทียมอาจไม่พร้อมใช้งานในระดับการซูมสูงเสมอไป หากต้องการทราบระดับการซูมสูงสุดที่ใช้ได้ก่อนที่จะตั้งค่าระดับการซูม ให้ใช้คลาส google.maps.MaxZoomService คลาสนี้จะแทนที่เมธอด GMapType.getMaxZoomAtLatLng() จาก v2

var point = new GLatLng(
    180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(point);
map.setMapType(G_HYBRID_MAP);

map.getCurrentMapType().getMaxZoomAtLatLng(point,
  function(response) {
    if (response.status) {
      map.setZoom(response.zoom);
    } else {
      alert("Error in Max Zoom Service.");
    }
});

var myLatlng = new google.maps.LatLng(
    180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new google.maps.Map(
  document.getElementById("map"),{
    zoom: 0,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
});
var maxZoomService = new google.maps.MaxZoomService();
maxZoomService.getMaxZoomAtLatLng(
  myLatlng,
  function(response) {
    if (response.status == google.maps.MaxZoomStatus.OK) {
      map.setZoom(response.zoom);
    } else {
      alert("Error in Max Zoom Service.");
    }
});

ภาพถ่ายทางอากาศแบบมุมมอง

เมื่อเปิดใช้ภาพถ่ายทางอากาศใน v3 การควบคุมจะคล้ายกับการควบคุม GLargeZoomControl3D ใน v2 โดยมีการควบคุมการหมุนเพิ่มเติมเพื่อหมุนไปยังทิศทางที่รองรับ

คุณติดตามเมืองที่มีภาพมุม 45° พร้อมให้บริการได้ในแผนที่นี้ เมื่อภาพมุม 45° พร้อมใช้งาน ระบบจะเพิ่มตัวเลือกเมนูย่อยลงในปุ่มดาวเทียมของ Maps API