এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

Google মানচিত্র প্ল্যাটফর্ম (জাভাস্ক্রিপ্ট) দিয়ে কাছাকাছি ব্যবসায়িক অনুসন্ধান পরিষেবা তৈরি করুন

1. আপনি শুরু করার আগে

একটি স্থানীয় ব্যবসায়িক অনুসন্ধান তৈরি করতে Google মানচিত্র প্ল্যাটফর্ম মানচিত্র এবং স্থান API ব্যবহার করতে শিখুন, যা ব্যবহারকারীকে ভূ-স্থানীয় করে এবং কাছাকাছি আকর্ষণীয় স্থানগুলি দেখায়৷ অ্যাপটি ভূ-অবস্থান, স্থানের বিবরণ, স্থানের ফটো এবং আরও অনেক কিছুকে একীভূত করে।

পূর্বশর্ত

HTML, CSS, এবং JavaScript এর প্রাথমিক জ্ঞান
একটি বিলিং অ্যাকাউন্ট সহ একটি প্রকল্প (আপনার কাছে এটি না থাকলে পরবর্তী ধাপে নির্দেশাবলী অনুসরণ করুন)।
নীচের সক্রিয়করণ পদক্ষেপের জন্য, আপনাকে মানচিত্র জাভাস্ক্রিপ্ট API এবং Places API সক্ষম করতে হবে।
উপরের প্রকল্পের জন্য একটি API কী।

Google Maps প্ল্যাটফর্ম দিয়ে শুরু করুন

আপনি যদি আগে Google মানচিত্র প্ল্যাটফর্ম ব্যবহার না করে থাকেন তবে Google মানচিত্র প্ল্যাটফর্মের সাথে শুরু করুন নির্দেশিকা অনুসরণ করুন বা নিম্নলিখিত পদক্ষেপগুলি সম্পূর্ণ করতে Google মানচিত্র প্ল্যাটফর্ম প্লেলিস্টের সাথে শুরু করুন:

একটি বিলিং অ্যাকাউন্ট তৈরি করুন।
একটি প্রকল্প তৈরি করুন।
Google মানচিত্র প্ল্যাটফর্ম API এবং SDK সক্ষম করুন (আগের বিভাগে তালিকাভুক্ত)৷
একটি API কী তৈরি করুন।

আপনি কি করবেন

একটি ওয়েবপৃষ্ঠা তৈরি করুন যা একটি Google মানচিত্র প্রদর্শন করে
ব্যবহারকারীর অবস্থানের উপর মানচিত্র কেন্দ্রীভূত
কাছাকাছি স্থান খুঁজুন এবং ক্লিকযোগ্য মার্কার হিসাবে ফলাফল প্রদর্শন
আনুন এবং প্রতিটি স্থান সম্পর্কে আরো বিস্তারিত দেখান

আপনি কি প্রয়োজন হবে

একটি ওয়েব ব্রাউজার, যেমন গুগল ক্রোম (প্রস্তাবিত), ফায়ারফক্স, সাফারি বা ইন্টারনেট এক্সপ্লোরার
আপনার প্রিয় পাঠ্য বা কোড সম্পাদক

নমুনা কোড পান

আপনার কমান্ড-লাইন ইন্টারফেস খুলুন (MacOS-এ টার্মিনাল বা Windows-এ কমান্ড প্রম্পট) এবং এই কমান্ড দিয়ে নমুনা কোড ডাউনলোড করুন:

git clone https://github.com/googlecodelabs/google-maps-nearby-search-js/

যদি এটি কাজ না করে, এই কোডল্যাবের জন্য সমস্ত কোড ডাউনলোড করতে নিম্নলিখিত বোতামটি ক্লিক করুন, তারপর ফাইলটি আনজিপ করুন:

কোডটি ডাউনলোড করুন

আপনি এইমাত্র ক্লোন বা ডাউনলোড করেছেন এমন ডিরেক্টরিতে পরিবর্তন করুন।

cd google-maps-nearby-search-js

stepN ফোল্ডারে এই কোডল্যাবের প্রতিটি ধাপের কাঙ্খিত শেষ অবস্থা থাকে। তারা রেফারেন্স জন্য আছে. কাজ নামক ডিরেক্টরিতে আপনার সমস্ত কোডিং work করুন।

2. একটি ডিফল্ট কেন্দ্র সহ একটি মানচিত্র তৈরি করুন৷

আপনার ওয়েব পৃষ্ঠায় একটি Google মানচিত্র তৈরি করার তিনটি ধাপ রয়েছে:

একটি HTML পৃষ্ঠা তৈরি করুন
একটি মানচিত্র যোগ করুন
আপনার API কী পেস্ট করুন

1. একটি HTML পৃষ্ঠা তৈরি করুন৷

নিচে এই ধাপে ম্যাপ তৈরি করা হল। মানচিত্রটি অস্ট্রেলিয়ার সিডনিতে অবস্থিত সিডনি অপেরা হাউসকে কেন্দ্র করে। যদি ব্যবহারকারী তাদের অবস্থান পাওয়ার অনুমতি অস্বীকার করে, মানচিত্রটি এই অবস্থানে ডিফল্ট হয় এবং এখনও আকর্ষণীয় অনুসন্ধান ফলাফল প্রদান করে।

