Maps JavaScript API v2 अब 26 मई, 2021 से उपलब्ध नहीं है. इस वजह से, आपकी साइट का v2 मैप काम करना बंद कर देगा. साथ ही, यह JavaScript से जुड़ी गड़बड़ियां दिखाएगा. अपनी साइट पर मैप का इस्तेमाल जारी रखने के लिए, Maps JavaScript API v3 पर माइग्रेट करें. आपको इस प्रोसेस में मदद मिलेगी.
खास जानकारी
हर ऐप्लिकेशन की माइग्रेशन करने की प्रोसेस थोड़ी अलग होगी. हालांकि, सभी प्रोजेक्ट के लिए ऐसे कुछ तरीके हैं:
- नई कुंजी पाएं. Maps JavaScript API, अब
Google Cloud Console का इस्तेमाल करके, कुंजियों को मैनेज करता है. अगर अब भी v2 कुंजी का इस्तेमाल किया जा रहा है, तो माइग्रेशन शुरू करने से पहले नई एपीआई कुंजी पाना न भूलें.
- अपना API बूटस्ट्रैप अपडेट करें. ज़्यादातर ऐप्लिकेशन, नीचे दिए गए कोड के साथ Maps JavaScript API v3 को लोड करेंगे:
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
- अपना कोड अपडेट करें. ज़रूरी बदलाव आपके आवेदन पर निर्भर करेगा. इसके सामान्य बदलावों में ये शामिल हैं:
- google.maps नेमस्पेस का हमेशा रेफ़रंस दें. वर्शन 3 में,
ग्लोबल JavaScript के बजाय
google.maps.*
के नेमस्पेस में, Maps के सभी एपीआई कोड को सेव किया जाता है. इस प्रोसेस के तहत, ज़्यादातर ऑब्जेक्ट के नाम भी बदल गए हैं. उदाहरण के लिए, GMap2
के बजाय, अब
google.maps.Map
लोड किया जाएगा.
- पुराने तरीकों के सभी रेफ़रंस हटा दें. बिजली, पानी जैसी सुविधाओं के इस्तेमाल से जुड़े कई तरीकों को हटा दिया गया है. जैसे,
GDownloadURL
और GLog
.
इस सुविधा को तीसरे पक्ष की यूटिलिटी लाइब्रेरी से बदलें या अपने कोड से ये रेफ़रंस हटाएं.
- (ज़रूरी नहीं) अपने कोड में लाइब्रेरी जोड़ना. कई
सुविधाएं, यूटिलिटी लाइब्रेरी में शामिल नहीं की गई हैं. इसलिए,
हर ऐप्लिकेशन को एपीआई के सिर्फ़ उन हिस्सों को लोड करना होगा जिनका इस्तेमाल किया जाएगा.
- (ज़रूरी नहीं) v3 एक्सटेंशन का इस्तेमाल करने के लिए, अपने प्रोजेक्ट को कॉन्फ़िगर करना.
v3 एक्सटेंशन का इस्तेमाल क्लोज़र
कंपाइलर से आपके कोड की पुष्टि करने के लिए या आपके आईडीई में ऑटोकंप्लीट ट्रिगर करने के लिए किया जा सकता है.
बेहतर कंपाइलेशन और एक्सटेंशन के बारे में ज़्यादा जानें.
- जांचें और दोहराएं. यहां आपको अब भी कुछ काम करना होगा, लेकिन अच्छी खबर यह है कि आप अपने नए v3 मैप ऐप्लिकेशन में बहुत अच्छा काम कर सकते हैं!
Maps JavaScript API के वर्शन 3 में बदलाव
माइग्रेट करने से पहले, आपको यह समझना होगा कि
Maps JavaScript API v2 और
Maps JavaScript API के वर्शन 3 में क्या फ़र्क़ है. Maps JavaScript API का सबसे नया वर्शन अब तक शुरू किया गया है. इसमें आधुनिक JavaScript प्रोग्रामिंग तकनीकों, लाइब्रेरी के इस्तेमाल में बढ़ोतरी, और एपीआई को आसान बनाया गया है.
एपीआई में कई नई सुविधाएं जोड़ी गई हैं. साथ ही, Google की कई जानी-पहचानी सुविधाओं को बदल दिया गया है या उन्हें हटा भी दिया गया है. इस सेक्शन में, दोनों रिलीज़ के बीच के कुछ अहम अंतर हाइलाइट किए गए हैं.
वर्शन 3 एपीआई में कुछ बदलाव ये हैं:
- एक व्यवस्थित मुख्य लाइब्रेरी. कुछ पूरक फ़ंक्शन को
लाइब्रेरी में ले जाया गया है, जिससे
Core API के लोड होने और पार्स होने में लगने वाले समय को कम करने में मदद मिलती है.
इससे, आपका मैप किसी भी डिवाइस पर तेज़ी से लोड हो सकता है.
- पॉलीगॉन रेंडरिंग और मार्कर प्लेसमेंट जैसी कई सुविधाओं की बेहतर परफ़ॉर्मेंस.
- क्लाइंट-साइड
इस्तेमाल की सीमाओं के लिए एक नया तरीका. यह
शेयर किए गए पतों को बेहतर तरीके से समझने में मदद करता है, जिनका इस्तेमाल मोबाइल प्रॉक्सी और कॉर्पोरेट फ़ायरवॉल करते हैं.
- कई आधुनिक ब्राउज़र और मोबाइल ब्राउज़र के लिए सहायता जोड़ी गई. Internet Explorer 6 के लिए सहायता
हटा दी गई है.
- अलग-अलग कामों के लिए इस्तेमाल की जाने वाली हेल्पर क्लास (
GLog
या
GDownloadUrl
) को हटाया गया. आज, कई शानदार JavaScript लाइब्रेरी मौजूद हैं, जो मिलती-जुलती सुविधाएं उपलब्ध कराती हैं, जैसे कि Closure या
jQuery.
- HTML5 स्ट्रीट व्यू को लागू करना, जो किसी भी मोबाइल डिवाइस पर लोड होगा.
- अपनी पसंद के मुताबिक Street View की तस्वीरों की मदद से, आप स्की ढलानों, बिक्री के लिए बने घरों या दूसरी दिलचस्प जगहों के नज़ारे शेयर कर सकते हैं.
- स्टाइल वाले मैप को पसंद के मुताबिक बनाने की सुविधा की मदद से, आप बेस मैप पर एलिमेंट का डिसप्ले बदल सकते हैं, ताकि वे आपकी खास विज़ुअल स्टाइल से मेल खाएं.
- कई नई सेवाओं के लिए सहायता उपलब्ध है, जैसे कि ElevationService और दूरी मैट्रिक्स.
- बेहतर निर्देशों वाली सेवाएं, वैकल्पिक रास्ते, रूट ऑप्टिमाइज़ेशन (यात्रा करने वाले सेलर की समस्या के हल के समाधान), साइकल चलाने के लिए निर्देश (साइकल की लेयर), सार्वजनिक परिवहन के निर्देश, और
ड्रैग करने लायक निर्देश की सुविधा देती हैं.
- एक अपडेट किया गया जियोकोडिंग फ़ॉर्मैट, जो Geocoding API v2 के
accuracy
वैल्यू की तुलना में
ज़्यादा टाइप की जानकारी देता है.
- एक मैप पर कई
जानकारी
Windows के लिए सहायता
अपना ऐप्लिकेशन अपग्रेड करना
आपकी नई चाबी
Maps JavaScript API v3, नए वर्शन v2 का इस्तेमाल करता है. ऐसा हो सकता है कि आपने पहले से ही अपने ऐप्लिकेशन में v3 कुंजी का इस्तेमाल किया हो. ऐसे में, किसी बदलाव की ज़रूरत नहीं होती. इसकी पुष्टि करने के लिए, जांच लें कि आपने किस यूआरएल से key
पैरामीटर के लिए Maps JavaScript API को लोड किया है. अगर कुंजी की वैल्यू 'ABQIAA' से शुरू होती है, तो आप इसका इस्तेमाल कर रहे हैं. अगर आपके पास v2 कुंजी है, तो माइग्रेशन के दौरान v3 कुंजी पर अपग्रेड करें. इससे:
Maps JavaScript API v3 को लोड करते समय कुंजी पास होती है.
एपीआई कुंजियां जनरेट करने के बारे में ज़्यादा जानें.
ध्यान दें कि अगर आप काम से जुड़े Google ग्राहक हैं, तो key
पैरामीटर के बजाय, client
पैरामीटर वाले क्लाइंट आईडी का इस्तेमाल किया जा सकता है. Client-ID अब भी Maps JavaScript API v3 में काम करता है. इसे कुंजी को अपग्रेड करने की प्रोसेस से गुज़रना नहीं पड़ता.
एपीआई लोड हो रहा है
आपको कोड में पहले बदलाव के तौर पर, एपीआई लोड करने का तरीका शामिल करना होगा. वर्शन 2 में, आप
http://maps.google.com/maps
के अनुरोध के ज़रिए, Maps JavaScript API को लोड करते हैं. अगर आप Maps JavaScript API v3 को लोड कर रहे हैं, तो आपको ये बदलाव करने होंगे:
//maps.googleapis.com/maps/api/js
से एपीआई लोड करें
file
पैरामीटर हटाएं.
- अपनी नई v3 कुंजी
के साथ
key
पैरामीटर को अपडेट करें. Google Maps API for Work के ग्राहकों को
client
पैरामीटर का इस्तेमाल करना चाहिए.
- (सिर्फ़ Google Maps Platform के प्रीमियम प्लान) पक्का करें कि Google Maps Platform के प्रीमियम प्लान के डेवलपर की जानकारी के मुताबिक
client
पैरामीटर की जानकारी दी गई हो.
- रिलीज़ के नए वर्शन का अनुरोध करने के लिए,
v
पैरामीटर को हटाएं. इसके अलावा, v3 वर्शन की स्कीम के मुताबिक, इसकी वैल्यू में बदलाव करें.
- (ज़रूरी नहीं)
hl
पैरामीटर को language
से बदलें और उसकी वैल्यू को बनाए रखें.
- (ज़रूरी नहीं) ज़रूरी लाइब्रेरी को लोड करने के लिए,
libraries
पैरामीटर जोड़ें.
सबसे आसान मामले में, v3 बूटस्ट्रैप सिर्फ़ आपके एपीआई कुंजी पैरामीटर की जानकारी देगा:
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
नीचे दिया गया उदाहरण, जर्मन भाषा में Maps JavaScript API v2 के नए वर्शन का अनुरोध करता है:
<script src="//maps.google.com/maps?file=api&v=2.x&key=YOUR_API_KEY&hl=de"></script>
नीचे दिया गया उदाहरण v3 के बराबर है.
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=de"></script>
पेश है google.maps नेमस्पेस
मैप JavaScript API v3 में शायद सबसे ज़्यादा ध्यान देने लायक बदलाव, google.maps
नेमस्पेस की शुरुआत है. v2 एपीआई, डिफ़ॉल्ट रूप से
ग्लोबल नेमस्पेस में सभी ऑब्जेक्ट रखता है, जिसकी वजह से
नाम बनाने में गड़बड़ी हो सकती है. v3 में, सभी ऑब्जेक्ट
google.maps
नेमस्पेस में मौजूद होते हैं.
अपने ऐप्लिकेशन को v3 पर माइग्रेट करते समय, आपको नए नेमस्पेस के इस्तेमाल के लिए, अपने कोड में बदलाव करना होगा. माफ़ करें, "G" को खोजना और इसकी जगह "google.maps." को पूरी तरह से काम करना होगा; लेकिन अपने कोड की समीक्षा करते समय, इसे लागू करना सही है. वर्शन 2 और v3 में
इससे मिलती-जुलती क्लास के कुछ उदाहरण नीचे दिए गए हैं.
v2 |
वर्शन 3 |
GMap2 |
google.maps.Map |
GLatLng |
google.maps.LatLng |
GInfoWindow |
google.maps.InfoWindow |
GMapOptions |
google.map.MapOptions |
G_API_VERSION |
google.maps.version |
GPolyStyleOptions |
google.maps.PolygonOptions or
google.maps.PolylineOptions |
पुराना कोड हटाना
Maps JavaScript API v3 में, वर्शन 2 के ज़्यादातर फ़ंक्शन की
समानताएं मौजूद हैं. हालांकि, कुछ ऐसी कक्षाएं हैं जो अब काम नहीं करतीं. माइग्रेशन के दौरान, आपको इन क्लास को तीसरे पक्ष की यूटिलिटी लाइब्रेरी से बदलना होगा या अपने कोड से इन रेफ़रंस को हटाना होगा. कई बेहतरीन JavaScript लाइब्रेरी मौजूद होती हैं, जो
क्लोज़र या jQuery जैसी मिलती-जुलती सुविधाएं देती हैं.
Maps JavaScript API v3 में नीचे दी गई कोई क्लास नहीं हैं:
GBounds | GLanguage |
GBrowserIsCompatible | GLayer |
GControl | GLog |
GControlAnchor | GMercatorProjection |
GControlImpl | GNavLabelControl |
GControlPosition | GObliqueMercator |
GCopyright | GOverlay |
GCopyrightCollection | GPhotoSpec |
GDownloadUrl | GPolyEditingOptions |
GDraggableObject | GScreenOverlay |
GDraggableObjectOptions | GStreetviewFeatures |
GFactualGeocodeCache | GStreetviewLocation |
GGeoAddressAccuracy | GStreetviewOverlay |
GGeocodeCache | GStreetviewUserPhotosOptions |
GGoogleBar | GTileLayerOptions |
GGoogleBarAdsOptions | GTileLayerOverlayOptions |
GGoogleBarLinkTarget | GTrafficOverlayOptions |
GGoogleBarListingTypes | GUnload |
GGoogleBarOptions | GXml |
GGoogleBarResultList | GXmlHttp |
GInfoWindowTab | GXslt |
GKeyboardHandler |
|
तुलना करने वाला कोड
आसान और दो दो ऐप्लिकेशन की तुलना, v2 और v3 एपीआई से लिखे गए आसान और दो ऐप्लिकेशन से करें.
<!DOCTYPE html>
<html>
<head>
<script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById('map'));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419)));
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
जैसा कि आप देख सकते हैं, दोनों ऐप्लिकेशन के बीच कई अंतर हैं. ध्यान देने लायक बदलावों में ये शामिल हैं:
- जिस पते से एपीआई लोड किया गया है उसे बदल दिया गया है.
- वर्शन 3 में अब
GBrowserIsCompatible()
और GUnload()
तरीकों की ज़रूरत नहीं है. इन्हें एपीआई से हटा दिया गया है.
- एपीआई में सेंट्रल ऑब्जेक्ट के तौर पर
GMap2
ऑब्जेक्ट को,
google.maps.Map
से बदल दिया जाता है.
- प्रॉपर्टी अब विकल्प क्लास के ज़रिए लोड की जाती हैं. ऊपर दिए गए उदाहरण में, हम मैप किए गए
MapOptions
ऑब्जेक्ट के ज़रिए तीन प्रॉपर्टी सेट करते हैं. इन प्रॉपर्टी का मैप लोड करने के लिए, center
, zoom
, और mapTypeId
का इस्तेमाल किया जाता है.
- वर्शन 3 में डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) डिफ़ॉल्ट रूप से चालू रहता है.
MapOptions
ऑब्जेक्ट में disableDefaultUI
प्रॉपर्टी को
'सही' पर सेट करके,
इसे बंद किया जा सकता है.
खास जानकारी
इस समय आपको, Maps JavaScript API के v2 से वर्शन v3 तक के माइग्रेशन में शामिल कुछ खास बातों की जानकारी मिलेगी.
आपके पास ज़्यादा जानकारी हो सकती है, लेकिन यह आपके आवेदन पर निर्भर करेगा. नीचे दिए गए सेक्शन में, हमने कुछ खास मामलों के लिए, माइग्रेट करने से जुड़े निर्देश शामिल किए हैं. इसके अलावा, कई ऐसे संसाधन हैं जो अपग्रेड की प्रोसेस के दौरान आपके लिए मददगार साबित हो सकते हैं.
अगर इस लेख के बारे में आपको कोई समस्या या सवाल है, तो कृपया इस पेज के सबसे ऊपर
सुझाव भेजें लिंक का इस्तेमाल करें.
इस सेक्शन में, Maps JavaScript API के v2 और v3, दोनों वर्शन की सबसे लोकप्रिय सुविधाओं की तुलना की गई है. पहचान फ़ाइल का हर सेक्शन अलग-अलग पढ़ा जाता है. हमारा सुझाव है कि आप इस संदर्भ को पूरा न पढ़ें. इसके बजाय, अलग-अलग मामले के हिसाब से इस माइग्रेशन का इस्तेमाल करें.
- इवेंट - इवेंट को रजिस्टर और मैनेज करना.
- कंट्रोल - मैप पर दिखने वाले नेविगेशन कंट्रोल में हेर-फेर करना.
- ओवरले - मैप पर ऑब्जेक्ट जोड़ना और उनमें बदलाव करना.
- मैप के टाइप - ऐसी टाइल जिनका आधार मैप होता है.
- लेयर - कॉन्टेंट को ग्रुप के तौर पर जोड़ना और उसमें बदलाव करना, जैसे कि KML या ट्रैफ़िक लेयर.
- सेवाएं - Google's जियोकोडिंग, दिशा-निर्देश या 'स्ट्रीट व्यू' सेवाओं के साथ काम करना.
इवेंट
Maps JavaScript API v3 के लिए इवेंट मॉडल, वर्शन 2 में इस्तेमाल किया गया मॉडल जैसा ही है. हालांकि, हुड में इसमें काफ़ी बदलाव हुआ है.
MVC सहायता के लिए नया इवेंट
वर्शन 3 पर एपीआई, MVC की स्थिति में हुए बदलावों को दिखाने के लिए एक नए तरह का इवेंट जोड़ता है. अब
दो तरह के इवेंट मौजूद हैं:
- उपयोगकर्ता इवेंट (जैसे "click" माउस इवेंट) DOM से Maps JavaScript API पर लागू किए जाते हैं. ये इवेंट,
स्टैंडर्ड DOM इवेंट से अलग और अलग हैं.
- MVC की स्थिति में बदलाव की सूचना, Maps API ऑब्जेक्ट में होने वाले बदलावों के बारे में बताती है.
साथ ही, इन्हें
property_changed
कन्वेंशन का इस्तेमाल करके नाम दिया जाता है.
हर Maps API ऑब्जेक्ट, नाम वाले कई इवेंट एक्सपोर्ट करता है. खास इवेंट में दिलचस्पी रखने वाले ऐप्लिकेशन को उन इवेंट के लिए इवेंट लिसनर रजिस्टर करना चाहिए. साथ ही, ऐसे इवेंट मिलने पर कोड को एक्ज़ीक्यूट करना चाहिए. यह इवेंट-ड्रिवन मैकेनिज़्म, मैप JavaScript API के वर्शन 2 और 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.');
});
इवेंट सुनने वालों को हटाना
परफ़ॉर्मेंस की वजहों से, यह ज़रूरी है कि किसी इवेंट लिसनर को न हटाएं. इवेंट लिसनर को हटाने से, वर्शन 2 और वर्शन 3 में भी ऐसा ही काम होगा:
- जब आप इवेंट लिसनर बनाते हैं, तो वर्शन 2 में, एक ओपैक ऑब्जेक्ट (GEventListener
, v3 में MapsEventListener
दिखाया जाता है.
- जब आप इवेंट लिसनर को हटाना चाहते हैं, तो इवेंट लिसनर को हटाने के लिए, इस ऑब्जेक्ट को
removeListener()
तरीके (GEvent.removeListener()
को वर्शन 2 में या google.maps.event.removeListener()
को v3 में) पर पास करें.
डीओएम इवेंट को सुना जा रहा है
अगर आपको DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) के इवेंट कैप्चर करके जवाब देना है, तो v3 आपको google.maps.event.addDomListener()
स्टैटिक तरीके की सुविधा देता है, जो वर्शन 2 में GEvent.addDomListener()
के जैसा होता है.
इवेंट में पास किए गए आर्ग्युमेंट का इस्तेमाल करना
यूज़र इंटरफ़ेस (यूआई) इवेंट अक्सर इवेंट आर्ग्युमेंट पास करते हैं, जिन्हें इवेंट लिसनर से
ऐक्सेस किया जा सकता है. एपीआई के वर्शन में मौजूद ज़्यादातर इवेंट आर्ग्युमेंट को आसान बनाया गया है,
ताकि वे एपीआई में मौजूद ऑब्जेक्ट पर ज़्यादा काम के हों. (ज़्यादा जानकारी के लिए,
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
});
});
कंट्रोल
Maps JavaScript API, यूज़र इंटरफ़ेस (यूआई) कंट्रोल दिखाता है. इनकी मदद से उपयोगकर्ता आपके मैप से इंटरैक्ट कर सकते हैं. एपीआई का इस्तेमाल करके, यह कंट्रोल किया जा सकता है कि
ये कंट्रोल किस तरह दिखें.
कंट्रोल टाइप में बदलाव
control
में कुछ बदलाव, v3 API पर लागू हुए हैं.
- वर्शन 3 के एपीआई में, अलग-अलग तरह के मैप टाइप जोड़े जा सकते हैं. जैसे, इलाके के हिसाब से बने मैप और पसंद के मुताबिक बनाए गए मैप के टाइप.
- क्रम के हिसाब से बनाया गया v2 वर्शन,
GHierarchicalMapTypeControl
अब उपलब्ध नहीं है.
google.maps.MapTypeControlStyle.HORIZONTAL_BAR
कंट्रोल का इस्तेमाल करके,
ऐसा ही कुछ किया जा सकता है.
- वर्शन 2 में,
GMapTypeControl
से मिला हॉरिज़ॉन्टल लेआउट, वर्शन 3 में उपलब्ध नहीं है.
मैप में कंट्रोल जोड़ना
Maps JavaScript API v2 के साथ, मैप की ऑब्जेक्ट की addControl()
मेथड से मैप में कंट्रोल जोड़े जा सकते हैं. वर्शन 3 में, कंट्रोल को सीधे ऐक्सेस करने या उनमें बदलाव करने के बजाय,
इससे जुड़े 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 में बहुत ज़्यादा बदलाव हुआ है. वर्शन 2 में,
addControl()
तरीके की मदद से एक वैकल्पिक दूसरा पैरामीटर
लिया जा सकता है. इससे, मैप के कोनों के हिसाब से कंट्रोल की जगह
तय की जा सकती है.
वर्शन 3 में, कंट्रोल विकल्पों की 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 एपीआई के साथ कंट्रोल को पसंद के मुताबिक बनाने के लिए,
GControl
क्लास को सब-क्लास किया जा सकता है. साथ ही,
initialize()
और getDefaultPosition()
मैथड के लिए हैंडलर तय किए जा सकते हैं.
v3 में GControl
क्लास के बराबर नहीं है. इसके बजाय, कंट्रोल को डीओएम एलिमेंट के तौर पर दिखाया जाता है. v3 API के साथ कस्टम कंट्रोल जोड़ने के लिए, Node
(उदाहरण के लिए, <div>
एलिमेंट) के चाइल्ड के तौर पर कंस्ट्रक्टर में कंट्रोल के लिए डीओएम स्ट्रक्चर बनाएं और किसी भी DOM इवेंट को मैनेज करने के लिए इवेंट लिसनर जोड़ें. अपने मैप पर कस्टम कंट्रोल का इंस्टेंस जोड़ने के लिए, Node
को मैप और #39; 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 के बीच एक जैसे होते हैं. हालांकि, उन्हें अलग-अलग
तरीके से हैंडल किया जाता है.
वर्शन 2 में, GMap2
ऑब्जेक्ट के addOverlay()
और removeOverlay()
तरीके का इस्तेमाल करके, ओवरले जोड़े गए और उन्हें मैप से हटाया गया. वर्शन 3 में, आप जोड़े गए ओवरले विकल्प क्लास की map
प्रॉपर्टी के ज़रिए ओवरले को मैप असाइन करते हैं.
आप ओवरले ऑब्जेक्ट की setMap()
तरीके से कॉल करके और मनचाहे मैप को तय करके, सीधे ओवरले जोड़ या हटा
सकते हैं. मैप प्रॉपर्टी को null
पर सेट करने से ओवरले हट जाता है.
वर्शन 3 में कोई 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
});
आइकन
डिफ़ॉल्ट मार्कर की जगह दिखाने के लिए कस्टम आइकॉन को तय किया जा सकता है.
वर्शन 2 में कस्टम इमेज का इस्तेमाल करने के लिए, आप G_DEFAULT_ICON type
से GIcon
इंस्टेंस बना सकते हैं और उसमें बदलाव कर सकते हैं. अगर
आपकी इमेज डिफ़ॉल्ट आइकॉन से बड़ी या छोटी है, तो
आपको उसे GSize
इंस्टेंस के साथ बताना होगा.
v3 एपीआई इस प्रोसेस को थोड़ा आसान बनाता है.
बस मार्कर's की icon
प्रॉपर्टी को अपनी कस्टम इमेज के यूआरएल पर सेट करें और एपीआई अपने-आप आइकॉन का साइज़ बदल देगा.
Maps JavaScript API, कॉम्प्लेक्स आइकॉन के लिए सहायता भी देता है.
कॉम्प्लेक्स कॉम्प्लेक्स में एक से ज़्यादा टाइल, कॉम्प्लेक्स शेप,
या कोट के क्रम और कोट के बारे में जानकारी मिल सकती है. जैसे, इमेज को दूसरे ओवरले के मुकाबले दिखाया जाना चाहिए. वर्शन 2 में मार्कर में आकार जोड़ने के लिए, आपको हर GIcon
इंस्टेंस में अतिरिक्त प्रॉपर्टी की जानकारी देनी होगी और इसे GMarker
कंस्ट्रक्टर के लिए विकल्प के तौर पर देना होगा. वर्शन 3 में, इस तरह से बताए गए आइकॉन की मदद से,
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
की श्रेणी होती है. साथ ही, लाइन सेगमेंट की सीरीज़ होती है, जो उन जगहों को एक क्रम में जोड़ती है.
वर्शन 3 में Polyline
ऑब्जेक्ट बनाना और उसे दिखाना,
v2 में GPolyline
ऑब्जेक्ट का इस्तेमाल करने जैसा ही है. यहां दिए गए नमूनों में से पारदर्शी, 3 पिक्सल चौड़ी और 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
ऑब्जेक्ट बनाने की सुविधा उपलब्ध नहीं है. इसके बजाय, भौगोलिक लाइब्रेरी
पॉलीलाइन को कोड में बदलने और डिकोड करने के तरीके उपलब्ध कराती है. इस लाइब्रेरी को लोड करने के तरीके के बारे में ज़्यादा जानकारी के लिए, v3 Maps 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 एपीआई किसी भी पॉलीगॉन को अपने-आप बंद कर देगा. ऐसा करने के लिए, आखिरी कोऑर्डिनेट को फिर से पहले निर्देशांक पर जोड़ा जाएगा. नीचे दिए गए कोड स्निपेट, बरमूडा त्रिकोण को दिखाने वाला पॉलीगॉन बनाते हैं:
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 और v3 की जानकारी वाली विंडो में कुछ मुख्य अंतर हैं:
- v2 एपीआई में हर मैप पर सिर्फ़
GInfoWindow
काम करता है, जबकि
v3 एपीआई, हर मैप पर एक साथ कई
InfoWindow
का इस्तेमाल करता है.
- मैप पर क्लिक करने पर, वर्शन 3
InfoWindow
खुला रहेगा. मैप पर क्लिक करने पर, वर्शन 2 GInfoWindow
अपने-आप बंद हो जाता है. Map
ऑब्जेक्ट पर click
लिसनर जोड़कर,
V2 व्यवहार को एम्युलेट किया जा सकता है.
- v3 एपीआई, टैब किए गए
InfoWindow
के लिए, नेटिव सहायता नहीं देता.
ग्राउंड ओवरले
मैप पर इमेज रखने के लिए, आपको GroundOverlay
ऑब्जेक्ट का इस्तेमाल करना चाहिए. GroundOverlay
का कंस्ट्रक्टर, वर्शन 2 और v3 में एक जैसा ही है: यह इमेज के यूआरएल और पैरामीटर की तरह इमेज की सीमाएं बताता है.
नीचे दिए गए उदाहरण में, मैप पर नेवार्क, NJ का एक पुराना मैप, ओवरले के तौर पर दिखाया गया है:
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 में उपलब्ध मैप के टाइप थोड़े अलग हैं, लेकिन एपीआई के दोनों वर्शन में सभी बेसिक मैप टाइप उपलब्ध हैं. डिफ़ॉल्ट रूप से, v2
स्टैंडर्ड और कोट;रोट वाले कोट का इस्तेमाल करता है. हालांकि, google.maps.Map
ऑब्जेक्ट बनाते समय v3 को एक खास मैप टाइप देना होता है.
कॉमन मैप टाइप
चार वर्शन वर्शन, वर्शन 2 और v3, दोनों में उपलब्ध हैं:
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 में मैप के टाइप के तौर पर उपलब्ध नहीं हैं. हालांकि, इन्हें कस्टम उदाहरण के तौर पर ऐक्सेस किया जा सकता है. जैसा, इस उदाहरण में दिखाया गया है.
- वर्शन 3 में ऐसा कोई खास मैप टाइप नहीं है जो
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.");
}
});
ऐरियल पर्सपेक्टिव तस्वीरों का संग्रह
वर्शन 3 में एरियल इमेजिंग की सुविधा चालू करने पर, कंट्रोल v2 GLargeZoomControl3D
कंट्रोल की तरह होते हैं. इसमें पेज पर अचानक दिखने वाले एक और एलिमेंट
के साथ रोटेट कंट्रोल होता है.
आप इस मैप में उन शहरों को ट्रैक कर सकते हैं जहां फ़िलहाल 45° इमेज उपलब्ध हैं. जब 45° की तस्वीरें उपलब्ध होती हैं, तो Maps API सैटलाइट बटन में
एक सबमेन्यू विकल्प जुड़ जाता है.
लेयर
लेयर, मैप पर मौजूद वे ऑब्जेक्ट होते हैं जिनमें एक या एक से ज़्यादा
ओवरले होते हैं. इन्हें एक यूनिट की तरह इस्तेमाल किया जा सकता है. आम तौर पर, ये ऑब्जेक्ट का कलेक्शन दिखाते हैं.
काम करने वाली लेयर
v3 एपीआई कई अलग-अलग लेयर का ऐक्सेस देता है. ये परतें
इन क्षेत्रों में v2 GLayer
क्लास के साथ ओवरलैप करती हैं:
-
KmlLayer
ऑब्जेक्ट, KML और GeoRSS एलिमेंट को v3 ओवरले में रेंडर करता है, जो v2 GeoXml
लेयर के बराबर है.
TrafficLayer
ऑब्जेक्ट, ट्रैफ़िक की स्थितियों को दिखाने वाली लेयर को रेंडर करता है, जो v2 GTrafficOverlay
ओवरले की तरह है.
ये लेयर, वर्शन 2 से अलग हैं. अंतर के बारे में यहां
बताया गया है. मैप पर जोड़े जाने के लिए, उन्हें setMap()
पर कॉल करें. साथ ही, उस Map
ऑब्जेक्ट को पास करें जिस पर लेयर को दिखाना है.
इस्तेमाल की जा सकने वाली लेयर के बारे में ज़्यादा जानकारी, लेयर दस्तावेज़ में उपलब्ध है.
KML और GeoRSS लेयर
Maps JavaScript API, भौगोलिक जानकारी दिखाने के लिए KML और GeoRSS डेटा फ़ॉर्मैट के साथ काम करता है. अगर आप मैप में KML या GeoRSS फ़ाइलें शामिल करना चाहते हैं, तो वे सार्वजनिक तौर पर उपलब्ध होनी चाहिए. वर्शन 3 में, डेटा के इन फ़ॉर्मैट को KmlLayer
के इंस्टेंस का इस्तेमाल करके दिखाया जाता है. यह वर्शन, GGeoXml
ऑब्जेक्ट को v2 से बदल देता है.
KML को रेंडर करते समय v3 एपीआई ज़्यादा सुविधाजनक होता है. इससे, आप InfoWindows को छिपा सकते हैं और क्लिक रिस्पॉन्स में बदलाव कर सकते हैं. ज़्यादा जानकारी के लिए v3 KML और GeoRSS लेयर दस्तावेज़ देखें.
KmlLayer
को रेंडर करते समय,
साइज़ और जटिलताएं लागू होती हैं; जानकारी के लिए,
KmlLayer दस्तावेज़
देखें.
नीचे दिए गए नमूने KML फ़ाइल लोड करने के तरीके की तुलना करते हैं.
geoXml = new GGeoXml(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml');
map.addOverlay(geoXml);
var layer = new google.maps.KmlLayer(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml', {
preserveViewport: true
});
layer.setMap(map);
ट्रैफ़िक लेयर
वर्शन 3 की मदद से, आप TrafficLayer
ऑब्जेक्ट का इस्तेमाल करके, मैप में रीयल-टाइम ट्रैफ़िक की जानकारी (जहां लागू हो) जोड़ सकते हैं. ट्रैफ़िक की जानकारी, अनुरोध मिलने के समय के हिसाब से दी जाती है. इन उदाहरणों में, मुंबई के लिए
ट्रैफ़िक की जानकारी दी गई है:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(34.0492459, -118.241043), 13);
map.setUIToDefault();
var trafficOptions = {incidents:false};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(34.0492459, -118.241043),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
v2 के उलट, v3 में TrafficLayer
कंस्ट्रक्टर के लिए कोई विकल्प मौजूद नहीं है. v3 में घटनाएं उपलब्ध नहीं हैं.
सेवाएं
जियोकोडिंग
Maps JavaScript API, geocoder
इनपुट की मदद से,
उपयोगकर्ता के इनपुट से डाइनैमिक तौर पर पते बदलता है. अगर आपको
भौगोलिक स्थिति वाले स्टैटिक पतों की जानकारी चाहिए, तो
जियोकोडिंग एपीआई
से जुड़े दस्तावेज़ देखें.
जियोकोडिंग एपीआई को
बेहतर तरीके से अपग्रेड और बेहतर बनाया गया है. इसमें नई सुविधाएं जोड़ी गई हैं और
डेटा के दिखने का तरीका बदला गया है.
वर्शन 2 एपीआई में, GClientGeocoder
ने फ़ॉरवर्ड और रिवर्स कोडिंग के लिए दो अलग-अलग तरीके दिए. साथ ही, जियोकोडिंग के काम करने के तरीके पर असर डालने के अन्य तरीके भी दिए. वहीं दूसरी तरफ़, v3
Geocoder
ऑब्जेक्ट सिर्फ़ geocode()
मैथड देता है. इसमें, ऑब्जेक्ट को इनपुट शब्दों वाले लिटरल में
शामिल किया जाता है. जैसे, जियोकोडिंग अनुरोध ऑब्जेक्ट के तौर पर और कॉलबैक मैथड के तौर पर. इस आधार पर कि
अनुरोध में टेक्स्ट के तौर पर address
एट्रिब्यूट या LatLng
ऑब्जेक्ट मौजूद है या नहीं, जियोकोडिंग एपीआई फ़ॉरवर्ड करने या रिवर्स भौगोलिक कोडिंग करने की सुविधा दिखाता है. जियोकोडिंग के अनुरोध के साथ अन्य फ़ील्ड पास करके,
यह तय किया जा सकता है कि जियोकोडिंग कैसे की जाए:
- टेक्स्ट के तौर पर,
address
फ़ॉरवर्ड करने की जियोकोडिंग ट्रिगर करता है. यह getLatLng()
तरीके को कॉल करने जैसा ही है.
latLng
ऑब्जेक्ट को शामिल करने से, रिवर्स जियोकोडिंग ट्रिगर हो जाती है. यह getLocations()
तरीके को कॉल करने जैसा ही है.
bounds
एट्रिब्यूट शामिल करने से, Viewport
Biasing, setViewport()
मैथड के बराबर हो जाती है.
region
एट्रिब्यूट को शामिल करने से, क्षेत्र कोड का भेदभाव चालू हो जाता है. यह, setBaseCountryCode()
तरीके को कॉल करने के जैसा ही है.
वर्शन 3 में जियोकोडिंग के रिस्पॉन्स, v2 रिस्पॉन्स से बहुत अलग हैं. v3 API, नेस्ट किए गए स्ट्रक्चर की जगह ले लेता है, जिसका इस्तेमाल v2 ऐसे फ़्लैट स्ट्रक्चर के साथ करता है जिसे पार्स करना आसान है. इसके अलावा, v3 रिस्पॉन्स में ज़्यादा जानकारी दी गई है: हर नतीजे में कई पते वाले कॉम्पोनेंट होते हैं, जो हर नतीजे के समाधान की बेहतर जानकारी देते हैं.
यह कोड एक टेक्स्ट पता लेता है और जगह की जानकारी को कोड में बदलने से पहला नतीजा दिखाता है:
var geocoder = new GClientGeocoder();
var infoPanel;
var map;
var AccuracyDescription = [
'Unknown accuracy', 'country level accuracy',
'region level accuracy', 'sub-region level accuracy',
'town level accuracy', 'post code level accuracy',
'street level accuracy', 'intersection level accuracy',
'address level accuracy', 'premise level accuracy',
];
function geocode_result_handler(response) {
if (!response || response.Status.code != 200) {
alert('Geocoding failed. ' + response.Status.code);
} else {
var bounds = new GLatLngBounds(new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.south,
response.Placemark[0].ExtendedData.LatLonBox.west
), new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.north,
response.Placemark[0].ExtendedData.LatLonBox.east
));
map.setCenter(bounds.getCenter(),
map.getBoundsZoomLevel(bounds));
var latlng = new GLatLng(
response.Placemark[0].Point.coordinates[1],
response.Placemark[0].Point.coordinates[0]);
infoPanel.innerHTML += '<p>1st result is <em>' +
// No info about location type
response.Placemark[0].address +
'</em> of <em>' +
AccuracyDescription[response.Placemark[0].
AddressDetails.Accuracy] +
'</em> at <tt>' + latlng + '</tt></p>';
var marker_title = response.Placemark[0].address +
' at ' + latlng;
map.clearOverlays();
var marker = marker = new GMarker(
latlng,
{'title': marker_title}
);
map.addOverlay(marker);
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.getLocations(address, geocode_result_handler);
}
function initialize() {
map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(38, 15), 2);
map.setUIToDefault();
infoPanel = document.getElementById('info-panel');
}
var geocoder = new google.maps.Geocoder();
var infoPanel;
var map;
var marker;
function geocode_result_handler(result, status) {
if (status != google.maps.GeocoderStatus.OK) {
alert('Geocoding failed. ' + status);
} else {
map.fitBounds(result[0].geometry.viewport);
infoPanel.innerHTML += '<p>1st result for geocoding is <em>' +
result[0].geometry.location_type.toLowerCase() +
'</em> to <em>' +
result[0].formatted_address + '</em> of types <em>' +
result[0].types.join('</em>, <em>').replace(/_/, ' ') +
'</em> at <tt>' + result[0].geometry.location +
'</tt></p>';
var marker_title = result[0].formatted_address +
' at ' + latlng;
if (marker) {
marker.setPosition(result[0].geometry.location);
marker.setTitle(marker_title);
} else {
marker = new google.maps.Marker({
position: result[0].geometry.location,
title: marker_title,
map: map
});
}
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.geocode({'address': address}, geocode_result_handler);
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(38, 15),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
});
infoPanel = document.getElementById('info-panel');
}
निर्देश
Maps JavaScript API v3, GDirections
क्लास को v2 से बदल देता है, ताकि
निर्देश को कैलकुलेट करने के लिए DirectionsService
क्लास का इस्तेमाल किया जा सके.
वर्शन 3 में मौजूद route()
तरीके से,
load()
और loadFromWaypoints()
दोनों तरीकों को
v2 एपीआई से बदला जाता है. इस तरीके में एक सिंगल DirectionsRequest
ऑब्जेक्ट लिटरल होता है, जिसमें इनपुट के शब्द और
कॉलबैक वाला मैथड होता है.
यह रिस्पॉन्स मिलने पर लागू होता है. इस ऑब्जेक्ट के लिटरल में GDirectionsOptions
विकल्प होने पर, विकल्प दिए जा सकते हैं.
Maps JavaScript API v3 में, निर्देश सबमिट करने के टास्क को, रेंडर करने के अनुरोधों के टास्क से अलग कर दिया गया है. अब इस टास्क को DirectionsRenderer
क्लास से हैंडल किया जाता है. आप setMap()
के साथ-साथ
setDirections()
तरीके का इस्तेमाल करके, DirectionsRenderer
ऑब्जेक्ट को किसी भी मैप या
DirectionsResult
ऑब्जेक्ट से जोड़ सकते हैं. रेंडरर MVCObject
के तौर पर काम करता है, इसलिए यह अपनी प्रॉपर्टी में किसी भी बदलाव का पता लगा सकता है. साथ ही, इससे जुड़े दिशा-निर्देशों में बदलाव होने पर मैप को अपडेट कर सकता है.
नीचे दिए गए कोड में बताया गया है कि किसी पते से पैदल चलने के रास्तों का इस्तेमाल करके किसी खास जगह पर पैदल चलने के निर्देश कैसे मांगे जा सकते हैं. ध्यान दें कि सिर्फ़ v3 ही, डबलिन और #39s के चिड़ियाघर में पैदल चलने के रास्ते की जानकारी दे सकता है.
var map;
var directions;
var directionsPanel;
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsPanel = document.getElementById("route");
map = new GMap2(document.getElementById('map'));
map.setCenter(origin, 10);
map.setUIToDefault();
directions = new GDirections(map, directionsPanel);
directions.loadFromWaypoints(
[origin, destination], {
travelMode: 'G_TRAVEL_MODE_WALKING',
});
}
var map;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsRenderer = new google.maps.DirectionsRenderer();
map = new google.maps.Map(
document.getElementById('map'), {
center: origin,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsRenderer.setPanel(document.getElementById("route"));
directionsRenderer.setMap(map);
directionsService.route({
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.WALKING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});
}
स्ट्रीट व्यू
Google Street View, कुछ खास जगहों पर इंटरैक्टिव और 360° व्यू देता है. वर्शन 3 एपीआई, ब्राउज़र में 'स्ट्रीट व्यू' के साथ काम करता है, जबकि v2 में स्ट्रीट व्यू की तस्वीरें दिखाने के लिए Flash® प्लग इन की ज़रूरत होती है.
Street View की इमेज, वर्शन 3 में StreetViewPanorama
ऑब्जेक्ट या वर्शन 2 में GStreetviewPanorama
ऑब्जेक्ट के साथ काम करती हैं. इन क्लास में अलग-अलग इंटरफ़ेस होते हैं, लेकिन ये एक ही भूमिका निभाते हैं: div
कंटेनर को स्ट्रीट व्यू तस्वीरों के संग्रह से जोड़ना और आपको स्ट्रीट व्यू पैनोरामा की जगह और पीओवी (पॉइंट ऑफ़ व्यू) के बारे में जानकारी देना.
function initialize() {
var fenwayPark = new GLatLng(42.345573, -71.098326);
panoramaOptions = {
latlng: fenwayPark,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new GStreetviewPanorama(
document.getElementById('pano'),
panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoramaOptions = {
position: fenway,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'),
panoramaOptions);
}
Street View डेटा को सीधे तौर पर ऐक्सेस करने के लिए,
v3 में StreetViewService
ऑब्जेक्ट या वर्शन 2 में इसी तरह के GStreetviewClient
ऑब्जेक्ट का इस्तेमाल किया जा सकता है. दोनों ही इंटरफ़ेस, स्ट्रीट व्यू डेटा की उपलब्धता को देखने या उसकी उपलब्धता की जांच करने के लिए एक जैसे इंटरफ़ेस उपलब्ध कराते हैं. साथ ही, जगह या पैनोरामा आईडी से खोजने की सुविधा देते हैं.
वर्शन 3 में, स्ट्रीट व्यू डिफ़ॉल्ट रूप से चालू रहता है. यह मैप, Street View पेगमैन कंट्रोल के साथ दिखेगा. साथ ही, एपीआई, मैप डीवी का फिर से इस्तेमाल करेगा, ताकि Street View के पैनोरामा दिखाए जा सकें. नीचे दिए गए कोड में, स्ट्रीट व्यू पैनोरामा को एक अलग div में अलग करके, V2 व्यवहार को एम्युलेट करने का तरीका बताया गया है.
var marker;
var panoClient = new GStreetviewClient();
function initialize() {
if (GBrowserIsCompatible()) {
var myPano = new GStreetviewPanorama(
document.getElementById('pano'));
GEvent.addListener(myPano, 'error', handleNoFlash);
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(42.345573, -71.098326), 16);
map.setUIToDefault();
GEvent.addListener(map, 'click', function(overlay, latlng) {
if (marker) {
marker.setLatLng(latlng);
} else {
marker = new GMarker(latlng);
map.addOverlay(marker);
}
var nearestPano = panoClient.getNearestPanorama(
latlng, processSVData);
});
function processSVData(panoData) {
if (panoData.code != 200) {
alert("Panorama data not found for this location.");
}
var latlng = marker.getLatLng();
var dLat = latlng.latRadians()
- panoData.location.latlng.latRadians();
var dLon = latlng.lngRadians()
- panoData.location.latlng.lngRadians();
var y = Math.sin(dLon) * Math.cos(latlng.latRadians());
var x = Math.cos(panoData.location.latlng.latRadians()) *
Math.sin(latlng.latRadians()) -
Math.sin(panoData.location.latlng.latRadians()) *
Math.cos(latlng.latRadians()) * Math.cos(dLon);
var bearing = Math.atan2(y, x) * 180 / Math.PI;
myPano.setLocationAndPOV(panoData.location.latlng, {
yaw: bearing
});
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
}
}
// Load the API with libraries=geometry
var map;
var marker;
var panorama;
var sv = new google.maps.StreetViewService();
function radians(degrees) { return Math.PI * degrees / 180.0 };
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"));
map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(42.345573, -71.098326),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 16
});
google.maps.event.addListener(map, 'click', function(event) {
if (!marker) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
} else {
marker.setPosition(event.latLng);
}
sv.getPanoramaByLocation(event.latLng, 50, processSVData);
});
}
function processSVData(panoData, status) {
if (status == google.maps.StreetViewStatus.OK) {
alert("Panorama data not found for this location.");
}
var bearing = google.maps.geometry.spherical.computeHeading(
panoData.location.latLng, marker.getPosition());
panorama.setPano(panoData.location.pano);
panorama.setPov({
heading: bearing,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);
marker.setMap(panorama);
}