কিভাবে আপনার ওয়েব পেজ একটি গুগল মান যোগ করুন

05 এর 01

আপনার সাইটের জন্য একটি Google মানচিত্র API কী পান

আপনার ওয়েবসাইটে Google মানচিত্র যোগ করার সর্বোত্তম উপায় হল Google Maps API ব্যবহার করা। এবং Google মানচিত্রগুলি ব্যবহার করার জন্য আপনাকে একটি API কীটি প্রস্তাব করে।

আপনি Google মানচিত্র API v3 ব্যবহার করতে একটি API কী পেতে প্রয়োজন হয় না, তবে এটি আপনার ব্যবহারের নিরীক্ষণ এবং অতিরিক্ত অ্যাক্সেসের জন্য অর্থ প্রদান করার জন্য এটি অত্যন্ত উপযোগী। গুগল ম্যাপস এপিআই v3 এর প্রতি দিনে প্রতি সর্বোচ্চ ২5,000 টি অনুরোধের প্রতি ব্যবহারকারী প্রতি সেকেন্ডে এক অনুরোধ রয়েছে। আপনার পৃষ্ঠাগুলি যদি ঐ সীমা অতিক্রম করে তবে আরও বেশি পেতে হলে আপনাকে বিলিং সক্ষম করতে হবে।

কিভাবে একটি Google মানচিত্র API কী পেতে

1. আপনার Google অ্যাকাউন্ট ব্যবহার করে Google এ লগ ইন করুন।
2. বিকাশকারী কনসোলে যান
3. তালিকাটি স্ক্রোল করুন এবং Google মানচিত্র API v3 খুঁজে বের করুন, তারপর এটি চালু করতে "OFF" বোতামটি ক্লিক করুন।
4. শর্তাবলী পড়ুন এবং সম্মত হন।
5. API কনসোলে যান এবং বাম দিকের মেনু থেকে "API প্রবেশ করুন" নির্বাচন করুন
6. "সাধারণ API অ্যাক্সেস" বিভাগে, "নতুন সার্ভার কী তৈরি করুন ..." বোতামে ক্লিক করুন।
7. আপনার ওয়েব সার্ভারের IP ঠিকানা লিখুন এই আইপি যেখানে আপনার মানচিত্র অনুরোধ থেকে আসছে হবে। আপনি যদি আপনার IP ঠিকানা জানেন না, আপনি এটি দেখতে পারেন।
8. "API কী:" লাইনের লেখাটি অনুলিপি করুন (যে শিরোনাম সহ নয়)। এটি আপনার মানচিত্রের জন্য আপনার API কী।

02 এর 02

কোঅর্ডিনেটস আপনার ঠিকানা রূপান্তর

আপনার ওয়েব পেজগুলিতে Google মানচিত্র ব্যবহার করার জন্য, আপনার অবস্থানের জন্য অক্ষাংশ এবং দ্রাঘিমাংশ থাকা প্রয়োজন। আপনি একটি জিপিএস থেকে এই পেতে পারেন অথবা আপনি Geocoder.us মত একটি অনলাইন টুল ব্যবহার করতে পারেন আপনি বলতে।

1. Geocoder.us এ যান এবং অনুসন্ধান বাক্সে আপনার ঠিকানায় টাইপ করুন।
2. অক্ষাংশের প্রথম সংখ্যা (সামনে একটি চিঠি ছাড়া) অনুলিপি করুন এবং এটি একটি টেক্সট ফাইলে আটকান। আপনি ডিগ্রি (º) সূচক প্রয়োজন নেই
3. দ্রাঘিমাংশের প্রথম সংখ্যাটি অনুলিপি করুন (আবার কোনো অক্ষর না দিয়ে) এবং আপনার পাঠ্য ফাইলের মধ্যে এটি আটকান।

আপনার অক্ষাংশ এবং দ্রাঘিমাংশ এই রকম কিছু দেখবে:

40.756076
-73,990838