আপনার work/ ফোল্ডারে ডিরেক্টরি পরিবর্তন করুন। কোডল্যাবের বাকি অংশ জুড়ে, work/ ফোল্ডারের সংস্করণে আপনার সম্পাদনা করুন।

cd work

work/ ডিরেক্টরিতে, index.html নামে একটি ফাঁকা ফাইল তৈরি করতে আপনার পাঠ্য সম্পাদক ব্যবহার করুন।
নিচের কোডটি index.html এ কপি করুন।

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Sushi Finder</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
    #map {
      height: 100%;
      background-color: grey;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    /* TODO: Step 4A1: Make a generic sidebar. */
  </style>
</head>

<body>
  <!-- TODO: Step 4A2: Add a generic sidebar -->

  <!-- Map appears here -->
  <div id="map"></div>

  <!-- TODO: Step 1B, Add a map -->
</body>

</html>

আপনার ওয়েব ব্রাউজারে index.html ফাইলটি খুলুন।

open index.html

2. একটি মানচিত্র যোগ করুন

এই বিভাগটি আপনাকে দেখায় কিভাবে আপনার ওয়েব পৃষ্ঠায় Maps JavaScript API লোড করতে হয় এবং আপনার নিজস্ব JavaScript লিখতে হয় যা ওয়েব পৃষ্ঠায় একটি মানচিত্র যোগ করতে API ব্যবহার করে।

এই স্ক্রিপ্ট কোড যোগ করুন যেখানে আপনি  map ডিভের পরে এবং ক্লোজ </body> ট্যাগের আগে।

step1/index.html

<!-- TODO: Step 1B, Add a map -->
<script>
    /* Note: This example requires that you consent to location sharing when
     * prompted by your browser. If you see the error "Geolocation permission
     * denied.", it means you probably did not give permission for the browser * to locate you. */

    /* TODO: Step 2, Geolocate your user
     * Replace the code from here to the END TODO comment with new code from
     * codelab instructions. */
    let pos;
    let map;
    function initMap() {
        // Set the default location and initialize all variables
        pos = {lat: -33.857, lng: 151.213};
        map = new google.maps.Map(document.getElementById('map'), {
            center: pos,
            zoom: 15
        });
    }
    /* END TODO: Step 2, Geolocate your user */
</script>

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

3. আপনার API কী পেস্ট করুন

 , অনুলিপি করুন এবং স্ক্রিপ্ট সোর্স ইউআরএল-এ কী প্যারামিটারের মানটি পূর্ব-প্রয়োজনীয়তার সময় তৈরি করা API কী দিয়ে প্রতিস্থাপন করুন।

step1/index.html

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

আপনি যে HTML ফাইলে কাজ করছেন সেটি সংরক্ষণ করুন।

এটা পরীক্ষা করো

আপনি যে ফাইলটি সম্পাদনা করছেন তার ব্রাউজার ভিউ পুনরায় লোড করুন৷ আপনি এখন একটি মানচিত্র দেখতে পাবেন যেখানে ধূসর আয়তক্ষেত্র আগে ছিল। আপনি যদি পরিবর্তে একটি ত্রুটি বার্তা দেখতে পান, নিশ্চিত করুন যে আপনি চূড়ান্ত <script> ট্যাগে আপনার নিজস্ব API কী দিয়ে " YOUR_API_KEY " প্রতিস্থাপন করেছেন। আপনার যদি ইতিমধ্যে একটি না থাকে তবে কীভাবে একটি API কী পেতে হয় তার জন্য উপরে দেখুন।

সম্পূর্ণ নমুনা কোড

এই বিন্দু পর্যন্ত এই প্রকল্পের জন্য সম্পূর্ণ কোড Github এ উপলব্ধ ।

3. আপনার ব্যবহারকারী জিওলোকেট করুন

এরপর, আপনি ম্যাপ জাভাস্ক্রিপ্ট API সহ আপনার ব্রাউজারের HTML5 জিওলোকেশন বৈশিষ্ট্য ব্যবহার করে Google মানচিত্রে ব্যবহারকারী বা ডিভাইসের ভৌগলিক অবস্থান প্রদর্শন করতে চান।

আপনি যদি মাউন্টেন ভিউ, ক্যালিফোর্নিয়া থেকে ব্রাউজ করছেন তবে এখানে একটি মানচিত্রের একটি উদাহরণ রয়েছে যা আপনার ভৌগলিক অবস্থান প্রদর্শন করে:

ভূ-অবস্থান কি?

