গুগল ম্যাপ ওভারলে

গুগল ম্যাপ - ওভারলেই

ওভারলেই হল মানচিত্রের উপর বাঁধা হওয়া অক্ষাংশ/দ্রাঘিমাংশ নির্দেশকের একটি অবজেক্ট

গুগল ম্যাপের বিভিন্ন ধরণের ওভারলেই রয়েছে:

• মার্কার (Marker) - মানচিত্রের একটি একক অবস্থান।মার্কারটি কাস্টম আইকন ছবি দেখাতেও পারে
• দীর্ঘলাইন (Polyline) - মানচিত্রের একটি শৃঙ্খল লাইন
• বহুকোণা (Polygon) - মানচিত্রের একটি শৃঙ্খল লাইন, যার আকৃতি 'বন্ধ' হয়
• বৃত্ত ও চতুর্ভুজ (Circle ও Rectangle)
• তথ্যপট (Info Windows) - মানচিত্রের শীর্ষের প্লাস্টারে দেখানো হয়
• কাস্টম ওভারলেই (Custom overlays)

গুগল ম্যাপ - মার্কার যোগ করা

Marker নির্মাণকারী ফাংশন মার্কার তৈরি করতে পারে। মার্কারটি দেখানোর জন্য position বৈশিষ্ট্যটি নিশ্চিত করা উচিত।

মার্কারটিকে মানচিত্রে যোগ করতে setMap() পদ্ধতিটি ব্যবহার করুন:

ইনস্ট্যান্স

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

গুগল ম্যাপ - মার্কার অ্যানিমেশন

নিম্নলিখিত উদাহরণটি animation বৈশিষ্ট্যটি ব্যবহার করে মার্কারের জন্য অ্যানিমেশন সংযোজন করা হয়েছে:

ইনস্ট্যান্স

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

গুগল ম্যাপ - আইকনের মাধ্যমে মার্কার

নিম্নলিখিত উদাহরণটি ব্যবহার করে ব্যবহৃত ছবি (আইকন) নির্দিষ্ট করা হয়েছে (ডিফল্ট মার্কারের পরিবর্তে):

ইনস্ট্যান্স

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

গুগল ম্যাপ - দীর্ঘলাইন

দীর্ঘলাইনটি ক্রমাগত একটি ক্রমবর্ধমান কোণ্ডারের মাধ্যমে আঁকা হয়েছে একটি লাইন。

দীর্ঘলাইনটি নিম্নলিখিত বৈশিষ্ট্যগুলির সমর্থন করে:

• path - নির্দিষ্ট লাইনের কয়েকটি অক্ষাংশ/দ্রাঘিমাংশ নির্দেশক
• strokeColor - লাইনের রঙ (ফরম্যাট: "#FFFFFF")
• strokeOpacity - লাইনের অবসাদকারীতা (0.0 থেকে 1.0 এর মধ্যে মান)
• strokeWeight - লাইন বানানোর চওড়াতা (পিক্সেল ইউনিটে)
• editable - ব্যবহারকারী কেন্দ্রিক ক্যারেল সংশোধন করতে পারবে কিনা (true/false)

ইনস্ট্যান্স

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

গুগল ম্যাপ - বহুকোণা

বহুকোণা একটি বিক্ষেপকের মতো, এটি একসূত্রে কোণ্ডার দ্বারা গঠিত। কিন্তু, বহুকোণা বন্ধ এলাকাকে নির্দিষ্ট করার জন্য ডিজাইন করা হয়েছে。

বহুকোণা একটি লাইন দ্বারা গঠিত এবং আকৃতি "বন্ধ" (সব লাইনই সংযুক্ত)

বহুকোণা নিম্নলিখিত বৈশিষ্ট্যসমূহকে সমর্থন করে:

• path - লাইনের কয়েকটি অক্ষত্ব/দ্রাঘিমাংশ কোণ্ডার (প্রথম এবং শেষ কোণ্ডার সমান)
• strokeColor - লাইনের রঙ (ফরম্যাট: "#FFFFFF")
• strokeOpacity - লাইনের অবসাদকারীতা (0.0 থেকে 1.0 এর মধ্যে মান)
• strokeWeight - লাইন বানানোর চওড়াতা (পিক্সেল ইউনিটে)
• fillColor - বন্ধ এলাকার রঙ (ফরম্যাট: "#FFFFFF")
• fillOpacity - পূর্ণ রঙের অবসাদকারীতা (0.0 থেকে 1.0 এর মধ্যে মান)
• editable - ব্যবহারকারী কেন্দ্রিক ক্যারেল সংশোধন করতে পারবে কিনা (true/false)

ইনস্ট্যান্স

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

গুগল ম্যাপ - ক্যারেল

ক্যারেলটি নিম্নলিখিত বৈশিষ্ট্যসমূহকে সমর্থন করে:

• center - ক্যারেলের কেন্দ্র google.maps.LatLng
• radius - ক্যারেলের ব্যাসার্ধ, মিটারে
• strokeColor - ক্যারেল চারপাশের লাইনের রঙ (ফরম্যাট: "#FFFFFF")
• strokeOpacity - লাইনের রঙের অবসাদকারীতা (0.0 থেকে 1.0 এর মধ্যে মান)
• strokeWeight - লাইন বানানোর চওড়াতা (পিক্সেল ইউনিটে)
• fillColor - বিশেষ রঙকের সাথে রঙকীভূত এলাকার রঙ (ফরম্যাট: "#FFFFFF")
• fillOpacity - পূর্ণ রঙের অবসাদকারীতা (0.0 থেকে 1.0 এর মধ্যে মান)
• editable - ব্যবহারকারী কেন্দ্রিক ক্যারেল সংশোধন করতে পারবে কিনা (true/false)

ইনস্ট্যান্স

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

গুগল ম্যাপ - তথ্য উইন্ডো

marker জানাই টেক্সট কনটেন্ট সহ তথ্য উইন্ডো দেখানোর জন্য:

ইনস্ট্যান্স

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
infowindow.open(map,marker);