Maps JavaScript API ऐप्लिकेशन को वर्शन 2 से वर्शन 3 पर अपग्रेड करना

एमवीसी के लिए नया इवेंट

v3 API, एमवीसी स्टेटस में हुए बदलावों को दिखाने के लिए, एक नया इवेंट टाइप जोड़ता है. अब इवेंट दो तरह के होते हैं:

• उपयोगकर्ता इवेंट (जैसे, "क्लिक" माउस इवेंट), डीओएम से Maps JavaScript API पर भेजे जाते हैं. ये इवेंट, स्टैंडर्ड DOM इवेंट से अलग और अलग तरह के होते हैं.
• एमवीसी स्टेटस में हुए बदलावों की सूचनाएं, Maps API ऑब्जेक्ट में हुए बदलावों को दिखाती हैं. साथ ही, इनका नाम property_changed समझौते के हिसाब से रखा जाता है.

हर Maps API ऑब्जेक्ट, नाम वाले कई इवेंट एक्सपोर्ट करता है. जिन ऐप्लिकेशन को किसी खास इवेंट में दिलचस्पी है उन्हें उन इवेंट के लिए इवेंट लिसनर रजिस्टर करने चाहिए. साथ ही, उन इवेंट के मिलने पर कोड को लागू करना चाहिए. इवेंट-ड्रिवन वाला यह तरीका, 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.');
});

इवेंट लिसनर हटाना

परफ़ॉर्मेंस की वजहों से, जब किसी इवेंट लिसनर की ज़रूरत न हो, तो उसे हटा देना सबसे बेहतर होता है. इवेंट लिसनर को हटाने का तरीका, v2 और v3 में एक जैसा है:

1. इवेंट लिसनर बनाने पर, एक अपारदर्शी ऑब्जेक्ट (v2 में GEventListener और v3 में MapsEventListener) दिखता है.
2. इवेंट लिसनर को हटाने के लिए, इस ऑब्जेक्ट को removeListener() मेथड (v2 में GEvent.removeListener() या v3 में google.maps.event.removeListener()) में पास करें.

डीओएम इवेंट को सुनना

अगर आपको DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) इवेंट को कैप्चर करना है और उनका जवाब देना है, तो v3 में google.maps.event.addDomListener() स्टैटिक तरीका उपलब्ध है. यह तरीका, v2 में मौजूद GEvent.addDomListener() तरीके के बराबर है.

इवेंट में पास किए गए आर्ग्युमेंट का इस्तेमाल करना

यूज़र इंटरफ़ेस (यूआई) इवेंट अक्सर एक इवेंट आर्ग्युमेंट पास करते हैं. इसके बाद, इवेंट लिसनर इसे ऐक्सेस कर सकता है. v3 में ज़्यादातर इवेंट आर्ग्युमेंट को आसान बनाया गया है, ताकि एपीआई में ऑब्जेक्ट के साथ ज़्यादा बेहतर तरीके से काम किया जा सके. (ज़्यादा जानकारी के लिए, v3 रेफ़रंस देखें.)

v3 इवेंट लिसनर में कोई overlay आर्ग्युमेंट मौजूद नहीं है. अगर आपने v3 मैप पर click इवेंट रजिस्टर किया है, तो कॉलबैक सिर्फ़ तब होगा, जब उपयोगकर्ता बेस मैप पर क्लिक करेगा. अगर आपको क्लिक किए जा सकने वाले ओवरले पर क्लिक करने पर कोई कार्रवाई करनी है, तो आपके पास अतिरिक्त कॉलबैक रजिस्टर करने का विकल्प है.

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

कंट्रोल के टाइप में बदलाव

v3 API के साथ, control टाइप में कुछ बदलाव किए गए हैं.

1. v3 API, ज़मीन के मैप और कस्टम मैप टाइप जोड़ने की सुविधा के साथ-साथ, मैप के अन्य टाइप के साथ काम करता है.
2. वर्शन 2 का हैरारकी वाला कंट्रोल, GHierarchicalMapTypeControl अब उपलब्ध नहीं है. google.maps.MapTypeControlStyle.HORIZONTAL_BAR कंट्रोल का इस्तेमाल करके भी ऐसा ही इफ़ेक्ट पाया जा सकता है.
3. वर्शन 2 में GMapTypeControl से मिलने वाला हॉरिज़ॉन्टल लेआउट, वर्शन 3 में उपलब्ध नहीं है.

मैप में कंट्रोल जोड़ना

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

मैप पर पोज़िशनिंग कंट्रोल