ভূ-অবস্থান বলতে বিভিন্ন তথ্য-সংগ্রহ প্রক্রিয়ার মাধ্যমে ব্যবহারকারী বা কম্পিউটিং ডিভাইসের ভৌগলিক অবস্থানের সনাক্তকরণকে বোঝায়। সাধারণত, বেশিরভাগ ভূ-অবস্থান পরিষেবাগুলি এই অবস্থান নির্ধারণ করতে নেটওয়ার্ক রাউটিং ঠিকানা বা অভ্যন্তরীণ GPS ডিভাইস ব্যবহার করে। এই অ্যাপটি ব্যবহারকারীর অবস্থান নির্ধারণ করতে ওয়েব ব্রাউজারের W3C জিওলোকেশন স্ট্যান্ডার্ড navigator.geolocation প্রপার্টি ব্যবহার করে।

এটি নিজে চেষ্টা করো

মন্তব্যগুলির মধ্যে কোডটি প্রতিস্থাপন করুন TODO: Step 2, Geolocate your user -নির্দেশ করুন এবং END TODO: Step 2, Geolocate your user -নির্দেশ করুন:

step2/index.html

/* TODO: Step 2, Geolocate your user
    * Replace the code from here to the END TODO comment with this code
    * from codelab instructions. */
let pos;
let map;
let bounds;
let infoWindow;
let currentInfoWindow;
let service;
let infoPane;
function initMap() {
    // Initialize variables
    bounds = new google.maps.LatLngBounds();
    infoWindow = new google.maps.InfoWindow;
    currentInfoWindow = infoWindow;
    /* TODO: Step 4A3: Add a generic sidebar */

    // Try HTML5 geolocation
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
        pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
        };
        map = new google.maps.Map(document.getElementById('map'), {
        center: pos,
        zoom: 15
        });
        bounds.extend(pos);

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        infoWindow.open(map);
        map.setCenter(pos);

        /* TODO: Step 3B2, Call the Places Nearby Search */
    }, () => {
        // Browser supports geolocation, but user has denied permission
        handleLocationError(true, infoWindow);
    });
    } else {
    // Browser doesn't support geolocation
    handleLocationError(false, infoWindow);
    }
}

// Handle a geolocation error
function handleLocationError(browserHasGeolocation, infoWindow) {
    // Set default location to Sydney, Australia
    pos = {lat: -33.856, lng: 151.215};
    map = new google.maps.Map(document.getElementById('map'), {
    center: pos,
    zoom: 15
    });

    // Display an InfoWindow at the map center
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
    'Geolocation permissions denied. Using default location.' :
    'Error: Your browser doesn\'t support geolocation.');
    infoWindow.open(map);
    currentInfoWindow = infoWindow;

    /* TODO: Step 3B3, Call the Places Nearby Search */
}
/* END TODO: Step 2, Geolocate your user */
/* TODO: Step 3B1, Call the Places Nearby Search */

এটা পরীক্ষা করো

আপনার ফাইল সংরক্ষণ করুন.
আপনার পৃষ্ঠা পুনরায় লোড করুন.

আপনার ব্রাউজার এখন অ্যাপের সাথে আপনার অবস্থান শেয়ার করার জন্য আপনাকে অনুমতি চাইতে হবে।

এটি ত্রুটিটি সুন্দরভাবে পরিচালনা করে এবং সিডনিতে কেন্দ্রীভূত থাকে কিনা তা দেখতে একবার ব্লক করুন ক্লিক করুন৷
আবার পুনরায় লোড করুন এবং ভৌগলিক অবস্থান কাজ করে কিনা এবং মানচিত্রটিকে আপনার বর্তমান অবস্থানে নিয়ে যায় কিনা তা দেখতে অনুমতিতে ক্লিক করুন৷

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

Chrome-এ ক্লিক করুন এই পৃষ্ঠাটি আপনার অবস্থান ট্র্যাক করছে ঠিকানা বারে।

এটি একটি উইন্ডো নিয়ে আসে যা আপনার বর্তমান সেটিং বর্ণনা করে এবং আপনাকে ভবিষ্যতে ভিজিটের জন্য সেই সেটিংটি সাফ করার অনুমতি দেয়।

আপনি যে কোনো সময় বিভিন্ন ব্লকের হ্যান্ডলিং পরীক্ষা করতে চান এবং ভৌগলিক অবস্থানের অনুমতি দিতে চান ভবিষ্যতের ভিজিটের জন্য এই সেটিংস সাফ করুন ক্লিক করুন।

সম্পূর্ণ নমুনা কোড

এই বিন্দু পর্যন্ত এই প্রকল্পের জন্য সম্পূর্ণ কোড Github এ উপলব্ধ ।

4. কাছাকাছি স্থান অনুসন্ধান করুন

একটি কাছাকাছি অনুসন্ধান আপনাকে কীওয়ার্ড বা টাইপ দ্বারা একটি নির্দিষ্ট এলাকার মধ্যে স্থানগুলি অনুসন্ধান করতে দেয়৷ একটি কাছাকাছি অনুসন্ধানে সর্বদা একটি অবস্থান অন্তর্ভুক্ত করা আবশ্যক, যা দুটি উপায়ের একটিতে নির্দিষ্ট করা যেতে পারে:

