ঘটনা

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

এই পৃষ্ঠাটি ব্যবহারকারীর ইন্টারফেস ইভেন্ট এবং ত্রুটি ইভেন্টগুলি বর্ণনা করে যা আপনি শুনতে এবং প্রোগ্রামগতভাবে পরিচালনা করতে পারেন।

ইউজার ইন্টারফেস ইভেন্ট

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

• ব্যবহারকারীর ইভেন্টগুলি (যেমন "ক্লিক" মাউস ইভেন্ট) DOM থেকে Maps JavaScript API-তে প্রচারিত হয়। এই ইভেন্টগুলি স্ট্যান্ডার্ড DOM ইভেন্টগুলি থেকে আলাদা এবং আলাদা৷
• MVC অবস্থা পরিবর্তনের বিজ্ঞপ্তিগুলি মানচিত্র জাভাস্ক্রিপ্ট API অবজেক্টের পরিবর্তনগুলিকে প্রতিফলিত করে এবং একটি property _changed কনভেনশন ব্যবহার করে নামকরণ করা হয়।

প্রতিটি মানচিত্র জাভাস্ক্রিপ্ট API অবজেক্ট বেশ কয়েকটি নামকৃত ইভেন্ট রপ্তানি করে। নির্দিষ্ট ইভেন্টে আগ্রহী প্রোগ্রামগুলি সেই ইভেন্টগুলির জন্য জাভাস্ক্রিপ্ট ইভেন্ট শ্রোতাদের নিবন্ধন করবে এবং যখন সেই ইভেন্টগুলি প্রাপ্ত হবে তখন কোডটি কার্যকর করবে addListener() কে কল করে অবজেক্টে ইভেন্ট হ্যান্ডলারদের নিবন্ধন করার জন্য।

নিম্নলিখিত নমুনা আপনাকে দেখাবে যে কোন ইভেন্টগুলি google.maps.Map দ্বারা ট্রিগার হয়েছে যখন আপনি মানচিত্রের সাথে ইন্টারঅ্যাক্ট করবেন৷

ইভেন্টের সম্পূর্ণ তালিকার জন্য, মানচিত্র জাভাস্ক্রিপ্ট API রেফারেন্স দেখুন। ইভেন্টগুলি প্রতিটি বস্তুর জন্য একটি পৃথক বিভাগে তালিকাভুক্ত করা হয়েছে যা ইভেন্ট ধারণ করে।

UI ইভেন্ট

Maps JavaScript API-এর মধ্যে কিছু বস্তু ব্যবহারকারীর ইভেন্ট যেমন মাউস বা কীবোর্ড ইভেন্টগুলিতে প্রতিক্রিয়া জানাতে ডিজাইন করা হয়েছে। উদাহরণস্বরূপ, এটি এমন কিছু ব্যবহারকারীর ইভেন্ট যা একটি google.maps.marker.AdvancedMarkerElement অবজেক্ট শুনতে পারে:

• 'click'
• 'drag'
• 'dragend'
• 'dragstart'
• 'gmp-click'

সম্পূর্ণ তালিকার জন্য, AdvancedMarkerElement ক্লাস দেখুন। এই ইভেন্টগুলি স্ট্যান্ডার্ড DOM ইভেন্টের মতো দেখতে হতে পারে, কিন্তু এগুলি আসলে Maps JavaScript API-এর অংশ। যেহেতু বিভিন্ন ব্রাউজার বিভিন্ন DOM ইভেন্ট মডেল প্রয়োগ করে, Maps JavaScript API বিভিন্ন ক্রস-ব্রাউজার বিশেষত্বগুলি পরিচালনা করার প্রয়োজন ছাড়াই DOM ইভেন্টগুলি শোনার এবং প্রতিক্রিয়া জানাতে এই প্রক্রিয়াগুলি সরবরাহ করে। এই ইভেন্টগুলি সাধারণত কিছু UI অবস্থা (যেমন মাউসের অবস্থান) লক্ষ্য করে ইভেন্টের মধ্যে আর্গুমেন্ট পাস করে।

MVC রাজ্য পরিবর্তন

MVC অবজেক্টে সাধারণত স্টেট থাকে। যখনই একটি বস্তুর সম্পত্তি পরিবর্তন হয়, Maps JavaScript API একটি ইভেন্ট ফায়ার করবে যে সম্পত্তিটি পরিবর্তিত হয়েছে। উদাহরণস্বরূপ, মানচিত্রের জুম স্তর পরিবর্তিত হলে API একটি মানচিত্রে একটি zoom_changed ইভেন্ট ফায়ার করবে। আপনি অবজেক্টে ইভেন্ট হ্যান্ডলারদের নিবন্ধন করতে addListener() কল করে এই অবস্থার পরিবর্তনগুলিকে আটকাতে পারেন।

ব্যবহারকারীর ইভেন্ট এবং MVC অবস্থার পরিবর্তনগুলি একই রকম হতে পারে, কিন্তু আপনি সাধারণত আপনার কোডে সেগুলিকে ভিন্নভাবে ব্যবহার করতে চান। এমভিসি ইভেন্ট, উদাহরণস্বরূপ, তাদের ইভেন্টের মধ্যে আর্গুমেন্ট পাস করে না। আপনি সেই বস্তুর উপযুক্ত get Property পদ্ধতিতে কল করে MVC অবস্থার পরিবর্তনে পরিবর্তিত সম্পত্তি পরিদর্শন করতে চাইবেন।

ইভেন্টগুলি পরিচালনা করুন

ইভেন্ট বিজ্ঞপ্তির জন্য নিবন্ধন করতে, addListener() ইভেন্ট হ্যান্ডলার ব্যবহার করুন। এই পদ্ধতিটি শোনার জন্য একটি ইভেন্ট লাগে এবং নির্দিষ্ট ইভেন্টটি ঘটলে কল করার জন্য একটি ফাংশন লাগে।

উদাহরণ: মানচিত্র এবং মার্কার ইভেন্ট

নিম্নলিখিত কোড রাষ্ট্র পরিবর্তন ইভেন্ট সঙ্গে ব্যবহারকারী ইভেন্ট মিশ্রিত. আমরা একটি মার্কারের সাথে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করি যা ক্লিক করলে মানচিত্র জুম করে। center সম্পত্তিতে পরিবর্তনের জন্য আমরা মানচিত্রে একটি ইভেন্ট হ্যান্ডলার যোগ করি এবং center_changed ইভেন্ট প্রাপ্তির 3 সেকেন্ড পরে মানচিত্রটিকে আবার মার্কারে প্যান করি:

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

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const myLatlng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatlng,
      mapId: "DEMO_MAP_ID",
    }
  );

  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });

  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.position as google.maps.LatLng);
    }, 3000);
  });

  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.position as google.maps.LatLng);
  });
}

initMap();
index.ts

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const myLatlng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatlng,
    mapId: "DEMO_MAP_ID",
  });
  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });

  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.position);
    }, 3000);
  });
  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.position);
  });
}

initMap();
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত হয়েছে।

উদাহরণ দেখুন

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

JSFiddle.net গুগল ক্লাউড শেল

টিপ : আপনি যদি ভিউপোর্টে একটি পরিবর্তন সনাক্ত করার চেষ্টা করছেন, তাহলে উপাদান zoom_changed এবং center_changed ইভেন্টগুলির পরিবর্তে নির্দিষ্ট bounds_changed ইভেন্ট ব্যবহার করতে ভুলবেন না। যেহেতু মানচিত্র জাভাস্ক্রিপ্ট এপিআই এই পরবর্তী ইভেন্টগুলিকে স্বাধীনভাবে ফায়ার করে, getBounds() ভিউপোর্টটি প্রামাণিকভাবে পরিবর্তিত না হওয়া পর্যন্ত দরকারী ফলাফলগুলি প্রতিবেদন করতে পারে না। আপনি যদি এমন একটি ইভেন্টের পরে getBounds() পেতে চান, তাহলে এর পরিবর্তে bounds_changed ইভেন্টটি শুনতে ভুলবেন না।

উদাহরণ: শেপ এডিটিং এবং ড্র্যাগিং ইভেন্ট

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

উদাহরণ দেখুন (rectangle-event.html)

UI ইভেন্টে আর্গুমেন্ট অ্যাক্সেস করুন

মানচিত্র জাভাস্ক্রিপ্ট এপিআই-এর মধ্যে UI ইভেন্টগুলি সাধারণত একটি ইভেন্ট আর্গুমেন্ট পাস করে, যা ইভেন্ট লিসেনার দ্বারা অ্যাক্সেস করা যায়, ইভেন্টটি হওয়ার সময় UI অবস্থাটি লক্ষ্য করে। উদাহরণস্বরূপ, একটি UI 'click' ইভেন্ট সাধারণত একটি MouseEvent পাস করে যেখানে একটি latLng বৈশিষ্ট্য রয়েছে যা মানচিত্রে ক্লিক করা অবস্থানকে নির্দেশ করে। মনে রাখবেন যে এই আচরণটি UI ইভেন্টের জন্য অনন্য; MVC রাজ্যের পরিবর্তনগুলি তাদের ইভেন্টগুলিতে আর্গুমেন্ট পাস করে না।

আপনি একটি ইভেন্ট লিসেনারের মধ্যে ইভেন্টের আর্গুমেন্টগুলিকে অ্যাক্সেস করতে পারেন যেভাবে আপনি একটি বস্তুর বৈশিষ্ট্যগুলি অ্যাক্সেস করবেন। নিম্নলিখিত উদাহরণটি মানচিত্রের জন্য একটি ইভেন্ট শ্রোতা যোগ করে এবং ব্যবহারকারী যখন ক্লিক করা অবস্থানে মানচিত্রে ক্লিক করে তখন একটি মার্কার তৈরি করে৷

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

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -25.363882, lng: 131.044922 },
      mapId: "DEMO_MAP_ID",
    }
  );

  map.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng: google.maps.LatLng, map: google.maps.Map) {
  new google.maps.marker.AdvancedMarkerElement({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

initMap();
index.ts

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -25.363882, lng: 131.044922 },
    mapId: "DEMO_MAP_ID",
  });

  map.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng, map) {
  new google.maps.marker.AdvancedMarkerElement({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

initMap();
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত হয়েছে।

উদাহরণ দেখুন

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

JSFiddle.net গুগল ক্লাউড শেল

ইভেন্ট লিসেনারে ক্লোজার ব্যবহার করুন

একটি ইভেন্ট শ্রোতা নির্বাহ করার সময়, একটি বস্তুর সাথে ব্যক্তিগত এবং অবিরাম উভয় ডেটা সংযুক্ত করা প্রায়শই সুবিধাজনক। জাভাস্ক্রিপ্ট "প্রাইভেট" ইনস্ট্যান্স ডেটা সমর্থন করে না, তবে এটি ক্লোজার সমর্থন করে যা ভিতরের ফাংশনগুলিকে বাইরের ভেরিয়েবল অ্যাক্সেস করতে দেয়। ক্লোজারগুলি ইভেন্ট শ্রোতাদের মধ্যে উপযোগী হয় যাতে ভেরিয়েবলগুলিকে অ্যাক্সেস করা যায় যা সাধারণত যে বস্তুগুলিতে ইভেন্টগুলি ঘটে তার সাথে সংযুক্ত থাকে না৷

নিম্নলিখিত উদাহরণটি চিহ্নিতকারীর একটি সেটে একটি গোপন বার্তা বরাদ্দ করতে ইভেন্ট লিসেনারে একটি ফাংশন ক্লোজার ব্যবহার করে। প্রতিটি মার্কারের উপর ক্লিক করা গোপন বার্তার একটি অংশ প্রকাশ করবে, যা চিহ্নিতকারীর মধ্যেই নেই।

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

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -25.363882, lng: 131.044922 },
      mapId: "DEMO_MAP_ID",
    }
  );

  const bounds: google.maps.LatLngBoundsLiteral = {
    north: -25.363882,
    south: -31.203405,
    east: 131.044922,
    west: 125.244141,
  };

  // Display the area between the location southWest and northEast.
  map.fitBounds(bounds);

  // Add 5 markers to map at random locations.
  // For each of these markers, give them a title with their index, and when
  // they are clicked they should open an infowindow with text from a secret
  // message.
  const secretMessages = ["This", "is", "the", "secret", "message"];
  const lngSpan = bounds.east - bounds.west;
  const latSpan = bounds.north - bounds.south;

  for (let i = 0; i < secretMessages.length; ++i) {
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position: {
        lat: bounds.south + latSpan * Math.random(),
        lng: bounds.west + lngSpan * Math.random(),
      },
      map: map,
    });

    attachSecretMessage(marker, secretMessages[i]);
  }
}

// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(
  marker: google.maps.marker.AdvancedMarkerElement,
  secretMessage: string
) {
  const infowindow = new google.maps.InfoWindow({
    content: secretMessage,
  });

  marker.addListener("click", () => {
    infowindow.open(marker.map, marker);
  });
}

initMap();
index.ts

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -25.363882, lng: 131.044922 },
    mapId: "DEMO_MAP_ID",
  });
  const bounds = {
    north: -25.363882,
    south: -31.203405,
    east: 131.044922,
    west: 125.244141,
  };

  // Display the area between the location southWest and northEast.
  map.fitBounds(bounds);

  // Add 5 markers to map at random locations.
  // For each of these markers, give them a title with their index, and when
  // they are clicked they should open an infowindow with text from a secret
  // message.
  const secretMessages = ["This", "is", "the", "secret", "message"];
  const lngSpan = bounds.east - bounds.west;
  const latSpan = bounds.north - bounds.south;

  for (let i = 0; i < secretMessages.length; ++i) {
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position: {
        lat: bounds.south + latSpan * Math.random(),
        lng: bounds.west + lngSpan * Math.random(),
      },
      map: map,
    });

    attachSecretMessage(marker, secretMessages[i]);
  }
}

// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(marker, secretMessage) {
  const infowindow = new google.maps.InfoWindow({
    content: secretMessage,
  });

  marker.addListener("click", () => {
    infowindow.open(marker.map, marker);
  });
}

initMap();
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত হয়েছে।

উদাহরণ দেখুন

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

JSFiddle.net গুগল ক্লাউড শেল

ইভেন্ট হ্যান্ডলারের মধ্যে বৈশিষ্ট্যগুলি পান এবং সেট করুন

ম্যাপ জাভাস্ক্রিপ্ট এপিআই ইভেন্ট সিস্টেম পাস আর্গুমেন্ট যখন ইভেন্টটি ট্রিগার হয় তখন MVC স্থিতি পরিবর্তন করে না। (ব্যবহারকারীর ইভেন্টগুলি আর্গুমেন্ট পাস করে যা পরিদর্শন করা যেতে পারে।) যদি আপনি একটি MVC অবস্থা পরিবর্তনের উপর একটি সম্পত্তি পরিদর্শন করতে চান, তাহলে আপনাকে স্পষ্টভাবে সেই বস্তুতে উপযুক্ত get Property () পদ্ধতিতে কল করা উচিত। এই পরিদর্শনটি সর্বদা MVC অবজেক্টের বর্তমান অবস্থা পুনরুদ্ধার করবে, যেটি ইভেন্টটি প্রথম ফায়ার করার সময় নাও হতে পারে।

দ্রষ্টব্য : একটি ইভেন্ট হ্যান্ডলারের মধ্যে স্পষ্টভাবে একটি সম্পত্তি সেট করা যা সেই নির্দিষ্ট সম্পত্তির একটি রাষ্ট্রীয় পরিবর্তনের প্রতিক্রিয়া জানাতে পারে তা অপ্রত্যাশিত এবং/অথবা অবাঞ্ছিত আচরণ তৈরি করতে পারে। এই ধরনের একটি সম্পত্তি সেট করা একটি নতুন ইভেন্টকে ট্রিগার করবে, উদাহরণস্বরূপ, এবং যদি আপনি সবসময় এই ইভেন্ট হ্যান্ডলারের মধ্যে একটি সম্পত্তি সেট করেন, তাহলে আপনি একটি অসীম লুপ তৈরি করতে পারেন।

নীচের উদাহরণে, আমরা একটি ইভেন্ট হ্যান্ডলার সেট আপ করেছি জুম ইভেন্টগুলিতে প্রতিক্রিয়া জানাতে সেই স্তরটি প্রদর্শন করে একটি তথ্য উইন্ডো এনে৷

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

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  const originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: originalMapCenter,
    }
  );

  const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

  infowindow.open(map);

  map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom()!);
  });
}

initMap();
index.ts

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: originalMapCenter,
  });
  const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

  infowindow.open(map);
  map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom());
  });
}

initMap();
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত হয়েছে।

উদাহরণ দেখুন

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

JSFiddle.net গুগল ক্লাউড শেল

DOM ইভেন্টগুলি শুনুন

Maps JavaScript API ইভেন্ট মডেল তার নিজস্ব কাস্টম ইভেন্ট তৈরি করে এবং পরিচালনা করে। যাইহোক, ব্রাউজারের মধ্যে DOM (ডকুমেন্ট অবজেক্ট মডেল) ব্যবহার করা নির্দিষ্ট ব্রাউজার ইভেন্ট মডেল অনুসারে তার নিজস্ব ইভেন্ট তৈরি করে এবং প্রেরণ করে। আপনি যদি এই ইভেন্টগুলি ক্যাপচার করতে এবং প্রতিক্রিয়া জানাতে চান, তাহলে মানচিত্র জাভাস্ক্রিপ্ট এপিআই DOM ইভেন্টগুলি শুনতে এবং আবদ্ধ করার জন্য addDomListener() স্ট্যাটিক পদ্ধতি প্রদান করে।

এই সুবিধার পদ্ধতিতে একটি স্বাক্ষর রয়েছে যা নীচে দেখানো হয়েছে:

addDomListener(instance:Object, eventName:string, handler:Function)

যেখানে instance ব্রাউজার দ্বারা সমর্থিত কোনো DOM উপাদান হতে পারে, সহ:

• DOM-এর অনুক্রমিক সদস্য যেমন window বা document.body. myform
• নাম দেওয়া উপাদান যেমন document.getElementById("foo")

মনে রাখবেন addDomListener() ব্রাউজারে নির্দেশিত ইভেন্ট পাস করে, যা ব্রাউজারের DOM ইভেন্ট মডেল অনুযায়ী এটি পরিচালনা করে; যাইহোক, প্রায় সব আধুনিক ব্রাউজার অন্তত DOM লেভেল 2 সমর্থন করে। (DOM লেভেল ইভেন্টের আরও তথ্যের জন্য, Mozilla DOM লেভেল রেফারেন্স দেখুন।)

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

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  const mapDiv = document.getElementById("map") as HTMLElement;
  const map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
  });

  // We add a DOM event here to show an alert if the DIV containing the
  // map is clicked.
  google.maps.event.addDomListener(mapDiv, "click", () => {
    window.alert("Map was clicked!");
  });
}

initMap();
index.ts

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const mapDiv = document.getElementById("map");
  const map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
  });

  // We add a DOM event here to show an alert if the DIV containing the
  // map is clicked.
  google.maps.event.addDomListener(mapDiv, "click", () => {
    window.alert("Map was clicked!");
  });
}

initMap();
index.js

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত হয়েছে।

এইচটিএমএল

<html>
  <head>
    <title>Listening to DOM 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>
    <div id="map"></div>

    <!-- 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: "weekly"});</script>
  </body>
</html>
index.html

উদাহরণ দেখুন

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

JSFiddle.net গুগল ক্লাউড শেল

যদিও উপরের কোডটি Maps JavaScript API কোড, addDomListener() পদ্ধতি ব্রাউজারের window অবজেক্টের সাথে আবদ্ধ হয় এবং API-কে API-এর স্বাভাবিক ডোমেনের বাইরের বস্তুর সাথে যোগাযোগ করতে দেয়।

ইভেন্ট শ্রোতাদের সরান

একটি নির্দিষ্ট ইভেন্ট শ্রোতা অপসারণ করতে, এটি একটি ভেরিয়েবলের জন্য বরাদ্দ করা আবশ্যক. তারপর আপনি removeListener() কল করতে পারেন, যে পরিবর্তনশীল নামটিতে শ্রোতাকে বরাদ্দ করা হয়েছিল।

var listener1 = marker.addListener('click', aFunction);

google.maps.event.removeListener(listener1);

একটি নির্দিষ্ট উদাহরণ থেকে সমস্ত শ্রোতাদের অপসারণ করতে, ইনস্ট্যান্সের নাম পাস করে clearInstanceListeners() কল করুন।

var listener1 = marker.addListener('click', aFunction);
var listener2 = marker.addListener('mouseover', bFunction);

// Remove listener1 and listener2 from marker instance.
google.maps.event.clearInstanceListeners(marker);

একটি নির্দিষ্ট উদাহরণের জন্য একটি নির্দিষ্ট ইভেন্ট টাইপের জন্য সমস্ত শ্রোতাদের অপসারণ করতে, ইন্সট্যান্সের নাম এবং ইভেন্টের নাম পাস করে clearListeners() কল করুন।

marker.addListener('click', aFunction);
marker.addListener('click', bFunction);
marker.addListener('click', cFunction);

// Remove all click listeners from marker instance.
google.maps.event.clearListeners(marker, 'click');

আরও তথ্যের জন্য, google.maps.event নামস্থানের জন্য রেফারেন্স ডকুমেন্টেশন পড়ুন।

প্রমাণীকরণ ত্রুটির জন্য শুনুন

আপনি যদি প্রোগ্রাম্যাটিকভাবে একটি প্রমাণীকরণ ব্যর্থতা সনাক্ত করতে চান (উদাহরণস্বরূপ স্বয়ংক্রিয়ভাবে একটি বীকন পাঠাতে) আপনি একটি কলব্যাক ফাংশন প্রস্তুত করতে পারেন। যদি নিম্নলিখিত বিশ্বব্যাপী ফাংশনটি সংজ্ঞায়িত করা হয় তবে প্রমাণীকরণ ব্যর্থ হলে এটি কল করা হবে। function gm_authFailure() { /* Code */ };