v3 में, पोज़िशनिंग कंट्रोल काफ़ी बदल गए हैं. v2 में, addControl() का तरीका एक वैकल्पिक दूसरा पैरामीटर लेता है जिसकी मदद से, मैप के कोनों के हिसाब से कंट्रोल की पोज़िशन तय की जा सकती है.

v3 में, कंट्रोल के विकल्पों की position प्रॉपर्टी की मदद से, कंट्रोल की पोज़िशन सेट की जाती है. इन कंट्रोल की पोज़िशन तय नहीं होती. इसके बजाय, एपीआई इन कंट्रोल को मैप के मौजूदा एलिमेंट के आस-पास "फ़्लो" करके, उन्हें बेहतर तरीके से लेआउट करेगा. इसमें, मैप का साइज़ जैसी सीमाएं भी शामिल हैं. इससे यह पक्का होता है कि डिफ़ॉल्ट कंट्रोल, आपके कंट्रोल के साथ काम करते हैं. ज़्यादा जानकारी के लिए, 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() मेथड के लिए हैंडलर तय करने होंगे. v3 में GControl क्लास के बराबर कोई क्लास नहीं है. इसके बजाय, कंट्रोल को डीओएम एलिमेंट के तौर पर दिखाया जाता है. 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);

ओवरले जोड़ना और हटाना

ओवरले के ज़रिए दिखाए गए ऑब्जेक्ट के टाइप, वर्शन 2 और वर्शन 3 में एक जैसे होते हैं. हालांकि, इनका इस्तेमाल अलग-अलग तरीके से किया जाता है.

v2 API में ओवरले, मैप में जोड़े और हटाए गए थे. इसके लिए, GMap2 ऑब्जेक्ट के addOverlay() और removeOverlay() तरीकों का इस्तेमाल किया गया था. v3 में, ओवरले के लिए मैप असाइन करने के लिए, ओवरले के विकल्पों की क्लास की map प्रॉपर्टी का इस्तेमाल किया जाता है. ओवरले को सीधे तौर पर जोड़ा या हटाया भी जा सकता है. इसके लिए, ओवरले ऑब्जेक्ट के setMap() तरीके को कॉल करके, मनचाहा मैप तय करें. मैप प्रॉपर्टी को null पर सेट करने से, ओवरले हट जाता है.

v3 में clearOverlays() का कोई तरीका मौजूद नहीं है. अगर आपको ओवरले का सेट मैनेज करना है, तो आपको ओवरले को सेव करने के लिए एक कलेक्शन बनाना चाहिए. इस कलेक्शन का इस्तेमाल करके, कलेक्शन में मौजूद हर ओवरले पर 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 में कस्टम इमेज का इस्तेमाल करने के लिए, G_DEFAULT_ICON type से GIcon इंस्टेंस बनाया जा सकता है और उसमें बदलाव किया जा सकता है. अगर आपकी इमेज, डिफ़ॉल्ट आइकॉन से बड़ी या छोटी है, तो आपको GSize इंस्टेंस की मदद से इसकी जानकारी देनी होगी. v3 API इस प्रोसेस को थोड़ा आसान बनाता है. मार्कर की icon प्रॉपर्टी को अपनी कस्टम इमेज के यूआरएल पर सेट करें. इसके बाद, एपीआई अपने-आप आइकॉन का साइज़ तय कर देगा.

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

पॉलीलाइन

पॉलीलाइन में LatLngs की कैटगरी के साथ-साथ, लाइन सेगमेंट की एक सीरीज़ होती है. ये सेगमेंट, उन जगहों को क्रम से जोड़ते हैं. v3 में Polyline ऑब्जेक्ट बनाना और दिखाना, v2 में GPolyline ऑब्जेक्ट इस्तेमाल करने के जैसा ही है. यहां दिए गए सैंपल में, सिंगापुर से ज़्यूरिख होते हुए सिडनी तक, 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);

कोड में बदली गई पॉलीलाइन

v3 में, एन्कोड की गई पॉलीलाइन से सीधे Polyline ऑब्जेक्ट बनाने की सुविधा उपलब्ध नहीं है. इसके बजाय, ज्यामिति लाइब्रेरी पॉलीलाइन को कोड में बदलने और डिकोड करने के तरीके उपलब्ध कराती है. इस लाइब्रेरी को लोड करने के तरीके के बारे में ज़्यादा जानने के लिए, Maps v3 API में लाइब्रेरी देखें.

यहां दिए गए उदाहरणों में, एक ही एन्कोड की गई पॉलीलाइन दिखाई गई है. v3 कोड, google.maps.geometry.encoding नेमस्पेस के decodePath() तरीके का इस्तेमाल करता है.

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