Geocoder.us শুধুমাত্র মার্কিন ঠিকানা জন্য কাজ করে, যদি আপনি অন্য দেশে কোঅর্ডিনেটস পেতে প্রয়োজন, আপনি আপনার অঞ্চলের একটি অনুরূপ টুল জন্য অনুসন্ধান করা উচিত।

03 এর 03

আপনার ওয়েব পেজে মানচিত্র যোগ করা

প্রথমে, ম্যাপ স্ক্রিপ্টটি যুক্ত করুন

আপনার ডকুমেন্ট এর

আপনার ওয়েবপৃষ্ঠাটি খুলুন এবং আপনার নথির শীর্ষে নিম্নলিখিতটি যোগ করুন।

আপনি দুই ধাপে লিখেছেন অক্ষাংশ এবং দ্রাঘিমাংশের সংখ্যাগুলিতে হাইলাইট অংশটি পরিবর্তন করুন।

দ্বিতীয়ত, আপনার পৃষ্ঠাতে ম্যাপ উপাদান যোগ করুন

একবার আপনার স্ক্রিপ্টের উপাদানগুলি আপনার ডকুমেন্টের HEAD এ যোগ করা হলে, আপনাকে পৃষ্ঠাতে আপনার মানচিত্রের অবস্থান নির্ধারণ করতে হবে। আপনি আইডি = "মানচিত্র-ক্যানভাস" অ্যাট্রিবিউটের সাহায্যে DIV উপাদান যুক্ত করে এটি করেন। আমি আপনাকে এই পৃষ্ঠাটি প্রস্থ এবং উচ্চতা যা আপনার পৃষ্ঠায় মাপসই হবে স্টাইল সুপারিশ:

অবশেষে, আপলোড এবং পরীক্ষা

শেষ কাজটি আপনার পৃষ্ঠাটি আপলোড করে পরীক্ষা করে যে আপনার মানচিত্রটি প্রদর্শিত হয়। এখানে পৃষ্ঠার একটি Google মানচিত্রের একটি উদাহরণ। নোট, কারণ উপায়ে সিএমএস কাজ করে, আপনি ম্যাপ প্রদর্শিত হতে একটি লিঙ্ক ক্লিক করতে হবে। এই আপনার পৃষ্ঠায় ক্ষেত্রে হবে না।

যদি আপনার মানচিত্রটি দেখা যায় না, তাহলে এটি একটি বিডি অ্যাট্রিবিউটের সাহায্যে শুরু করার চেষ্টা করুন:

onload = "আরম্ভ ()" >

আপনার মানচিত্রটি লোড হচ্ছে কিনা তা পরীক্ষা করতে অন্যান্য জিনিসগুলি অন্তর্ভুক্ত করে:

• আপনার জাভাস্ক্রিপ্ট মধ্যে টাইপস দেখুন, কেস সহ। জাভাস্ক্রিপ্ট কেস সংবেদনশীল হয়।
• নিশ্চিত করুন যে আপনার জুম এবং কেন্দ্র বিকল্প সেট আছে।
• নিশ্চিত করুন যে আপনার DIV উপাদানটি সঠিক আইডি দিয়ে পৃষ্ঠাটিতে রয়েছে।
• আপনার DIV উপাদান একটি উচ্চতা আছে তা নিশ্চিত করুন।

04 এর 05

আপনার মানচিত্রে একটি চিহ্নিতকারী যোগ করুন

কিন্তু আপনার অবস্থানের একটি মানচিত্রটি যদি কোন মার্কারকে বলছে যেখানে তারা যেতে চান তবে কি ভাল?

একটি আদর্শ Google মানচিত্র লাল চিহ্নিতকারী যোগ করতে var মানচিত্র = ... লাইন নীচে আপনার স্ক্রিপ্ট নিম্নলিখিত যোগ করুন:

var myLatlng = নতুন google.maps.LatLng ( অক্ষাংশ, দ্রাঘিমাংশ );
var মার্কার = নতুন google.maps.Marker ({
অবস্থান: myLatlng,
মানচিত্র: মানচিত্র,
শিরোনাম: " সাবেক হেডকোয়ার্টার প্রাক্তন "
});