একটি LatLngBounds বস্তু একটি আয়তক্ষেত্রাকার অনুসন্ধান এলাকা সংজ্ঞায়িত করে
একটি বৃত্তাকার এলাকা যা location বৈশিষ্ট্যের সংমিশ্রণ হিসাবে সংজ্ঞায়িত - একটি LatLng বস্তু হিসাবে বৃত্তের কেন্দ্রকে নির্দিষ্ট করে - এবং একটি ব্যাসার্ধ, মিটারে পরিমাপ করা হয়

PlacesService nearbySearch() পদ্ধতিতে একটি কল দিয়ে কাছাকাছি অনুসন্ধান শুরু করুন, যা PlaceResult বস্তুর একটি অ্যারে ফিরিয়ে দেবে।

উ: স্থান লাইব্রেরি লোড করুন

প্রথমে, স্থান লাইব্রেরি পরিষেবাগুলি অ্যাক্সেস করতে, libraries পরামিতি প্রবর্তন করতে আপনার স্ক্রিপ্ট উত্স URL আপডেট করুন এবং একটি মান হিসাবে places যোগ করুন৷

step3/index.html

<!-- TODO: Step 3A, Load the Places Library -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">

B. নিকটবর্তী স্থান অনুসন্ধানের অনুরোধে কল করুন এবং প্রতিক্রিয়া পরিচালনা করুন

এরপরে, একটি স্থান অনুসন্ধানের অনুরোধ তৈরি করুন। ন্যূনতম প্রয়োজনীয় ক্ষেত্রগুলি হল:

ন্যূনতম প্রয়োজনীয় ক্ষেত্রগুলি হল:

bounds , যা অবশ্যই একটি google.maps.LatLngBounds বস্তু হতে হবে যা আয়তক্ষেত্রাকার অনুসন্ধান এলাকা, বা একটি location এবং একটি radius নির্ধারণ করে; আগেরটি একটি google.maps.LatLng অবজেক্ট নেয় এবং পরবর্তীটি একটি সাধারণ পূর্ণসংখ্যা নেয় যা বৃত্তের ব্যাসার্ধকে মিটারে উপস্থাপন করে। সর্বাধিক অনুমোদিত ব্যাসার্ধ হল 50 000 মিটার। মনে রাখবেন যখন rankBy DISTANCE এ সেট করা থাকে, আপনাকে অবশ্যই একটি অবস্থান নির্দিষ্ট করতে হবে কিন্তু আপনি একটি ব্যাসার্ধ বা সীমা নির্দিষ্ট করতে পারবেন না।
নাম, প্রকার এবং ঠিকানা সহ কিন্তু সীমাবদ্ধ নয়, সেইসাথে গ্রাহক পর্যালোচনা এবং অন্যান্য তৃতীয় পক্ষের সামগ্রী, বা একটি type , যা ফলাফলগুলিকে নির্দিষ্ট প্রকারের সাথে মেলে এমন জায়গায় সীমাবদ্ধ করে এমন একটি keyword সমস্ত উপলব্ধ ক্ষেত্রের সাথে মিলিত হতে হবে৷ শুধুমাত্র একটি প্রকার নির্দিষ্ট করা যেতে পারে (যদি একাধিক প্রকার প্রদান করা হয়, তাহলে প্রথম এন্ট্রি অনুসরণকারী সকল প্রকার উপেক্ষা করা হয়)। সমর্থিত প্রকারের তালিকা দেখুন।

এই কোডল্যাবের জন্য, আপনি দূরত্ব অনুসারে অনুসন্ধান এবং র‌্যাঙ্ক ফলাফলের অবস্থান হিসাবে ব্যবহারকারীর বর্তমান অবস্থান ব্যবহার করবেন।

মন্তব্যে নিম্নলিখিত যোগ করুন TODO: Step 3B1 অনুসন্ধানে কল করতে এবং প্রতিক্রিয়া পরিচালনা করতে দুটি ফাংশন লিখতে।

কীওয়ার্ড sushi সার্চ টার্ম হিসাবে ব্যবহৃত হয়, কিন্তু আপনি এটি পরিবর্তন করতে পারেন। createMarkers ফাংশন সংজ্ঞায়িত করার কোড পরবর্তী বিভাগে প্রদান করা হয়েছে।

step3/index.html

/* TODO: Step 3B1, Call the Places Nearby Search */
// Perform a Places Nearby Search Request
function getNearbyPlaces(position) {
    let request = {
    location: position,
    rankBy: google.maps.places.RankBy.DISTANCE,
    keyword: 'sushi'
    };

    service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, nearbyCallback);
}

// Handle the results (up to 20) of the Nearby Search
function nearbyCallback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarkers(results);
    }
}

/* TODO: Step 3C, Generate markers for search results */

TODO: Step 3B2 3B2 মন্তব্যে initMap ফাংশনের শেষে এই লাইনটি যোগ করুন।

/* TODO: Step 3B2, Call the Places Nearby Search */
// Call Places Nearby Search on user's location
getNearbyPlaces(pos);

TODO: Step 3B3 3B3 মন্তব্যে handleLocationError ফাংশনের শেষে এই লাইনটি যোগ করুন।

