Maps JavaScript API v2 26 মে, 2021 থেকে আর উপলভ্য নেই। এর ফলে, আপনার সাইটের v2 ম্যাপ কাজ করা বন্ধ করে দেবে এবং JavaScript ত্রুটি দেখাবে। আপনার সাইটে মানচিত্র ব্যবহার চালিয়ে যেতে, Maps JavaScript API v3 এ স্থানান্তর করুন। এই নির্দেশিকা আপনাকে প্রক্রিয়াটির মাধ্যমে সাহায্য করবে।
ওভারভিউ
প্রতিটি অ্যাপ্লিকেশনের একটি সামান্য ভিন্ন মাইগ্রেশন প্রক্রিয়া থাকবে; যাইহোক, কিছু পদক্ষেপ রয়েছে যা সমস্ত প্রকল্পের জন্য সাধারণ:
- একটি নতুন চাবি পান। মানচিত্র জাভাস্ক্রিপ্ট API এখন কীগুলি পরিচালনা করতে Google ক্লাউড কনসোল ব্যবহার করে৷ আপনি যদি এখনও একটি v2 কী ব্যবহার করেন, তাহলে আপনার মাইগ্রেশন শুরু করার আগে আপনার নতুন API কী পেতে ভুলবেন না।
- আপনার API বুটস্ট্র্যাপ আপডেট করুন। বেশিরভাগ অ্যাপ্লিকেশন নিম্নলিখিত কোড সহ Maps JavaScript API v3 লোড করবে:
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
- আপনার কোড আপডেট করুন. প্রয়োজনীয় পরিবর্তনের পরিমাণ আপনার আবেদনের উপর অনেকটাই নির্ভর করবে। সাধারণ পরিবর্তন অন্তর্ভুক্ত:
- সর্বদা google.maps নামস্থান উল্লেখ করুন। v3 তে, সমস্ত মানচিত্র জাভাস্ক্রিপ্ট API কোড বিশ্বব্যাপী নামস্থানের পরিবর্তে
google.maps.* নামস্থানে সংরক্ষণ করা হয়। এই প্রক্রিয়ার অংশ হিসাবে বেশিরভাগ বস্তুর নাম পরিবর্তন করা হয়েছে। উদাহরণস্বরূপ, GMap2 এর পরিবর্তে, আপনি এখন google.maps.Map লোড করবেন। - অপ্রচলিত পদ্ধতির কোনো রেফারেন্স সরান.
GDownloadURL এবং GLog এর মতো সাধারণ উদ্দেশ্য ইউটিলিটি পদ্ধতির একটি সংখ্যা সরানো হয়েছে। হয় তৃতীয় পক্ষের ইউটিলিটি লাইব্রেরির সাথে এই কার্যকারিতা প্রতিস্থাপন করুন, অথবা আপনার কোড থেকে এই রেফারেন্সগুলি সরিয়ে দিন। - (ঐচ্ছিক) আপনার কোডে লাইব্রেরি যোগ করুন। অনেক বৈশিষ্ট্য ইউটিলিটি লাইব্রেরিতে বাহ্যিক করা হয়েছে যাতে প্রতিটি অ্যাপকে শুধুমাত্র API এর অংশগুলি লোড করতে হবে যা ব্যবহার করা হবে।
- (ঐচ্ছিক) v3 এক্সটার্ন ব্যবহার করার জন্য আপনার প্রোজেক্ট কনফিগার করুন। ক্লোজার কম্পাইলারের সাথে আপনার কোড যাচাই করতে বা আপনার IDE-তে স্বয়ংসম্পূর্ণ ট্রিগার করতে v3 এক্সটার্নগুলি ব্যবহার করা যেতে পারে। অ্যাডভান্সড কম্পাইলেশন এবং এক্সটার্নস সম্পর্কে আরও জানুন।
- পরীক্ষা এবং পুনরাবৃত্তি. এই মুহুর্তে আপনার এখনও কিছু কাজ করতে হবে, কিন্তু সুসংবাদ হল যে আপনি আপনার নতুন v3 মানচিত্র অ্যাপ্লিকেশনের পথে ভাল থাকবেন!
মানচিত্র জাভাস্ক্রিপ্ট API-এর V3-তে পরিবর্তন
আপনার মাইগ্রেশনের পরিকল্পনা করার আগে, আপনার মানচিত্র জাভাস্ক্রিপ্ট API v2 এবং মানচিত্র JavaScript API v3 এর মধ্যে পার্থক্য বুঝতে সময় নেওয়া উচিত। মানচিত্র জাভাস্ক্রিপ্ট API-এর নতুন সংস্করণ আধুনিক জাভাস্ক্রিপ্ট প্রোগ্রামিং কৌশল, লাইব্রেরির বর্ধিত ব্যবহার এবং একটি সরলীকৃত API-এর উপর ফোকাস সহ গ্রাউন্ড আপ থেকে লেখা হয়েছে। এপিআই-তে অনেক নতুন বৈশিষ্ট্য যোগ করা হয়েছে এবং বেশ কিছু পরিচিত বৈশিষ্ট্য পরিবর্তন করা হয়েছে বা এমনকি সরানো হয়েছে। এই বিভাগে দুটি রিলিজের মধ্যে কিছু মূল পার্থক্য তুলে ধরা হয়েছে।
v3 API এর কিছু পরিবর্তনের মধ্যে রয়েছে:
- একটি সুগমিত মূল গ্রন্থাগার। অনেক পরিপূরক ফাংশন লাইব্রেরিতে স্থানান্তরিত করা হয়েছে, কোর API-এর লোড এবং পার্সিং সময় কমাতে সাহায্য করে যা আপনার মানচিত্রকে যেকোনো ডিভাইসে দ্রুত লোড করতে দেয়।
- বহুভুজ রেন্ডারিং এবং মার্কার বসানোর মতো বেশ কয়েকটি বৈশিষ্ট্যের উন্নত কর্মক্ষমতা।
- মোবাইল প্রক্সি এবং কর্পোরেট ফায়ারওয়াল দ্বারা ব্যবহৃত শেয়ার করা ঠিকানাগুলিকে আরও ভালভাবে মিটমাট করার জন্য ক্লায়েন্ট-সাইড ব্যবহারের সীমার জন্য একটি নতুন পদ্ধতি।
- বেশ কয়েকটি আধুনিক ব্রাউজার এবং মোবাইল ব্রাউজারগুলির জন্য সমর্থন যোগ করা হয়েছে। ইন্টারনেট এক্সপ্লোরার 6 এর জন্য সমর্থন সরানো হয়েছে।
- অনেকগুলি সাধারণ-উদ্দেশ্য সহকারী ক্লাস (
GLog বা GDownloadUrl ) সরানো হয়েছে। আজ, অনেক চমৎকার জাভাস্ক্রিপ্ট লাইব্রেরি বিদ্যমান যা একই ধরনের কার্যকারিতা প্রদান করে, যেমন Closure বা jQuery । - একটি HTML5 রাস্তার দৃশ্য বাস্তবায়ন যা যেকোনো মোবাইল ডিভাইসে লোড হবে।
- আপনার নিজের ফটো সহ কাস্টম রাস্তার দৃশ্য প্যানোরামা, আপনাকে স্কি ঢাল, বিক্রয়ের জন্য বাড়ি বা অন্যান্য আকর্ষণীয় স্থানগুলির প্যানোরামাগুলি ভাগ করার অনুমতি দেয়৷
- স্টাইল করা মানচিত্র কাস্টমাইজেশন যা আপনাকে আপনার অনন্য ভিজ্যুয়াল শৈলীর সাথে মেলে বেস মানচিত্রে উপাদানগুলির প্রদর্শন পরিবর্তন করতে দেয়৷
- বেশ কিছু নতুন পরিষেবার জন্য সমর্থন, যেমন ElevationService এবং Distance Matrix .
- একটি উন্নত দিকনির্দেশ পরিষেবা বিকল্প রুট, রুট অপ্টিমাইজেশান ( ভ্রমণকারী বিক্রয়কর্মী সমস্যার আনুমানিক সমাধান), সাইকেল চালানোর দিকনির্দেশ ( বাইসাইকেল লেয়ার সহ), ট্রানজিট দিকনির্দেশ এবং টেনে আনা যায় এমন দিকনির্দেশ প্রদান করে।
- একটি আপডেট করা জিওকোডিং ফর্ম্যাট যা জিওকোডিং API v2 থেকে
accuracy মানের চেয়ে আরও সঠিক তথ্য প্রদান করে। - একক মানচিত্রে একাধিক তথ্য উইন্ডোজের জন্য সমর্থন
আপনার আবেদন আপগ্রেড করা হচ্ছে
আপনার নতুন কী
Maps JavaScript API v3 v2 থেকে একটি নতুন কী সিস্টেম ব্যবহার করে। আপনি ইতিমধ্যেই আপনার অ্যাপ্লিকেশনের সাথে একটি v3 কী ব্যবহার করছেন, এই ক্ষেত্রে কোন পরিবর্তনের প্রয়োজন নেই। যাচাই করতে, key প্যারামিটারের জন্য আপনি যে URL থেকে Maps JavaScript API লোড করছেন সেটি পরীক্ষা করুন। কী মান 'ABQIAA' দিয়ে শুরু হলে, আপনি একটি v2 কী ব্যবহার করছেন। আপনার যদি একটি v2 কী থাকে, তাহলে আপনাকে অবশ্যই একটি v3 কী-তে আপগ্রেড করতে হবে মাইগ্রেশনের অংশ হিসেবে, যা হবে:
Maps JavaScript API v3 লোড করার সময় কী পাস করা হয়। API কী তৈরি করার বিষয়ে আরও জানুন ।
মনে রাখবেন যে আপনি যদি একজন Google Maps APIs for Work গ্রাহক হন, তাহলে আপনি key প্যারামিটার ব্যবহার করার পরিবর্তে client প্যারামিটার সহ একটি ক্লায়েন্ট আইডি ব্যবহার করতে পারেন। ক্লায়েন্ট আইডি এখনও মানচিত্র জাভাস্ক্রিপ্ট API v3 সমর্থিত এবং কী আপগ্রেড প্রক্রিয়ার মধ্য দিয়ে যাওয়ার প্রয়োজন নেই।
API লোড হচ্ছে
আপনার কোডে আপনাকে যে প্রথম পরিবর্তন করতে হবে তার মধ্যে আপনি কীভাবে API লোড করবেন তা জড়িত। v2-এ, আপনি http://maps.google.com/maps এ অনুরোধের মাধ্যমে Maps JavaScript API লোড করেন। আপনি যদি Maps JavaScript API v3 লোড করছেন, তাহলে আপনাকে নিম্নলিখিত পরিবর্তনগুলি করতে হবে:
-
//maps.googleapis.com/maps/api/js থেকে API লোড করুন -
file প্যারামিটার সরান। - আপনার নতুন v3 কী দিয়ে
key প্যারামিটার আপডেট করুন। কাজের গ্রাহকদের জন্য Google মানচিত্র API একটি client প্যারামিটার ব্যবহার করা উচিত। - (শুধুমাত্র Google মানচিত্র প্ল্যাটফর্ম প্রিমিয়াম প্ল্যান) নিশ্চিত করুন যে
client প্যারামিটারটি Google মানচিত্র প্ল্যাটফর্ম প্রিমিয়াম প্ল্যান বিকাশকারীর নির্দেশিকায় বর্ণিত হিসাবে সরবরাহ করা হয়েছে। - সর্বশেষ প্রকাশিত সংস্করণের জন্য অনুরোধ করতে
v প্যারামিটারটি সরান বা v3 সংস্করণ স্কিম অনুযায়ী এর মান পরিবর্তন করুন। - (ঐচ্ছিক)
hl প্যারামিটারটিকে language সাথে প্রতিস্থাপন করুন এবং এর মান সংরক্ষণ করুন। - (ঐচ্ছিক) ঐচ্ছিক লাইব্রেরি লোড করতে একটি
libraries প্যারামিটার যোগ করুন।
সহজ ক্ষেত্রে, v3 বুটস্ট্র্যাপ শুধুমাত্র আপনার API কী প্যারামিটার নির্দিষ্ট করবে:
<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 নামস্থান প্রবর্তন করা হচ্ছে
সম্ভবত Maps JavaScript API v3-তে সবচেয়ে লক্ষণীয় পরিবর্তন হল google.maps নামস্থানের প্রবর্তন। v2 API ডিফল্টরূপে সমস্ত বস্তুকে গ্লোবাল নেমস্পেসে রাখে, যার ফলে নামকরণের সংঘর্ষ হতে পারে। v3-এর মধ্যে, সমস্ত বস্তু google.maps নামস্থানের মধ্যে অবস্থিত।
v3 তে আপনার অ্যাপ্লিকেশন স্থানান্তর করার সময় আপনাকে নতুন নামস্থান ব্যবহার করতে আপনার কোড পরিবর্তন করতে হবে। দুর্ভাগ্যবশত, "G" অনুসন্ধান করা এবং "google.maps" দিয়ে প্রতিস্থাপন করা হচ্ছে। সম্পূর্ণরূপে কাজ করবে না; কিন্তু, আপনার কোড পর্যালোচনা করার সময় প্রয়োগ করা একটি ভাল নিয়ম। নিচে v2 এবং v3 এর সমতুল্য ক্লাসের কিছু উদাহরণ দেওয়া হল।
| v2 |
v3 |
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 |
অপ্রচলিত কোড অপসারণ
মানচিত্র জাভাস্ক্রিপ্ট API v3-তে v2-এর বেশিরভাগ কার্যকারিতার সমান্তরাল রয়েছে; যাইহোক, কিছু ক্লাস আছে যেগুলো আর সমর্থিত নয়। আপনার মাইগ্রেশনের অংশ হিসাবে, আপনার হয় এই ক্লাসগুলিকে তৃতীয় পক্ষের ইউটিলিটি লাইব্রেরির সাথে প্রতিস্থাপন করা উচিত, অথবা আপনার কোড থেকে এই রেফারেন্সগুলি সরিয়ে দেওয়া উচিত। অনেক চমৎকার জাভাস্ক্রিপ্ট লাইব্রেরি বিদ্যমান যা একই ধরনের কার্যকারিতা প্রদান করে, যেমন Closure বা jQuery ।
মানচিত্র জাভাস্ক্রিপ্ট এপিআই 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 API-এর সাথে লিখিত অ্যাপ্লিকেশন।
<!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>
আপনি দেখতে পাচ্ছেন, দুটি অ্যাপ্লিকেশনের মধ্যে বেশ কিছু পার্থক্য রয়েছে। উল্লেখযোগ্য পরিবর্তন অন্তর্ভুক্ত:
- ঠিকানা যেখান থেকে API লোড করা হয়েছে তা পরিবর্তিত হয়েছে।
-
GBrowserIsCompatible() এবং GUnload() পদ্ধতি v3-তে আর প্রয়োজন নেই এবং API থেকে সরানো হয়েছে। -
GMap2 অবজেক্টটি google.maps.Map দ্বারা এপিআই-এর কেন্দ্রীয় অবজেক্ট হিসেবে প্রতিস্থাপিত হয়েছে। - বৈশিষ্ট্যগুলি এখন বিকল্প ক্লাসের মাধ্যমে লোড করা হয়। উপরের উদাহরণে, আমরা একটি মানচিত্র লোড করার জন্য প্রয়োজনীয় তিনটি বৈশিষ্ট্য সেট করেছি —
center , zoom এবং mapTypeId — একটি ইনলাইনযুক্ত MapOptions অবজেক্টের মাধ্যমে। - ডিফল্ট UI ডিফল্টরূপে v3 এ চালু থাকে। আপনি
MapOptions অবজেক্টে disableDefaultUI বৈশিষ্ট্যটিকে সত্যে সেট করে এটি নিষ্ক্রিয় করতে পারেন।
সারাংশ
এই মুহুর্তে আপনি মানচিত্র জাভাস্ক্রিপ্ট API এর v2 থেকে v3 তে আপনার স্থানান্তরের সাথে জড়িত কিছু মূল পয়েন্টগুলির জন্য একটি স্বাদ পাবেন৷ আপনার জানার প্রয়োজন হতে পারে এমন আরও তথ্য রয়েছে, তবে এটি আপনার আবেদনের উপর নির্ভর করবে। নিম্নলিখিত বিভাগগুলিতে, আমরা আপনার সম্মুখীন হতে পারে এমন নির্দিষ্ট ক্ষেত্রে স্থানান্তর নির্দেশাবলী অন্তর্ভুক্ত করেছি। উপরন্তু, আপগ্রেড প্রক্রিয়া চলাকালীন আপনার সহায়ক হতে পারে এমন বেশ কয়েকটি সংস্থান রয়েছে।
এই নিবন্ধটি সম্পর্কে আপনার কোন সমস্যা বা প্রশ্ন থাকলে, অনুগ্রহ করে এই পৃষ্ঠার শীর্ষে প্রতিক্রিয়া পাঠান লিঙ্কটি ব্যবহার করুন।
এই বিভাগটি মানচিত্র জাভাস্ক্রিপ্ট API-এর v2 এবং v3 উভয়ের জন্য সর্বাধিক জনপ্রিয় বৈশিষ্ট্যগুলির একটি বিশদ তুলনা প্রদান করে। রেফারেন্সের প্রতিটি বিভাগ পৃথকভাবে পড়ার জন্য ডিজাইন করা হয়েছে। আমরা সুপারিশ করছি যে আপনি এই রেফারেন্সটি সম্পূর্ণভাবে পড়বেন না; পরিবর্তে, কেস-বাই-কেস ভিত্তিতে আপনার মাইগ্রেশনে সহায়তা করতে এই উপাদানটি ব্যবহার করুন।
- ইভেন্ট - নিবন্ধন এবং ইভেন্ট পরিচালনা।
- কন্ট্রোল - ম্যাপে প্রদর্শিত ন্যাভিগেশনাল কন্ট্রোল ম্যানিপুলেট করা।
- ওভারলে - মানচিত্রে বস্তু যোগ করা এবং সম্পাদনা করা।
- মানচিত্রের ধরন - টাইলস যা বেসম্যাপ তৈরি করে।
- স্তরগুলি - একটি গ্রুপ হিসাবে বিষয়বস্তু যোগ করা এবং সম্পাদনা করা, যেমন KML বা ট্র্যাফিক স্তর।
- পরিষেবাগুলি - Google এর জিওকোডিং, দিকনির্দেশ বা রাস্তার দৃশ্য পরিষেবাগুলির সাথে কাজ করা৷
ঘটনা
Maps JavaScript API v3-এর ইভেন্ট মডেলটি v2-এ ব্যবহৃত মডেলের মতোই, যদিও হুডের অধীনে অনেক কিছু পরিবর্তিত হয়েছে।
MVC সমর্থনের জন্য নতুন ইভেন্ট
V3 API MVC অবস্থার পরিবর্তনগুলি প্রতিফলিত করতে একটি নতুন ধরনের ইভেন্ট যোগ করে। এখন দুই ধরনের ইভেন্ট আছে:
- ব্যবহারকারীর ইভেন্টগুলি (যেমন "ক্লিক" মাউস ইভেন্ট) DOM থেকে Maps JavaScript API-তে প্রচারিত হয়। এই ইভেন্টগুলি স্ট্যান্ডার্ড DOM ইভেন্টগুলি থেকে আলাদা এবং আলাদা৷
- MVC রাজ্য পরিবর্তনের বিজ্ঞপ্তিগুলি মানচিত্র API অবজেক্টের পরিবর্তনগুলিকে প্রতিফলিত করে এবং একটি
property _changed কনভেনশন ব্যবহার করে নামকরণ করা হয়।
প্রতিটি মানচিত্র API অবজেক্ট বেশ কয়েকটি নামকৃত ইভেন্ট রপ্তানি করে। নির্দিষ্ট ইভেন্টগুলিতে আগ্রহী অ্যাপ্লিকেশনগুলিকে সেই ইভেন্টগুলির জন্য ইভেন্ট শ্রোতাদের নিবন্ধন করা উচিত এবং সেই ইভেন্টগুলি প্রাপ্ত হলে কোডটি কার্যকর করা উচিত। এই ইভেন্ট-চালিত প্রক্রিয়াটি মানচিত্র জাভাস্ক্রিপ্ট 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 একই ভাবে কাজ করে:
- আপনি যখন একটি ইভেন্ট লিসেনার তৈরি করেন, তখন একটি অস্বচ্ছ বস্তু ( v2 তে GEventListener , v3 তে MapsEventListener ) ফিরে আসে।
- আপনি যখন ইভেন্ট শ্রোতাকে সরাতে চান, তখন ইভেন্ট শ্রোতা অপসারণ করতে এই বস্তুটিকে
removeListener() পদ্ধতিতে ( GEvent.removeListener() v2 বা google.maps.event.removeListener() v3-তে পাস করুন৷
DOM ইভেন্টগুলি শোনা
আপনি যদি DOM (ডকুমেন্ট অবজেক্ট মডেল) ইভেন্টগুলি ক্যাপচার করতে এবং প্রতিক্রিয়া জানাতে চান, তাহলে v3 google.maps.event.addDomListener() স্ট্যাটিক পদ্ধতি প্রদান করে, v2 এ GEvent.addDomListener() পদ্ধতির সমতুল্য।
ইভেন্টে পাস করা আর্গুমেন্ট ব্যবহার করা
UI ইভেন্টগুলি প্রায়ই একটি ইভেন্ট আর্গুমেন্ট পাস করে যা ইভেন্ট শ্রোতা দ্বারা অ্যাক্সেস করা যেতে পারে। এপিআই-এর অবজেক্টের উপর আরও সামঞ্জস্যপূর্ণ হওয়ার জন্য 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
});
});
নিয়ন্ত্রণ করে
মানচিত্র জাভাস্ক্রিপ্ট API UI নিয়ন্ত্রণগুলি প্রদর্শন করে যা ব্যবহারকারীদের আপনার মানচিত্রের সাথে ইন্টারঅ্যাক্ট করতে দেয়৷ এই নিয়ন্ত্রণগুলি কীভাবে প্রদর্শিত হবে তা কাস্টমাইজ করতে আপনি API ব্যবহার করতে পারেন।
নিয়ন্ত্রণ প্রকার পরিবর্তন
control প্রকারের কিছু পরিবর্তন v3 API এর সাথে চালু করা হয়েছে।
- v3 API ভূখণ্ডের মানচিত্র এবং কাস্টম মানচিত্র প্রকার যোগ করার ক্ষমতা সহ অতিরিক্ত মানচিত্র প্রকারগুলিকে সমর্থন করে৷
- v2 অনুক্রমিক নিয়ন্ত্রণ,
GHierarchicalMapTypeControl , আর উপলব্ধ নেই৷ আপনি google.maps.MapTypeControlStyle.HORIZONTAL_BAR নিয়ন্ত্রণ ব্যবহার করে অনুরূপ প্রভাব অর্জন করতে পারেন৷ - v2-এ
GMapTypeControl দ্বারা প্রদত্ত অনুভূমিক বিন্যাস 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);
মানচিত্রে অবস্থান নিয়ন্ত্রণ
পজিশনিং কন্ট্রোল v3 তে ব্যাপক পরিবর্তন হয়েছে। v2 এ, addControl() পদ্ধতিটি একটি ঐচ্ছিক দ্বিতীয় প্যারামিটার নেয় যা আপনাকে মানচিত্রের কোণগুলির সাথে সম্পর্কিত নিয়ন্ত্রণের অবস্থান নির্দিষ্ট করতে দেয়।
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);
কাস্টম নিয়ন্ত্রণ
মানচিত্র জাভাস্ক্রিপ্ট API আপনাকে কাস্টম নেভিগেশনাল নিয়ন্ত্রণ তৈরি করতে দেয়। v2 API এর সাথে নিয়ন্ত্রণগুলি কাস্টমাইজ করতে, আপনি GControl ক্লাসকে সাবক্লাস করবেন এবং initialize() এবং getDefaultPosition() পদ্ধতিগুলির জন্য হ্যান্ডলারগুলিকে সংজ্ঞায়িত করবেন। v3 তে GControl ক্লাসের কোন সমতুল্য নেই। পরিবর্তে, নিয়ন্ত্রণগুলিকে DOM উপাদান হিসাবে উপস্থাপন করা হয়। v3 API এর সাথে একটি কাস্টম নিয়ন্ত্রণ যোগ করতে, একটি Node একটি শিশু হিসাবে একটি কনস্ট্রাক্টরে নিয়ন্ত্রণের জন্য একটি DOM কাঠামো তৈরি করুন (যেমন একটি <div> উপাদান) এবং যে কোনো DOM ইভেন্ট পরিচালনা করতে ইভেন্ট শ্রোতাদের যোগ করুন। আপনার মানচিত্রে কাস্টম নিয়ন্ত্রণের একটি উদাহরণ যোগ করতে মানচিত্রের controls[ position ] অ্যারেতে Node চাপুন৷
উপরে উল্লিখিত ইন্টারফেসের প্রয়োজনীয়তাগুলি মেনে চলা একটি 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-এর ওভারলেগুলি 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 এই প্রক্রিয়াটিকে কিছুটা সরল করে। আপনার কাস্টম চিত্রের URL-এ মার্কার icon বৈশিষ্ট্যটি সহজভাবে সেট করুন এবং API স্বয়ংক্রিয়ভাবে আইকনটিকে আকার দেবে।
মানচিত্র জাভাস্ক্রিপ্ট API জটিল আইকনগুলির জন্য সমর্থন প্রদান করে। একটি জটিল আইকনে একাধিক টাইলস, জটিল আকার অন্তর্ভুক্ত থাকতে পারে বা অন্যান্য ওভারলেগুলির তুলনায় চিত্রগুলি কীভাবে প্রদর্শন করা উচিত তার "স্ট্যাক অর্ডার" উল্লেখ করতে পারে। v2-এ একটি মার্কারে একটি আকৃতি যোগ করতে, আপনাকে প্রতিটি GIcon উদাহরণে অতিরিক্ত সম্পত্তি নির্দিষ্ট করতে হবে এবং এটিকে একটি GMarker কনস্ট্রাক্টরের কাছে একটি বিকল্প হিসাবে পাস করতে হবে। v3-এ, এই পদ্ধতিতে নির্দিষ্ট করা আইকনগুলির icon বৈশিষ্ট্যগুলি Icon টাইপের একটি বস্তুতে সেট করা উচিত। মার্কার ছায়া v3 সমর্থিত নয়।
নিম্নলিখিত উদাহরণগুলি অস্ট্রেলিয়ার বন্ডি বিচে একটি সৈকত পতাকা প্রদর্শন করে, আইকনের স্বচ্ছ অংশটি ক্লিকযোগ্য নয়:
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 s এর একটি বিন্যাস রয়েছে, এছাড়াও লাইন সেগমেন্টের একটি সিরিজ যা সেই অবস্থানগুলিকে একটি ক্রমানুসারে সংযুক্ত করে। 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);
এনকোডেড পলিলাইন
এনকোড করা পলিলাইন থেকে সরাসরি Polyline অবজেক্ট তৈরি করার জন্য v3-তে কোনও সমর্থন নেই। পরিবর্তে, জ্যামিতি লাইব্রেরি পলিলাইনগুলিকে এনকোড এবং ডিকোড করার পদ্ধতি সরবরাহ করে। এই লাইব্রেরিটি কীভাবে লোড করতে হয় সে সম্পর্কে আরও তথ্যের জন্য 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 মানচিত্রের উপরে একটি ভাসমান উইন্ডোতে সামগ্রী প্রদর্শন করে। v2 এবং v3 তথ্য উইন্ডোগুলির মধ্যে কয়েকটি মূল পার্থক্য রয়েছে:
- v2 API মানচিত্র প্রতি শুধুমাত্র
GInfoWindow সমর্থন করে, যেখানে v3 API প্রতিটি মানচিত্রে একাধিক, সমসাময়িক InfoWindow সমর্থন করে। - আপনি মানচিত্রে ক্লিক করলে v3
InfoWindow খোলা থাকবে। আপনি মানচিত্রে ক্লিক করলে v2 GInfoWindow স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়। আপনি Map অবজেক্টে একটি click লিসেনার যোগ করে v2 আচরণ অনুকরণ করতে পারেন। - v3 API একটি ট্যাবযুক্ত
InfoWindow জন্য স্থানীয় সমর্থন প্রদান করে না।
গ্রাউন্ড ওভারলে
একটি মানচিত্রে একটি চিত্র স্থাপন করতে, আপনার একটি GroundOverlay অবজেক্ট ব্যবহার করা উচিত। একটি GroundOverlay -এর কনস্ট্রাক্টর মূলত v2 এবং v3-এ একই: এটি একটি ছবির URL এবং প্যারামিটার হিসাবে ছবির সীমানা নির্দিষ্ট করে।
নিম্নলিখিত উদাহরণটি একটি ওভারলে হিসাবে মানচিত্রে Newark, 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);
মানচিত্র প্রকার
v2 এবং v3 তে উপলব্ধ মানচিত্রের ধরনগুলি কিছুটা আলাদা, তবে সমস্ত মৌলিক মানচিত্রের ধরন API এর উভয় সংস্করণেই উপলব্ধ। ডিফল্টরূপে, v2 স্ট্যান্ডার্ড "পেইন্টেড" রোড ম্যাপ টাইলস ব্যবহার করে। যাইহোক, একটি google.maps.Map অবজেক্ট তৈরি করার সময় v3-এর জন্য একটি নির্দিষ্ট মানচিত্র টাইপ দিতে হবে।
সাধারণ মানচিত্রের প্রকার
চারটি মৌলিক মানচিত্র প্রকার v2 এবং 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);
মানচিত্র জাভাস্ক্রিপ্ট API v3 কম সাধারণ মানচিত্রের প্রকারেও কিছু পরিবর্তন করেছে:
- পৃথিবী ব্যতীত অন্য মহাকাশীয় বস্তুগুলির জন্য মানচিত্রের টাইলগুলি v3 API-তে মানচিত্রের প্রকার হিসাবে উপলব্ধ নয়, তবে এই উদাহরণে দেখানো হিসাবে কাস্টম মানচিত্র প্রকার হিসাবে অ্যাক্সেস করা যেতে পারে।
- v3 তে কোন বিশেষ মানচিত্র প্রকার নেই যা v2 থেকে
G_SATELLITE_3D_MAP প্রকার প্রতিস্থাপন করে। পরিবর্তে, আপনি এই লাইব্রেরি ব্যবহার করে আপনার v3 মানচিত্রে Google আর্থ প্লাগইন সংহত করতে পারেন।
সর্বাধিক জুম চিত্র
স্যাটেলাইট ছবি সবসময় উচ্চ জুম স্তরে উপলব্ধ নয়। আপনি যদি জুম স্তর সেট করার আগে উপলব্ধ সর্বোচ্চ জুম স্তর জানতে চান, 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.");
}
});
বায়বীয় দৃষ্টিভঙ্গি চিত্র
v3 তে বায়বীয় চিত্র সক্ষম করার সময়, নিয়ন্ত্রণগুলি v2 GLargeZoomControl3D নিয়ন্ত্রণের অনুরূপ, সমর্থিত দিকনির্দেশগুলির মাধ্যমে ঘোরানোর জন্য একটি অতিরিক্ত ইন্টারস্টিশিয়াল রোটেট নিয়ন্ত্রণ সহ।
আপনি সেই শহরগুলি ট্র্যাক করতে পারেন যেখানে এই মানচিত্রে বর্তমানে 45° চিত্র পাওয়া যায়৷ যখন 45° চিত্র পাওয়া যায়, তখন মানচিত্র API স্যাটেলাইট বোতামে একটি সাবমেনু বিকল্প যোগ করা হয়।
স্তর
স্তরগুলি হল মানচিত্রের বস্তু যা এক বা একাধিক ওভারলে নিয়ে গঠিত। এগুলিকে একক ইউনিট হিসাবে ব্যবহার করা যেতে পারে এবং সাধারণত বস্তুর সংগ্রহগুলি প্রতিফলিত করে।
সমর্থিত স্তর
v3 API বিভিন্ন স্তরে অ্যাক্সেস প্রদান করে। এই স্তরগুলি নিম্নলিখিত এলাকায় v2 GLayer ক্লাসের সাথে ওভারল্যাপ করে:
-
KmlLayer অবজেক্ট KML এবং GeoRSS উপাদানগুলিকে v3 ওভারলেতে রেন্ডার করে, v2 GeoXml স্তরের সমতুল্য প্রদান করে। -
TrafficLayer অবজেক্ট v2 GTrafficOverlay ওভারলে অনুরূপ ট্রাফিক অবস্থার চিত্রিত একটি স্তর রেন্ডার করে।
এই স্তরগুলি v2 থেকে আলাদা। পার্থক্য নীচে বর্ণনা করা হয়. সেগুলিকে একটি মানচিত্রে যোগ করা যেতে পারে setMap() কল করে, এটিকে Map বস্তুটি পাস করে যার উপর স্তরটি প্রদর্শন করা হবে।
সমর্থিত স্তর সম্পর্কে আরও তথ্য স্তর ডকুমেন্টেশনে উপলব্ধ।
KML এবং GeoRSS স্তরসমূহ
Maps JavaScript API ভৌগলিক তথ্য প্রদর্শনের জন্য KML এবং GeoRSS ডেটা বিন্যাস সমর্থন করে। আপনি যদি একটি মানচিত্রে অন্তর্ভুক্ত করতে চান তাহলে KML বা GeoRSS ফাইলগুলি অবশ্যই সর্বজনীনভাবে অ্যাক্সেসযোগ্য হতে হবে৷ v3-এ, এই ডেটা ফরম্যাটগুলি KmlLayer এর একটি উদাহরণ ব্যবহার করে প্রদর্শিত হয়, যা v2 থেকে GGeoXml অবজেক্টকে প্রতিস্থাপন করে।
KML রেন্ডার করার সময় v3 API আরও নমনীয়, যা আপনাকে 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);
ট্রাফিক স্তর
v3 আপনাকে 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 পাওয়া যায় না.
সেবা
জিওকোডিং
মানচিত্র জাভাস্ক্রিপ্ট API ব্যবহারকারীর ইনপুট থেকে গতিশীলভাবে জিওকোডিং ঠিকানাগুলির জন্য একটি geocoder অবজেক্ট প্রদান করে। আপনি যদি স্ট্যাটিক, পরিচিত ঠিকানা জিওকোড করতে চান, জিওকোডিং API ডকুমেন্টেশন দেখুন।
জিওকোডিং এপিআইকে উল্লেখযোগ্যভাবে আপগ্রেড করা হয়েছে এবং উন্নত করা হয়েছে, নতুন বৈশিষ্ট্য যোগ করা হয়েছে এবং ডেটা কীভাবে উপস্থাপন করা হয় তা পরিবর্তন করা হয়েছে।
V2 API-তে GClientGeocoder ফরোয়ার্ড এবং রিভার্স জিওকোডিংয়ের জন্য দুটি ভিন্ন পদ্ধতি প্রদান করে এবং সেইসাথে জিওকোডিং কীভাবে সম্পাদিত হয়েছিল তা প্রভাবিত করার জন্য অতিরিক্ত পদ্ধতি প্রদান করে। বিপরীতে, v3 Geocoder অবজেক্ট শুধুমাত্র একটি geocode() পদ্ধতি প্রদান করে, যা ইনপুট শর্তাবলী (একটি জিওকোডিং অনুরোধ অবজেক্টের আকারে) এবং একটি কলব্যাক পদ্ধতি ধারণকারী একটি বস্তুকে আক্ষরিকভাবে নেয়। অনুরোধে একটি পাঠ্য address বৈশিষ্ট্য বা একটি LatLng অবজেক্ট রয়েছে কিনা তার উপর নির্ভর করে, জিওকোডিং API একটি ফরওয়ার্ড বা বিপরীত জিওকোডিং প্রতিক্রিয়া প্রদান করবে। জিওকোডিং অনুরোধে অতিরিক্ত ক্ষেত্রগুলি পাস করে আপনি কীভাবে জিওকোডিং সঞ্চালিত হয় তা প্রভাবিত করতে পারেন:
- একটি টেক্সচুয়াল
address সহ জিওকোডিং ফরওয়ার্ড করে, যা getLatLng() পদ্ধতিতে কল করার সমতুল্য। - একটি
latLng অবজেক্ট সহ রিভার্স জিওকোডিং ট্রিগার করে, যা getLocations() পদ্ধতিতে কল করার সমতুল্য। -
bounds অ্যাট্রিবিউট সহ ভিউপোর্ট বায়াসিং সক্ষম করে, setViewport() পদ্ধতিতে কল করার সমতুল্য। -
region বৈশিষ্ট্য সহ অঞ্চল কোড বায়াসিং সক্ষম করে, setBaseCountryCode() পদ্ধতিতে কল করার সমতুল্য।
v3 তে জিওকোডিং প্রতিক্রিয়াগুলি 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');
}
দিকনির্দেশ
মানচিত্র জাভাস্ক্রিপ্ট API v3 দিকনির্দেশ গণনার জন্য v2 থেকে GDirections ক্লাসকে DirectionsService ক্লাস দিয়ে প্রতিস্থাপন করে।
v3-এ route() পদ্ধতি v2 API থেকে load() এবং loadFromWaypoints() উভয় পদ্ধতিকে প্রতিস্থাপন করে। এই পদ্ধতিটি একটি একক DirectionsRequest বস্তুর আক্ষরিক ইনপুট শর্তাবলী এবং একটি কলব্যাক পদ্ধতি গ্রহণ করে প্রতিক্রিয়া প্রাপ্তির পরে কার্যকর করতে। এই অবজেক্ট লিটারাল-এ বিকল্প দেওয়া হতে পারে, v2-তে GDirectionsOptions অবজেক্ট লিটারালের মতো।
Maps JavaScript API v3-এ, নির্দেশের অনুরোধ জমা দেওয়ার কাজটিকে অনুরোধগুলি রেন্ডার করার কাজ থেকে আলাদা করা হয়েছে, যা এখন DirectionsRenderer ক্লাসের সাথে পরিচালনা করা হয়। আপনি একটি DirectionsRenderer অবজেক্টকে যেকোনো মানচিত্র বা DirectionsResult অবজেক্টের সাথে তার setMap() এবং setDirections() পদ্ধতির মাধ্যমে টাই করতে পারেন। যেহেতু রেন্ডারার একটি MVCObject , এটি এর বৈশিষ্ট্যে যেকোনো পরিবর্তন সনাক্ত করবে এবং সংশ্লিষ্ট দিকনির্দেশ পরিবর্তিত হলে মানচিত্র আপডেট করবে৷
নিম্নলিখিত কোডটি দেখায় কিভাবে একটি ঠিকানা থেকে পথচারী পাথ ব্যবহার করে একটি নির্দিষ্ট স্থানে হাঁটার দিকনির্দেশের অনুরোধ করতে হয়। উল্লেখ্য যে শুধুমাত্র v3 ডাবলিনের চিড়িয়াখানায় পথচারীদের হাঁটার দিকনির্দেশ প্রদান করতে সক্ষম।
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 রাস্তার দৃশ্য তার কভারেজ এলাকার মধ্যে নির্ধারিত অবস্থান থেকে ইন্টারেক্টিভ, 360° ভিউ প্রদান করে। v3 API ব্রাউজারের মধ্যে নেটিভভাবে রাস্তার দৃশ্য সমর্থন করে, v2 এর বিপরীতে যার জন্য রাস্তার দৃশ্যের চিত্র প্রদর্শনের জন্য Flash® প্লাগইন প্রয়োজন।
রাস্তার দৃশ্য চিত্রগুলি v3-এ StreetViewPanorama অবজেক্ট বা v2-এ GStreetviewPanorama অবজেক্ট ব্যবহারের মাধ্যমে সমর্থিত। এই ক্লাসগুলির বিভিন্ন ইন্টারফেস আছে, কিন্তু তারা একই ভূমিকা পালন করে: রাস্তার দৃশ্য চিত্রের সাথে div কন্টেইনার সংযুক্ত করা এবং আপনাকে রাস্তার দৃশ্য প্যানোরামার অবস্থান এবং POV (পয়েন্ট অফ ভিউ) নির্দিষ্ট করতে দেয়৷
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);
}
v3-এ StreetViewService অবজেক্ট বা v2-এ অনুরূপ GStreetviewClient অবজেক্টের মাধ্যমে রাস্তার দৃশ্য ডেটাতে সরাসরি অ্যাক্সেস সম্ভব। উভয়ই রাস্তার দৃশ্য ডেটা পুনরুদ্ধার বা উপলব্ধতা পরীক্ষা করতে এবং অবস্থান বা প্যানোরামা আইডি দ্বারা অনুসন্ধানের অনুমতি দেওয়ার জন্য একই ইন্টারফেস সরবরাহ করে।
v3-এ, রাস্তার দৃশ্য ডিফল্টরূপে সক্রিয় থাকে। মানচিত্রটি একটি রাস্তার দৃশ্য পেগম্যান নিয়ন্ত্রণের সাথে প্রদর্শিত হবে এবং API রাস্তার দৃশ্য প্যানোরামাগুলি প্রদর্শন করতে মানচিত্র ডিভটি পুনরায় ব্যবহার করবে৷ রাস্তার দৃশ্য প্যানোরামাগুলিকে একটি পৃথক ডিভ-এ আলাদা করে কীভাবে 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);
}
