Paste the translated text here
Google Maps- কি?Google Maps- এ আপনি সর্বদা আপনার ওয়েব সাইটে মানচিত্র প্রদর্শন করতে পারবেন:
Google Maps API
এই টিউটোরিয়ালটি গুগল ম্যাপস এপিআই (অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস) সম্পর্কে.
গুগল ম্যাপস এপিআইর সঙ্গে, আপনি আপনার মানচিত্র এবং মানচিত্র তথ্য. নিজের মতো করে (কিছু) পরিবর্তন করতে পারেন,.
একটি API সফ্টওয়্যার অ্যাপ্লিকেশন নির্মাণের জন্য যে পদ্ধতি এবং সরঞ্জাম ব্যবহার করা যেতে পারে তার একটি সংকলন.
Google Maps- এ প্রাথমিক ধারনা
একটি মৌলিক গুগল ম্যাপ তৈরি করুন
লন্ডন, ইংল্যান্ড কেন্দ্রিক একটি Google ম্যাপ:তৈরি করে এই উদাহরণটি করাঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script><script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
এটা নিজে চেষ্টা করে দেখুন»
এই পৃষ্ঠার বাকি অংশ উপরের উদাহরণে ধাপে ধাপে বর্ণনা করা হলো.
1. Load the Google API
গুগল ম্যাপস এপিআই জাভাস্ক্রিপ্ট লাইব্রেরি. এটি একটি স্ক্রিপ্ট ট্যাগের সঙ্গে একটি ওয়েব পৃষ্ঠা যোগ করা যেতে পারে:
<script src="http://maps.googleapis.com/maps/api/js"></script>
2. মানচিত্রের বৈশিষ্ট্য ঠিক করা
মানচিত্র আরম্ভ করার জন্য একটি ফাংশন তৈরি করুন:
function initialize() {
}
ফাংশনের শুরুতে, মানচিত্র জন্য বৈশিষ্ট্য নির্ধারণ করতে একটি বস্তু (mapProp) তৈরি করতে হবে:
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
কেন্দ্রিয় ভূসম্পত্তিটি নির্দিষ্ট করে যেখানে ম্যাপ কেন্দ্র. একটি নির্দিষ্ট বিন্দু ম্যাপ কেন্দ্র একটি অক্ষাংশ দ্রাঘিমাংশ বস্তুর তৈরি করুন. যাতে স্থানাঙ্ক পাস: অক্ষাংশ, দ্রাঘিমাংশ.
zoom ভূসম্পত্তিটি নির্ধারণ করে মানচিত্রের zoom স্তর . zoom: 0 পৃথিবীর একটি মানচিত্র zoomed out সম্পূর্ণরূপে দেখায়. উচ্চ zoom স্তর একটি উচ্চ রেজল্যুশনের zoom.
MapTypeId সম্পত্তি প্রদর্শন মানচিত্র ধরন নির্ধারণ করা হয়.
নিম্নলিখিত মানচিত্র ধরনের সমর্থিত হবে:
রোডম্যাপ (স্বাভাবিক, ডিফল্ট 2D ম্যাপ)
উপগ্রহ (ফোটোগ্রাফিক ম্যাপ)
হাইব্রীড (ফোটোগ্রাফিক মানচিত্র + + সড়ক ও শহরের নাম)
ভূখণ্ড (ইত্যাদি পাহাড়, নদী, সঙ্গে ম্যাপ)
3. একটি মানচিত্র ধারক তৈরি করুন
মানচিত্রে "contain" একটি নামে <div> এলিমেন্ট তৈরি করুন. আকার উপাদান CSS ব্যবহার করুন:
উদাহরণ
<div id="googleMap" style="width:500px;height:380px;"></div>
4. একটি মানচিত্রের লক্ষ্য তৈরি করুন
উদাহরণঃ
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
5. মানচিত্র লোড করার একটি Event Listener যোগ করুন
উইন্ডো লোড (পৃষ্ঠা লোড করা হয়) উপর আরম্ভ () ফাংশন চালানো হবে যে একটি DOM শ্রোতা যুক্ত করুন:
google.maps.event.addDomListener(window, 'load', initialize);
Asynchronously Loading
এটির সাহায্যে গুগল ম্যাপস এপিআই লোড করা সম্ভব.
উদাহরণ নিচে পাতা সম্পূর্ণরূপে লোডের পর গুগল ম্যাপস এপিআই লোড window.onload ব্যবহার করে.
LoadScript () ফাংশন গুগল ম্যাপস এপিআই <script> ট্যাগ সৃষ্টি করে. API- টি সম্পূর্ণরূপে লোড হয় উপরন্তু, কলব্যাক = আরম্ভ পরামিতি আরম্ভ () ফাংশন চালানো URL এর শেষে যোগ করা হয়েছে:
<!DOCTYPE html>
<html>
<head>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
function loadScript()
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
</body>
</html>
এটা নিজে চেষ্টা করে দেখুন»
একাধিক মানচিত্র
উদাহরণস্বরূপ নিচের ওয়েব পৃষ্ঠা (বিভিন্ন মানচিত্র ধরনের সঙ্গে চার মানচিত্র) চার মানচিত্র সংজ্ঞায়িত:
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var mapProp3 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var mapProp4 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap2" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap3" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap4" style="width:400px;height:300px;"></div>
</body>
</html>
এটা নিজে চেষ্টা করে দেখুন»
Google API Key
Google allows your web site to call any Google API, many thousand times per day.
গুগল সর্বদা আপনার ওয়েব সাইটে যে কোন গুগল এপিআই, প্রতিদিন অনেক হাজার হাজার গুণ কল করতে পারবেন.
আপনি ভারী ট্রাফিকের জন্য পরিকল্পনা, আপনি গুগল থেকে একটি বিনামূল্যে API Key পাওয়া উচিত.
একটি বিনামূল্যে Key পেতে https://console.developers.google.com এ যান.
যেখানেএকটি API লোড হয় সেখানে Google Maps- key parameter এর মধ্যে API key টি খুঁজে পেতেআশা করে
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script> |