/* TODO: Step 3B3, Call the Places Nearby Search */
// Call Places Nearby Search on the default location
getNearbyPlaces(pos);

C. অনুসন্ধান ফলাফলের জন্য মার্কার তৈরি করুন

একটি চিহ্নিতকারী একটি মানচিত্রে একটি অবস্থান সনাক্ত করে। ডিফল্টরূপে, একটি মার্কার একটি আদর্শ চিত্র ব্যবহার করে। মার্কার ইমেজ কাস্টমাইজ করার বিষয়ে তথ্যের জন্য, মার্কার দেখুন।

google.maps.Marker কনস্ট্রাক্টর একটি একক Marker options অবজেক্ট আক্ষরিক নেয়, মার্কারটির প্রাথমিক বৈশিষ্ট্যগুলি নির্দিষ্ট করে।

একটি মার্কার তৈরি করার সময় নিম্নলিখিত ক্ষেত্রগুলি বিশেষভাবে গুরুত্বপূর্ণ এবং সাধারণত সেট করা হয়:

position (প্রয়োজনীয়) চিহ্নিত করে একটি LatLng চিহ্নিত করে মার্কারের প্রাথমিক অবস্থান।
map (ঐচ্ছিক) যে মানচিত্রটিতে মার্কার স্থাপন করতে হবে তা নির্দিষ্ট করে। আপনি মার্কার নির্মাণের সময় মানচিত্রটি নির্দিষ্ট না করলে, মার্কারটি তৈরি করা হয়, কিন্তু মানচিত্রের সাথে সংযুক্ত (বা প্রদর্শিত) হয় না। আপনি মার্কার setMap() পদ্ধতিতে কল করে পরে মার্কার যোগ করতে পারেন।
মন্তব্যের পরে নিম্নলিখিত কোড যোগ করুন TODO: Step 3C প্রতিক্রিয়াতে ফিরে আসা স্থান প্রতি একটি মার্কারের জন্য অবস্থান, মানচিত্র এবং শিরোনাম সেট করুন। কেন্দ্র এবং সমস্ত চিহ্নিতকারী মানচিত্রে দৃশ্যমান তা নিশ্চিত করতে আপনি bounds ভেরিয়েবলের extend পদ্ধতিও ব্যবহার করেন।

step3/index.html

/* TODO: Step 3C, Generate markers for search results */
// Set markers at the location of each place result
function createMarkers(places) {
    places.forEach(place => {
    let marker = new google.maps.Marker({
        position: place.geometry.location,
        map: map,
        title: place.name
    });

    /* TODO: Step 4B: Add click listeners to the markers */

    // Adjust the map bounds to include the location of this marker
    bounds.extend(place.geometry.location);
    });
    /* Once all the markers have been placed, adjust the bounds of the map to
    * show all the markers within the visible area. */
    map.fitBounds(bounds);
}

/* TODO: Step 4C: Show place details in an info window */

এটা পরীক্ষা করো

পৃষ্ঠাটি সংরক্ষণ করুন এবং পুনরায় লোড করুন, এবং ভূ-অবস্থান অনুমতি দিতে অনুমতিতে ক্লিক করুন।

আপনি মানচিত্রের কেন্দ্র অবস্থানের চারপাশে 20টি পর্যন্ত লাল মার্কার দেখতে পাবেন।

পৃষ্ঠাটি আবার লোড করুন এবং এই সময় ভৌগলিক অবস্থানের অনুমতিগুলি ব্লক করুন৷

আপনি কি এখনও আপনার মানচিত্রের ডিফল্ট কেন্দ্রে ফলাফল পান (নমুনায়, ডিফল্টটি সিডনি, অস্ট্রেলিয়াতে)?

সম্পূর্ণ নমুনা কোড

এই বিন্দু পর্যন্ত এই প্রকল্পের জন্য সম্পূর্ণ কোড Github এ উপলব্ধ ।

5. চাহিদা অনুযায়ী স্থানের বিবরণ দেখান

একবার আপনার কাছে একটি জায়গার আইডি (আপনার কাছাকাছি অনুসন্ধানের ফলাফলের একটি ক্ষেত্র হিসাবে বিতরণ করা হয়েছে) হয়ে গেলে, আপনি জায়গাটির সম্পূর্ণ ঠিকানা, ফোন নম্বর এবং ব্যবহারকারীর রেটিং এবং পর্যালোচনার মতো অতিরিক্ত বিবরণের জন্য অনুরোধ করতে পারেন৷ এই কোডল্যাবে, আপনি সমৃদ্ধ স্থানের বিবরণ প্রদর্শনের জন্য একটি সাইডবার তৈরি করবেন এবং মার্কারগুলিকে ইন্টারেক্টিভ করে তুলবেন যাতে ব্যবহারকারী বিশদ দেখার জন্য স্থান নির্বাচন করতে পারে।

স্থানের বিশদ বিবরণ প্রদর্শনের জন্য আপনার একটি স্থানের প্রয়োজন, তাই এখানে একটি সাইডবারের জন্য কিছু সাধারণ কোড রয়েছে যা আপনি ব্যবহার করতে পারেন স্লাইড আউট করতে এবং স্থানের বিবরণ প্রদর্শন করতে যখন ব্যবহারকারী একটি মার্কারে ক্লিক করে।

TODO মন্তব্যের পরে style ট্যাগে নিম্নলিখিত কোডটি যোগ করুন TODO: Step 4A1 :

step4/index.html

/* TODO: Step 4A1: Make a generic sidebar */
/* Styling for an info pane that slides out from the left. 
    * Hidden by default. */
#panel {
    height: 100%;
    width: null;
    background-color: white;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
    transition: all .2s ease-out;
}

.open {
    width: 250px;
}

/* Styling for place details */
.hero {
    width: 100%;
    height: auto;
    max-height: 166px;
    display: block;
}

.place,
p {
    font-family: 'open sans', arial, sans-serif;
    padding-left: 18px;
    padding-right: 18px;
}

.details {
    color: darkslategrey;
}

a {
    text-decoration: none;
    color: cadetblue;
}

map ডিভের ঠিক আগে body বিভাগে, বিশদ প্যানেলের জন্য একটি ডিভ যোগ করুন।

<!-- TODO: Step 4A2: Add a generic sidebar -->
<!-- The slide-out panel for showing place details -->
<div id="panel"></div>

TODO: Step 4A3 4A3 কমেন্টের পরে initMap() ফাংশনে, infoPane ভেরিয়েবলটিকে এভাবে আরম্ভ করুন:

/* TODO: Step 4A3: Add a generic sidebar */
infoPane = document.getElementById('panel');

B. মার্কারগুলিতে ক্লিক শ্রোতা যোগ করুন

createMarkers ফাংশনে, প্রতিটি মার্কার তৈরি করার সাথে সাথে একটি ক্লিক লিসেনার যোগ করুন।

ক্লিক শ্রোতা সেই মার্কারের সাথে যুক্ত স্থান সম্পর্কে বিশদ সংগ্রহ করে এবং বিশদ প্রদর্শনের জন্য ফাংশনটিকে কল করে।

নিম্নলিখিত কোডটি createMarkers ফাংশনের ভিতরে কোড মন্তব্যে পেস্ট করুন TODO: Step 4B ।

showDetails পদ্ধতি পরবর্তী বিভাগে প্রয়োগ করা হয়েছে।

step4/index.html

/* TODO: Step 4B: Add click listeners to the markers */
// Add click listener to each marker
google.maps.event.addListener(marker, 'click', () => {
    let request = {
    placeId: place.place_id,
    fields: ['name', 'formatted_address', 'geometry', 'rating',
        'website', 'photos']
    };

    /* Only fetch the details of a place when the user clicks on a marker.
    * If we fetch the details for all place results as soon as we get
    * the search response, we will hit API rate limits. */
    service.getDetails(request, (placeResult, status) => {
    showDetails(placeResult, marker, status)
    });
});

addListener রিকোয়েস্টে, placeId প্রপার্টি বিশদ অনুরোধের জন্য একটি একক জায়গা নির্দিষ্ট করে এবং fields প্রোপার্টি হল ফিল্ডের নামের একটি অ্যারে যা আপনি সেই জায়গা সম্পর্কে ফেরত দিতে চান। আপনি অনুরোধ করতে পারেন এমন ক্ষেত্রগুলির একটি সম্পূর্ণ তালিকার জন্য, PlaceResult ইন্টারফেস দেখুন।

C. একটি তথ্য উইন্ডোতে স্থানের বিবরণ দেখান

একটি তথ্য উইন্ডো একটি মানচিত্রে একটি প্রদত্ত অবস্থানের উপরে একটি ডায়ালগে সামগ্রী (সাধারণত পাঠ্য বা চিত্র) প্রদর্শন করে। তথ্য উইন্ডোতে একটি বিষয়বস্তু এলাকা এবং একটি টেপারড স্টেম রয়েছে। কান্ডের অগ্রভাগ মানচিত্রে একটি নির্দিষ্ট স্থানে সংযুক্ত থাকে। সাধারণত, তথ্য উইন্ডোগুলি মার্কারগুলির সাথে সংযুক্ত থাকে তবে আপনি একটি নির্দিষ্ট অক্ষাংশ/দ্রাঘিমাংশে একটি তথ্য উইন্ডো সংযুক্ত করতে পারেন।

মন্তব্যে নিম্নলিখিত কোড যোগ করুন TODO: Step 4C একটি InfoWindow তৈরি করতে যা ব্যবসার নাম এবং রেটিং প্রদর্শন করে এবং সেই উইন্ডোটিকে মার্কারে সংযুক্ত করে।

আপনি একটি সাইডবারে বিশদ প্রদর্শনের জন্য পরবর্তী বিভাগে showPanel সংজ্ঞায়িত করুন৷

step4/index.html

/* TODO: Step 4C: Show place details in an info window */
// Builds an InfoWindow to display details above the marker
function showDetails(placeResult, marker, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    let placeInfowindow = new google.maps.InfoWindow();
    placeInfowindow.setContent('<div><strong>' + placeResult.name +
        '</strong><br>' + 'Rating: ' + placeResult.rating + '</div>');
    placeInfowindow.open(marker.map, marker);
    currentInfoWindow.close();
    currentInfoWindow = placeInfowindow;
    showPanel(placeResult);
    } else {
    console.log('showDetails failed: ' + status);
    }
}

/* TODO: Step 4D: Load place details in a sidebar */

অন্য ডিভ তৈরি করতে PlaceResult অবজেক্টে ফিরে আসা একই বিবরণ ব্যবহার করুন। এই নমুনায়, infoPane ব্যবহার করুন যা আইডি " panel " সহ div-এর জন্য একটি নির্বিচারে পরিবর্তনশীল নাম। ব্যবহারকারী যখনই একটি নতুন মার্কারে ক্লিক করেন, এই কোডটি সাইডবারটি বন্ধ করে দেয় যদি এটি ইতিমধ্যে খোলা থাকে, পুরানো বিবরণ মুছে দেয়, নতুন বিবরণ যোগ করে এবং সাইডবারটি খোলে।

মন্তব্যের পরে নিম্নলিখিত কোড যোগ করুন TODO: Step 4D ।

step4/index.html

/* TODO: Step 4D: Load place details in a sidebar */
// Displays place details in a sidebar
function showPanel(placeResult) {
    // If infoPane is already open, close it
    if (infoPane.classList.contains("open")) {
    infoPane.classList.remove("open");
    }

    // Clear the previous details
    while (infoPane.lastChild) {
    infoPane.removeChild(infoPane.lastChild);
    }

    /* TODO: Step 4E: Display a Place Photo with the Place Details */

    // Add place details with text formatting
    let name = document.createElement('h1');
    name.classList.add('place');
    name.textContent = placeResult.name;
    infoPane.appendChild(name);
    if (placeResult.rating != null) {
    let rating = document.createElement('p');
    rating.classList.add('details');
    rating.textContent = `Rating: ${placeResult.rating} \u272e`;
    infoPane.appendChild(rating);
    }
    let address = document.createElement('p');
    address.classList.add('details');
    address.textContent = placeResult.formatted_address;
    infoPane.appendChild(address);
    if (placeResult.website) {
    let websitePara = document.createElement('p');
    let websiteLink = document.createElement('a');
    let websiteUrl = document.createTextNode(placeResult.website);
    websiteLink.appendChild(websiteUrl);
    websiteLink.title = placeResult.website;
    websiteLink.href = placeResult.website;
    websitePara.appendChild(websiteLink);
    infoPane.appendChild(websitePara);
    }

    // Open the infoPane
    infoPane.classList.add("open");
}

E. স্থানের বিবরণ সহ একটি স্থানের ছবি প্রদর্শন করুন

getDetails ফলাফল placeId এর সাথে যুক্ত 10টি ফটো পর্যন্ত একটি অ্যারে প্রদান করে। এখানে, আপনি সাইডবারে স্থানের নামের উপরে প্রথম ছবি প্রদর্শন করবেন।

name উপাদান তৈরির আগে এই কোডটি রাখুন যদি আপনি ছবিটি সাইডবারের শীর্ষে প্রদর্শিত করতে চান।

step4/index.html

/* TODO: Step 4E: Display a Place Photo with the Place Details */
// Add the primary photo, if there is one
if (placeResult.photos != null) {
    let firstPhoto = placeResult.photos[0];
    let photo = document.createElement('img');
    photo.classList.add('hero');
    photo.src = firstPhoto.getUrl();
    infoPane.appendChild(photo);
}

এটা পরীক্ষা করো

আপনার ব্রাউজারে পৃষ্ঠাটি সংরক্ষণ করুন এবং পুনরায় লোড করুন এবং ভূ-অবস্থানের অনুমতি দিন।
মার্কার থেকে তথ্য উইন্ডো পপ আপ দেখতে একটি মার্কারের উপর ক্লিক করুন যা কিছু বিবরণ প্রদর্শন করে এবং সাইডবারটি আরও বিশদ প্রদর্শন করতে বাম থেকে স্লাইড করে।
আপনি যদি পুনরায় লোড করেন এবং ভূ-অবস্থানের অনুমতি অস্বীকার করেন তবে অনুসন্ধানটিও কাজ করে কিনা তা পরীক্ষা করুন। একটি ভিন্ন প্রশ্নের জন্য আপনার অনুসন্ধান কীওয়ার্ড সম্পাদনা করুন এবং সেই অনুসন্ধানের জন্য ফিরে আসা ফলাফলটি অন্বেষণ করুন৷

সম্পূর্ণ নমুনা কোড

এই বিন্দু পর্যন্ত এই প্রকল্পের জন্য সম্পূর্ণ কোড Github এ উপলব্ধ ।

6. অভিনন্দন

অভিনন্দন! আপনি Places লাইব্রেরি সহ মানচিত্র জাভাস্ক্রিপ্ট API-এর অনেক বৈশিষ্ট্য ব্যবহার করেছেন৷

আমরা কভার করেছি কি

google.maps.Map ক্লাস দিয়ে একটি মানচিত্র তৈরি করা
ভূ -অবস্থানের জন্য ব্যবহারকারীর ব্রাউজার ব্যবহার করা এবং একটি মানচিত্রে ফলাফল প্রদর্শন করা
আপনার মানচিত্রে চিহ্নিতকারী যোগ করা এবং ব্যবহারকারীর ক্লিক ইভেন্টে তাদের প্রতিক্রিয়া
যখন একজন ব্যবহারকারী একটি মার্কার ক্লিক করে তখন আরও তথ্য প্রদর্শন করতে তথ্য উইন্ডো যোগ করা
স্থান লাইব্রেরি লোড করা এবং একটি কাছাকাছি অনুসন্ধান সম্পাদন করা হচ্ছে৷
স্থানের বিশদ বিবরণ এবং স্থানের ফটো আনা এবং প্রদর্শন করা হচ্ছে

আরও জানুন

মানচিত্রের সাথে আরও বেশি কিছু করতে, মানচিত্র জাভাস্ক্রিপ্ট API ডকুমেন্টেশন এবং স্থান লাইব্রেরি ডকুমেন্টেশন অন্বেষণ করুন, উভয়ের মধ্যেই গাইড, টিউটোরিয়াল, API রেফারেন্স, আরও কোড নমুনা এবং সমর্থন চ্যানেল রয়েছে৷ কিছু জনপ্রিয় বৈশিষ্ট্য হল মানচিত্রে ডেটা আমদানি করা , আপনার মানচিত্র স্টাইল করা শুরু করুন এবং রাস্তার দৃশ্য পরিষেবা যোগ করুন৷

আপনি কোন ধরনের কোডল্যাব আমাদের পরবর্তী তৈরি করতে চান?

সমৃদ্ধ স্থানের তথ্য ব্যবহার করার আরও উদাহরণ

মানচিত্র প্ল্যাটফর্ম জাভাস্ক্রিপ্ট API ব্যবহার করে আরও কোডল্যাব

অ্যান্ড্রয়েডের জন্য আরও কোডল্যাব

iOS এর জন্য আরও কোডল্যাব

মানচিত্রে অবস্থান-ভিত্তিক ডেটা ভিজ্যুয়ালাইজ করা

মানচিত্র কাস্টম স্টাইলিং

StreetView ব্যবহার করে

আপনি যে কোডল্যাব চান তা কি উপরে তালিকাভুক্ত নয়? এখানে একটি নতুন সমস্যা সহ এটি অনুরোধ করুন ।

Google মানচিত্র প্ল্যাটফর্ম (জাভাস্ক্রিপ্ট) দিয়ে কাছাকাছি ব্যবসায়িক অনুসন্ধান পরিষেবা তৈরি করুন

1. আপনি শুরু করার আগে

পূর্বশর্ত

Google Maps প্ল্যাটফর্ম দিয়ে শুরু করুন

আপনি কি করবেন

আপনি কি প্রয়োজন হবে

নমুনা কোড পান

2. একটি ডিফল্ট কেন্দ্র সহ একটি মানচিত্র তৈরি করুন৷

1. একটি HTML পৃষ্ঠা তৈরি করুন৷

2. একটি মানচিত্র যোগ করুন

3. আপনার API কী পেস্ট করুন

এটা পরীক্ষা করো

সম্পূর্ণ নমুনা কোড

3. আপনার ব্যবহারকারী জিওলোকেট করুন

ভূ-অবস্থান কি?

এটি নিজে চেষ্টা করো

এটা পরীক্ষা করো

সম্পূর্ণ নমুনা কোড

4. কাছাকাছি স্থান অনুসন্ধান করুন

উ: স্থান লাইব্রেরি লোড করুন

B. নিকটবর্তী স্থান অনুসন্ধানের অনুরোধে কল করুন এবং প্রতিক্রিয়া পরিচালনা করুন

C. অনুসন্ধান ফলাফলের জন্য মার্কার তৈরি করুন

এটা পরীক্ষা করো

সম্পূর্ণ নমুনা কোড

5. চাহিদা অনুযায়ী স্থানের বিবরণ দেখান

উ: একটি সাধারণ সাইডবার তৈরি করুন

B. মার্কারগুলিতে ক্লিক শ্রোতা যোগ করুন

C. একটি তথ্য উইন্ডোতে স্থানের বিবরণ দেখান

D. একটি সাইডবারে স্থানের বিবরণ লোড করুন

E. স্থানের বিবরণ সহ একটি স্থানের ছবি প্রদর্শন করুন

এটা পরীক্ষা করো

সম্পূর্ণ নমুনা কোড

6. অভিনন্দন

আমরা কভার করেছি কি

আরও জানুন

আপনি কোন ধরনের কোডল্যাব আমাদের পরবর্তী তৈরি করতে চান?