पॉलीगॉन

पॉलीगॉन, बंद लूप के अंदर के इलाके को दिखाता है. Polyline ऑब्जेक्ट की तरह ही, Polygon ऑब्जेक्ट में भी व्यवस्थित क्रम में पॉइंट की सीरीज़ होती है. v3 Polygon क्लास, v2 के GPolygon क्लास से काफ़ी मिलती-जुलती है. हालांकि, इसमें एक अहम अंतर है. अब आपको लूप को बंद करने के लिए, पाथ के आखिर में शुरुआती वर्टिक्स को दोहराने की ज़रूरत नहीं है. v3 API, आखिरी निर्देशांक को पहले निर्देशांक से जोड़कर, किसी भी पॉलीगॉन को अपने-आप बंद कर देगा. नीचे दिए गए कोड स्निपेट, बरमूडा ट्रैंगल को दिखाने वाला पॉलीगॉन बनाते हैं:

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 की जानकारी वाली विंडो के बीच कुछ मुख्य अंतर हैं:

• v2 API, हर मैप पर सिर्फ़ एक GInfoWindow का इस्तेमाल करता है. वहीं, v3 API हर मैप पर एक साथ कई InfoWindow का इस्तेमाल करता है.
• मैप पर क्लिक करने पर, v3 InfoWindow खुला रहेगा. मैप पर क्लिक करने पर, v2 GInfoWindow अपने-आप बंद हो जाता है. Map ऑब्जेक्ट पर click लिसनर जोड़कर, v2 के व्यवहार को एमुलेट किया जा सकता है.
• v3 API, टैब वाले InfoWindow के लिए नेटिव सपोर्ट नहीं देता.

ग्राउंड ओवरले

किसी इमेज को मैप पर डालने के लिए, आपको GroundOverlay ऑब्जेक्ट का इस्तेमाल करना चाहिए. GroundOverlay के लिए कॉन्स्ट्रक्टर, v2 और v3 में एक जैसा ही है: यह किसी इमेज के यूआरएल और पैरामीटर के तौर पर इमेज की सीमाओं की जानकारी देता है.

यहां दिए गए उदाहरण में, मैप पर ओवरले के तौर पर न्यू जर्सी के न्यूयॉर्क का पुराना मैप दिखाया गया है:

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

मैप के सामान्य टाइप

मैप के चार बुनियादी टाइप, वर्शन 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 ने कम इस्तेमाल होने वाले मैप टाइप में भी कुछ बदलाव किए हैं:

• Earth के अलावा, खगोलीय पिंडों के लिए मैप टाइल, v3 API में मैप टाइप के तौर पर उपलब्ध नहीं हैं. हालांकि, इन्हें इस उदाहरण में दिखाए गए तरीके से, कस्टम मैप टाइप के तौर पर ऐक्सेस किया जा सकता है.
• v3 में कोई ऐसा खास मैप टाइप नहीं है जो v2 के G_SATELLITE_3D_MAP टाइप की जगह लेता हो. इसके बजाय, इस लाइब्रेरी का इस्तेमाल करके, Google Earth प्लग इन को अपने वर्शन 3 के मैप में इंटिग्रेट किया जा सकता है.

ज़्यादा से ज़्यादा ज़ूम की गई इमेज

सैटलाइट से ली गई तस्वीरें, ज़्यादा ज़ूम लेवल पर हमेशा उपलब्ध नहीं होतीं. अगर आपको ज़ूम लेवल सेट करने से पहले, सबसे ज़्यादा ज़ूम लेवल के बारे में जानना है, तो google.maps.MaxZoomService क्लास का इस्तेमाल करें. यह क्लास, v2 में मौजूद GMapType.getMaxZoomAtLatLng() तरीके की जगह ले लेती है.

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.");
    }
});

एरियल पर्सपेक्टिव इमेजरी

वर्शन 3 में एरियल इमेजरी की सुविधा चालू करने पर, कंट्रोल वैसे ही होते हैं जैसे वर्शन 2 में GLargeZoomControl3D कंट्रोल होते हैं. साथ ही, इसमें एक इंटरस्टीशियल Rotate कंट्रोल भी होता है, जिससे इमेज को इस्तेमाल की जा सकने वाली दिशाओं में घुमाया जा सकता है.

इस मैप पर, उन शहरों को ट्रैक किया जा सकता है जहां फ़िलहाल 45° वाली इमेज उपलब्ध है. जब 45° वाली इमेज उपलब्ध होती है, तो Maps API के सैटलाइट बटन में एक सबमेन्यू विकल्प जोड़ा जाता है.