হাইলাইট করা পাঠ্য আপনার অক্ষাংশ এবং দ্রাঘিমাংশে পরিবর্তন করুন এবং শিরোনামটি যখন আপনি মার্কারের উপর ঝাঁপিয়ে পড়তে চাইবেন।

আপনি চাইলে পৃষ্ঠায় যতগুলি মার্কার যোগ করতে পারেন, নতুন কোয়েরি এবং শিরোনামগুলির সাথে নতুন ভেরিয়েবল যুক্ত করুন, তবে যদি সব মার্কারগুলি প্রদর্শনের জন্য মানচিত্র খুব ছোট হয় তবে পাঠক জুম আউট না হওয়া পর্যন্ত তারা তা প্রদর্শন করবে না।

var latlng 2 = নতুন google.maps.LatLng ( 37.3316591, -12২.0301778 );
var myMarker 2 = নতুন google.maps.Marker ({
অবস্থান: latlng 2 ,
মানচিত্র: মানচিত্র,
শিরোনাম: " অ্যাপল কম্পিউটার "
});

এখানে একটি মার্কার সঙ্গে একটি গুগল ম্যাপ উদাহরণ। নোট, কারণ উপায়ে সিএমএস কাজ করে, আপনাকে ম্যাপটি প্রদর্শিত হওয়ার জন্য একটি লিঙ্ক ক্লিক করতে হবে। এই আপনার পৃষ্ঠায় ক্ষেত্রে হবে না।

05 এর 05

আপনার পৃষ্ঠাতে একটি দ্বিতীয় (বা আরও) মানচিত্র যোগ করুন

যদি আপনি আমার দৃষ্টিকোণ Google মানচিত্র পৃষ্ঠাতে দেখে থাকেন তবে আপনি লক্ষ্য করবেন যে আমার কাছে পৃষ্ঠায় প্রদর্শিত একাধিক মানচিত্র রয়েছে। এটা করতে খুব সহজ। এখানে কিভাবে।

1. আমরা এই টিউটোরিয়াল এর ধাপ 2 এ শিখেছি হিসাবে আপনি প্রদর্শন করতে চান যে সব মানচিত্র অক্ষাংশ এবং দ্রাঘিমাংশ পেতে।
2. আমরা এই টিউটোরিয়াল এর ধাপ 3 শিখেছি হিসাবে প্রথম মানচিত্র ঢোকান। যদি আপনি একটি মানচিত্রের মানচিত্রটি চান, তবে পদক্ষেপ 4 হিসাবে মার্কারটি জুড়ুন।
3. দ্বিতীয় মানচিত্রের জন্য, আপনাকে আপনার () স্ক্রিপ্ট আরম্ভ করতে 3 টি নতুন লাইন যুক্ত করতে হবে:
   var latlng2 = নতুন google.maps.LatLng ( দ্বিতীয় সমন্বয় );
   var myOptions2 = {জুম: 18, কেন্দ্র: latlng2, মানচিত্র টাইপ আইডি: google.maps.MapTypeId.ROADMAP};
   var map2 = নতুন google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. যদি আপনি নতুন মানচিত্রে একটি মার্কার চান, দ্বিতীয় দিক নির্দেশক এবং দ্বিতীয় মানচিত্রের দিকে নির্দেশ করে একটি দ্বিতীয় চিহ্নিতকারী যোগ করুন:
   var myMarker2 = নতুন google.maps.Marker ({অবস্থান: latlng2 , মানচিত্র: map2 , শিরোনাম: " আপনার চিহ্নিতকারী শিরোনাম "});
5. তারপর দ্বিতীয় যোগ করুন

   যেখানে আপনি দ্বিতীয় মানচিত্র চান। এবং এটি একটি id = "map_canvas_2" আইডি দিতে ভুলবেন না

6. যখন আপনার পৃষ্ঠা লোড হবে, তখন দুটি মানচিত্র প্রদর্শিত হবে

এখানে দুটি Google মানচিত্র সহ একটি পৃষ্ঠা কোড: