মানচিত্র জাভাস্ক্রিপ্ট API (প্রিভিউ) এ ওয়েব উপাদান

ওয়েব কম্পোনেন্ট হল একটি জনপ্রিয় W3C স্ট্যান্ডার্ড যা HTML, CSS, এবং JS কে কাস্টম এবং পুনঃব্যবহারযোগ্য HTML উপাদানে এনক্যাপসুলেট করে। এই পুনঃব্যবহারযোগ্য উপাদানগুলি কার্যকারিতার পারমাণবিক টুকরো থেকে শুরু করে আরও জটিল ব্যবসায়িক যুক্তি পর্যন্ত হতে পারে, যেমন একটি স্থানের জন্য তারকা রেটিং প্রদর্শন করা। এই নির্দেশিকা Maps JavaScript API-এ উপলব্ধ ওয়েব উপাদানগুলির বর্ণনা করে৷

মান সম্পর্কে আরও তথ্যের জন্য, ওয়েব উপাদান দেখুন।

শ্রোতা

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

একটি মানচিত্র প্রদর্শন করুন

ওয়েব উপাদান সম্পর্কে শেখা শুরু করার সবচেয়ে সহজ উপায় হল একটি উদাহরণ দেখা। নিম্নলিখিত উদাহরণটি সান জোসে এলাকার একটি মানচিত্র প্রদর্শন করে।

টাইপস্ক্রিপ্ট

// This example adds a map using web components.
async function initMap(): Promise<void> {
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    console.log('Maps JavaScript API loaded.');
}

initMap();
index.ts

জাভাস্ক্রিপ্ট

// This example adds a map using web components.
async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  console.log("Maps JavaScript API loaded.");
}

initMap();
index.js

সিএসএস

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

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

gmp-map {
  height: 400px;
}

style.css

এইচটিএমএল

<html>
  <head>
    <title>Add a Map Web Component</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="37.4220656,-122.0840897"
      zoom="10"
      map-id="DEMO_MAP_ID"
    ></gmp-map>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

নমুনা চেষ্টা করুন

এই উদাহরণে লক্ষ করার মতো কয়েকটি জিনিস রয়েছে:

  1. মানচিত্র জাভাস্ক্রিপ্ট এপিআইকে অ্যাসিঙ্ক্রোনাস বলা হয়। API কখন লোড হয়েছে তা জানতে কলব্যাক ফাংশন ব্যবহার করা হয়।
  2. মানচিত্রের উপস্থাপনা <gmp-map> কাস্টম উপাদান দিয়ে সংজ্ঞায়িত করা হয়।
  3. মানচিত্র বৈশিষ্ট্য <gmp-map> কাস্টম উপাদানে বৈশিষ্ট্য নির্দিষ্ট করে সংজ্ঞায়িত করা হয়।
  4. স্টাইলিং কাস্টম উপাদানগুলিতে ইনলাইনে প্রয়োগ করা যেতে পারে বা একটি পৃথক CSS ফাইলে ঘোষণা করা যেতে পারে।

বেসম্যাপ স্টাইল করুন

একটি মানচিত্র আইডি একটি নির্দিষ্ট মানচিত্র শৈলী বা বৈশিষ্ট্যের সাথে যুক্ত একটি সনাক্তকারী। ঐচ্ছিক ক্লাউড কনফিগারেশন বৈশিষ্ট্যগুলির সুবিধা নিতে, ক্লাউড-ভিত্তিক মানচিত্রের স্টাইলিং DEMO_MAP_ID আপনার নিজস্ব মানচিত্র ID দিয়ে প্রতিস্থাপন করুন৷ কিভাবে একটি মানচিত্র ID তৈরি করতে হয় এবং একটি কাস্টম শৈলী কনফিগার করতে হয় তা জানতে, ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং- এ যান৷

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

জটিল বিষয়বস্তু শ্রেণিবিন্যাস তৈরি করতে কেউ যেমন অন্তর্নির্মিত HTML ট্যাগগুলিকে নেস্ট করতে পারে, তেমনি এক বা একাধিক মানচিত্র মার্কার প্রদর্শনের জন্য একটি উপাদানের ভিতরে <gmp-advanced-marker> নেস্ট করতে পারে।

টাইপস্ক্রিপ্ট

// This example adds a map with markers, using web components.
async function initMap(): Promise<void> {
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    console.log('Maps JavaScript API loaded.');
}

initMap();
index.ts

জাভাস্ক্রিপ্ট

// This example adds a map with markers, using web components.
async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  console.log("Maps JavaScript API loaded.");
}

initMap();
index.js

সিএসএস

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

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

gmp-map {
  height: 400px;
}

style.css

এইচটিএমএল

<html>
  <head>
    <title>Add a Map with Markers using Web Components</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

নমুনা চেষ্টা করুন

এখানে আমরা <gmp-map> কাস্টম উপাদানের ভিতরে দুটি <gmp-advanced-marker> উপাদান যোগ করেছি। title জন্য পাঠ্য নির্দিষ্ট উপাদানের জন্য একটি অতিরিক্ত হোভার পাঠ্য এবং অ্যাক্সেসযোগ্যতা লেবেল প্রদান করে।

জাভাস্ক্রিপ্ট ইভেন্ট

ওয়েব কম্পোনেন্টের একটি প্রধান সুবিধা হল ব্যবহারের সহজলভ্যতা। কোডের কয়েকটি লাইনের সাহায্যে, কেউ জাভাস্ক্রিপ্ট বা উন্নত প্রোগ্রামিং সম্পর্কে সীমিত জ্ঞান সহ একটি মানচিত্র প্রদর্শন করতে পারে। একবার প্রয়োগ করা হলে, কোডটি অন্যান্য HTML উপাদানের পরিচিত নিদর্শন অনুসরণ করে। উদাহরণস্বরূপ, মানচিত্র বা অ্যাডভান্সড মার্কার অ্যাকশনগুলিতে প্রতিক্রিয়া জানাতে কেউ নেটিভ ব্রাউজার ইভেন্টিং সিস্টেম ব্যবহার করতে পারে, যেমন একটি মার্কার ক্লিক।

আপনার HTML-এ, একটি মার্কারকে ক্লিকযোগ্য করার জন্য gmp-advanced-marker উপাদানটিতে gmp-clickable বৈশিষ্ট্য সেট করুন। ক্লিক ইভেন্টগুলি পরিচালনা করতে advancedMarker.addEventListener ব্যবহার করুন।

টাইপস্ক্রিপ্ট

// This example adds a map using web components.
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  console.log('Maps JavaScript API loaded.');

  const advancedMarkers = document.querySelectorAll("#marker-click-event-example gmp-advanced-marker");

  for (const advancedMarker of advancedMarkers) {

    customElements.whenDefined(advancedMarker.localName).then(async () => {
      advancedMarker.addEventListener('gmp-click', async () => {

        const infoWindow = new google.maps.InfoWindow({
          //@ts-ignore
          content: advancedMarker.title,
        });
        infoWindow.open({
          //@ts-ignore
          anchor: advancedMarker
        });
      });
    });
  }
}

initMap();
index.ts

জাভাস্ক্রিপ্ট

// This example adds a map using web components.
async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  console.log("Maps JavaScript API loaded.");

  const advancedMarkers = document.querySelectorAll(
    "#marker-click-event-example gmp-advanced-marker",
  );

  for (const advancedMarker of advancedMarkers) {
    customElements.whenDefined(advancedMarker.localName).then(async () => {
      advancedMarker.addEventListener("gmp-click", async () => {
        const infoWindow = new google.maps.InfoWindow({
          //@ts-ignore
          content: advancedMarker.title,
        });

        infoWindow.open({
          //@ts-ignore
          anchor: advancedMarker,
        });
      });
    });
  }
}

initMap();
index.js

সিএসএস

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

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

gmp-map {
  height: 400px;
}

style.css

এইচটিএমএল

<html>
  <head>
    <title>Add a Map Web Component with Events</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      id="marker-click-event-example"
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
        gmp-clickable
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
        gmp-clickable
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>
index.html

নমুনা চেষ্টা করুন

এই উদাহরণে, Maps JavaScript API সম্পূর্ণরূপে লোড হয়ে গেলে initMap প্রয়োজনীয় কলব্যাক ফাংশন উপস্থাপন করে। কোডটি প্রতিটি মার্কারে শ্রোতাদের প্রতিষ্ঠা করে এবং প্রতিটি মার্কার ক্লিক করার সময় একটি তথ্য উইন্ডো উপস্থাপন করে।

এরপর কি