মানচিত্র যে কোনও ব্যবসায়ের ওয়েবসাইটের একটি প্রয়োজনীয় দিক। এমনকি আপনি সম্পূর্ণ ইন্টারনেট-ভিত্তিক, গ্রাহকরা এখনও আপনি কে এবং আপনি কোথায় থাকেন তা জানতে আগ্রহী। গুগল ম্যাপ এখন অনেক ওয়েবসাইটের জন্য ডিফল্ট কারণ এটি ব্যবহার করা সবচেয়ে সহজ, আপাতদৃষ্টিতে সবচেয়ে নির্ভুল এবং নিখরচায়। এই টিউটোরিয়ালটির শেষে, আপনি কীভাবে আপনার ওয়েবসাইটে একটি প্রতিক্রিয়াশীল গুগল ম্যাপ এম্বেড করবেন ঠিক তা জানতে পারবেন।
ডিফল্ট গুগল ম্যাপ সবসময় প্রতিক্রিয়াশীল না তাই বিভিন্ন স্ক্রিন আকারে স্কেল নাও করতে পারে। আপনি ওয়ার্ডপ্রেস প্লাগইন ব্যবহার করছেন বা কোড ব্যবহার করে নিজেকে এম্বেড করছেন কিনা তার উপর নির্ভর করে মানচিত্রটিকে প্রতিক্রিয়াশীল করার জন্য সিএসএসের কয়েকটি লাইন যুক্ত করতে হতে পারে।
প্রতিক্রিয়াশীল ওয়েব ডিজাইন
প্রতিক্রিয়াশীল এখানে একটি মূল শব্দ। এটি ওয়েব ডিজাইনকে বর্ণনা করে যা ওয়েবসাইটটি অ্যাক্সেস করতে আপনি কোন ডিভাইস ব্যবহার করেন তা নির্বিশেষে এটি নিশ্চিত করার জন্য ব্যবহারকারীর অভিজ্ঞতা এবং ডিভাইসটিকে বিবেচনা করে। উদাহরণস্বরূপ, একটি প্রতিক্রিয়াশীল ওয়েবসাইটের আপনি একই মানের মানের অভিজ্ঞতা সরবরাহ করা উচিত যা আপনি এটি কোনও ডেস্কটপ, ট্যাবলেট বা স্মার্টফোনে দেখেছেন কিনা।
এটি করার জন্য, ওয়েবসাইটটিকে বিভিন্ন রেজোলিউশন, স্ক্রিন আকার এবং স্পর্শের সাথে মানিয়ে নিতে হবে।
একটি ওয়েবসাইটে একটি প্রতিক্রিয়াশীল গুগল ম্যাপ এম্বেড করা
গুগল ম্যাপকে কোনও ওয়েবসাইটে এম্বেড করার জন্য আমি তিনটি উপায় জানি। আপনি যদি ওয়ার্ডপ্রেস থিম ব্যবহার করেন তবে এতে বৈশিষ্ট্যটি অন্তর্নির্মিত থাকতে পারে You আপনি একটি প্লাগইন ব্যবহার করতে পারেন বা গুগল থেকে সরাসরি কোনও ওয়েবসাইটের মধ্যে কোড এম্বেড করতে পারেন। প্রথম এবং দ্বিতীয় বিকল্পগুলি ওয়ার্ডপ্রেস ব্যবহারকারীদের জন্য দুর্দান্ত, অন্যান্য সিএমএস প্লাগিনগুলিও ব্যবহার করে যাতে আপনি সেখানে আচ্ছাদিত থাকেন। কোড ব্যবহার করে চূড়ান্ত বিকল্পটি বেশিরভাগ ওয়েবসাইটগুলিতে কীভাবে তৈরি হয় তা নির্বিশেষে কাজ করা উচিত।
একটি প্রতিক্রিয়াশীল গুগল ম্যাপ এম্বেড করতে একটি ওয়ার্ডপ্রেস থিম ব্যবহার করুন
কিছু ওয়ার্ডপ্রেস থিমের বিশেষত গুগল ম্যাপের বৈশিষ্ট্য থাকবে have আধুনিক ওয়েবসাইটগুলির জন্য মানচিত্রগুলি যেমন একটি মৌলিক, তাই কিছু থিম ডিজাইনার এগুলি তাদের নকশায় সরাসরি প্রয়োগ করেছেন। যদি আপনার থিমের মানচিত্রের বৈশিষ্ট্য রয়েছে, এটি কাজ করার জন্য আপনার সম্ভবত একটি গুগল ম্যাপস এপিআই দরকার হবে। আপনি থিম বিকল্পগুলিতে এপিআই যুক্ত করুন এবং এটি প্রতিটি দর্শনে মানচিত্র তৈরি করতে সরাসরি গুগলে কথা বলবে।
- এপিআই প্রক্রিয়া শুরু করতে গুগল ওয়েবসাইটে এই পৃষ্ঠাটি দেখুন।
- নীল রঙের শুরু করুন বোতামটি নির্বাচন করুন।
- নতুন স্ক্রিনের উপরের বামদিকে তিনটি লাইন মেনু আইকনটি নির্বাচন করুন।
- API এবং পরিষেবাদি এবং তারপরে শংসাপত্রগুলি নির্বাচন করুন।
- শংসাপত্র তৈরি করুন এবং তারপরে API কী নির্বাচন করুন।
- সীমাবদ্ধ কী নির্বাচন করুন এবং এইচটিটিপি রেফারার নির্বাচন করুন।
- সংরক্ষণ নির্বাচন করুন।
- এপিআই কীটি অনুলিপি করুন এবং এটির প্রয়োজনীয় ডিজাইন বিকল্প পৃষ্ঠাতে আটকান।
আপনার একবার এপিআই কী হয়ে গেলে আপনি থিম ডিজাইন সরঞ্জাম ব্যবহার করে আপনার ওয়েবসাইটটিতে গুগল ম্যাপ প্রয়োগ করতে পারেন। থিমটি যতক্ষণ প্রতিক্রিয়াশীল ততক্ষণ মানচিত্রটিও হওয়া উচিত।
একটি প্রতিক্রিয়াশীল Google মানচিত্র এম্বেড করতে একটি প্লাগইন ব্যবহার করুন
ওয়ার্ডপ্রেস প্লাগইন ব্যবহার করে, জুমলা এক্সটেনশন ব্যবহার করে, দ্রুপাল মডিউল বা প্লাগইন ব্যবহার করে এবং অন্যান্য সিএমএস অনুরূপ নামকরণ কনভেনশন ব্যবহার করে। যে কোনও উপায়ে, প্লাগইনগুলি এমন মডুলার উপাদানগুলিকে উল্লেখ করে যা আপনি বৈশিষ্ট্যগুলি যুক্ত করতে আপনার মূল সিএমএসের উপর চাপ দিতে পারেন। একটি দরকারী বৈশিষ্ট্য হ'ল গুগল ম্যাপ। যদি আপনার ওয়েবসাইটের থিমটিতে কোনও মানচিত্রের উপাদান অন্তর্ভুক্ত না থাকে এবং আপনি নিজে কোডটি করতে চান না, তবে একটি প্লাগইন পরবর্তী সেরা জিনিস।
- ওয়ার্ডপ্রেসে, প্লাগইনগুলিতে নেভিগেট করুন এবং নতুন যুক্ত করুন।
- গুগল ম্যাপের জন্য অনুসন্ধান করুন এবং আপনার পছন্দ মতো একটি প্লাগইন নির্বাচন করুন।
- এটি প্লাগইনগুলির মধ্যে সক্ষম করুন এবং এর সেটিংসে যান।
- উপরে উল্লিখিত Google মানচিত্র API যুক্ত করুন যেখানে নির্দেশিত এবং সংরক্ষণ করা হয়েছে।
- আপনি যেখানেই মানচিত্রটি প্রদর্শিত হতে চান প্লাগইনটি প্রয়োগ করুন।
অন্যান্য সিএমএসের নামকরণ এবং মেনু অবস্থানগুলিতে কিছুটা পৃথক হলেও নীতিটি অনেকটা একই। বেশিরভাগ, সমস্ত কিছু না থাকলে, মানচিত্র প্লাগইনগুলিতে কাজ করার জন্য Google মানচিত্র এপিআই প্রয়োজন হবে require
একটি প্রতিক্রিয়াশীল গুগল ম্যাপ এম্বেড করতে কোড ব্যবহার করুন
আপনি যদি ওয়ার্ডপ্রেস বা অন্যান্য সিএমএস ব্যবহার না করেন তবে আপনি এখনও একটি প্রতিক্রিয়াশীল Google মানচিত্র এম্বেড করতে পারেন। আপনাকে কেবল মডিউলটির পরিবর্তে কোড ব্যবহার করতে হবে। এটি একটু বেশি কাজ নেয় তবে একই প্রতিক্রিয়াশীল মানচিত্র সরবরাহ করবে।
- গুগল ম্যাপে যান এবং আপনি যে মানচিত্রটি প্রদর্শন করতে চান সেই স্ক্রিনটি পূরণ না হওয়া পর্যন্ত নেভিগেট করুন।
- নীল ভাগের লিঙ্কটি নির্বাচন করুন এবং এম্বেড মানচিত্র থেকে কোডটি অনুলিপি করুন।
- নীচে এবং এর মধ্যে কোডটিতে আপনার নির্দিষ্ট এম্বেড কোড যুক্ত করুন।
- আপনার ওয়েব পৃষ্ঠার HTML এর মধ্যে কোডটি যুক্ত করুন যেখানে আপনি মানচিত্রটি দেখতে চান।
- আপনার পরিবর্তনগুলি সংরক্ষণ করুন।
কোড:
এটি আমার কোড নয়, আমি এটি অনলাইনে খুঁজে পেয়েছি তবে এটি আমার ওয়েবসাইটে পরীক্ষিত। এটি একটি কবজির মতো কাজ করে এবং আপনি যদি কোনও সিএমএস, এইচটিএমএল, হুগো বা অন্য অনেকগুলি ওয়েবসাইটের ভাষা বা পৃষ্ঠা সরঞ্জাম ব্যবহার করেন তবে তা কাজ করা উচিত।
