Add a marker to the Google map(Google map এ marker যোগকরন)
Google Maps - Overlays( মোড়ক তৈরি করন)
Overlays হচ্ছে map এর উপরে একটি object যেটি latitude এবং longitude এর সীমিত করনে কাজ করে ।
Google Maps এর কয়েক ধরনের overlay দেখা যায় -
১) Marker- map এর একটি একক জাইগা নির্দেশ করে। Marker টি একটি প্রচলিত icon images দেখায়।
২) Polyline- map এর উপরে একসারি line নির্দেশ করে।
৩) Polygon- map এর উপরে একসারি line এবং এর আকৃতি "closed"।
৪) Circle(বৃত্তাকার) and Rectangle(আয়তক্ষেত্রিক)
৫) Info Windows- map এর উপরে content গুলিকে popup balloon এর মধ্যে প্রদর্শন করে।
৬) Custom(প্রচলিত) overlays
Google Maps - Add a Marker(Google Map এ Marker যুক্তকরন)
Marker constructor একটি marker নির্মাণ করে । লক্ষ্য রাখতে হবে যে marker এর জন্য position property ঠিক করতে
হবে যেন সেটি প্রদর্শিত হয়।
setMap( ) পদ্ধতি দ্বারা map এ marker যুক্তকরনঃ
উদাহরনঃ
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
Google Maps - Animate the Marker(Google Map এ Marker কে জীবন্তকরণ )
নিচের উদাহরণ টি দ্বারা দেখানো হয়েছে কিভাবে Google Map এ Marker কে জীবন্তকরণ করা হয়।
var marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Google Maps - Icon Instead of Marker(Google Map এ Marker এর পরিবর্তে Icon ব্যাবহার)
উদাহরনঃ
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Google Maps - Polyline( Google Map এ Polyline এর ব্যাবহার)
Polyline হচ্ছে একটি line যেটি এক সারি স্থানাঙ্ক যা ক্রমধারা তে থাকে।
polyline নিম্নোক্ত properties অনুসরন করে।
১) path- এটি line এর স্থানাঙ্ক দ্বারা latitude/longitude নির্দেশ করে
২) strokeColor- এটি line এর জন্য hexadecimal color নির্দেশ করে যেমনঃ (এর ধরন : "#FFFFFF")
৩) strokeOpacity- এটি line এর অস্বচ্ছতা নির্দেশ করে । এর value 0.0 থেকে 1.0 এর মধ্যে হয়।
৪) strokeWeight- line এর weight কে pixel একক দ্বারা নির্দিষ্ট করে।
৫) editable- line টি ব্যাবহারকারী দ্বারা editable(পরিবর্তন যোগ্য) কিনা তা নির্ধারণ করে।
উদাহরনঃ
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Google Maps - Polygon(Google Map এ Polygon এর ব্যাবহার)
Polyline এর মত Polygon ও এক সারি সুবিন্যস্ত স্থানাঙ্ক দ্বারা গঠিত হয়। তবে Polygon কে এমন ভাবে রূপ দেয়া হয় যেন তা
closed loop এলাকা কে নির্দেশ করে ।
Polygon গুলি সোজা line দ্বারা তৈরি হয় এবং এটি "closed"।
Polygon নিম্নোক্ত properties অনুসরণ করেঃ
path- এটি line এর latitude/longitude স্থানাঙ্ক নির্দিষ্ট করে।(প্রথম এবং শেষ স্থানাঙ্ক একই হয়)
strokeColor- এটি line এর জন্য hexadecimal color নির্দিষ্ট করে । (এর ধরন : "#FFFFFF")
strokeOpacity- line এর অস্বচ্ছতা নির্দেশ করে । value 0.0 থেকে 1.0 এর মধ্যে হয়।
strokeWeight- line এর weight কে pixel একক দ্বারা নির্দিষ্ট করে।
fillColor- এটি একটি বদ্ধ এলাকার জন্য hexadecimal color নির্দিষ্ট করে । (এর ধরন : "#FFFFFF")
fillOpacity-এটি দ্বারা পরিপূর্ণ color এর অস্বচ্ছতা নির্দেশ করে। এর value 0.0 থেকে 1.0 এর মধ্যে হয়।
editable- line টি ব্যাবহারকারী দ্বারা editable(পরিবর্তন যোগ্য) কিনা তা নির্দেশ করে ।
উদাহরনঃ
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
});
Google Maps - Circle(Google Maps- বৃত্ত )
একটি Circle নিম্নোক্ত properties এ follow করে।
center- এটি google.map এর latitude/longitude কে circle এর কেন্দ্রে নির্দিষ্ট করে ।
radius- circle এর ব্যাসার্ধ কে meter একক এ প্রকাশ করে।
strokeColor - circle এর চারপাশের line টি hexadecimal color দ্বারা নির্দিষ্ট হয়। (এর ধরন : "#FFFFFF")
strokeOpacity- stroke color এর অস্বচ্ছতা নির্দিষ্ট করে। এর value 0.0 থেকে 1.0 এর মধ্যে হয়।
strokeWeight-line এর weight কে pixel একক দ্বারা নির্দিষ্ট করে ।
fillColor- circle এর ভিতরের এলাকার জন্য একটি hexadecimal color নির্দিষ্ট করে । (এর ধরন : "#FFFFFF")
fillOpacity- অভ্যন্তরীণ color এর অস্বচ্ছতা নির্দেশ করে। এর value 0.0 থেকে 1.0 এর মধ্যে হয়।
editable- এটি নির্দেশ করে যে circle টি ব্যাবহারকারী দ্বারা editable(পরিবর্তনযোগ্য) কিনা।
উদাহরণঃ
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - InfoWindow(Google Map এ InfoWindow এর ব্যাবহার)
এটি marker এর কিছু text কে InfoWindow তে দেখায়।
উদাহরনঃ
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
Thank you for reading......
