স্থানগুলি UI কিট : একটি রেডি-টু-ব্যবহারের লাইব্রেরি যা কাস্টমাইজেশন এবং কম-কোড বিকাশের জন্য জায়গা প্রদান করে। এটি ব্যবহার করে দেখুন, এবং আপনার UI কিট অভিজ্ঞতাতে আপনার ইনপুট শেয়ার করুন।

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

মার্কার দিয়ে কাজ করুন

ইউরোপীয় অর্থনৈতিক অঞ্চল (EEA) ডেভেলপাররা

createWaypointAdvancedMarkers() কল করে রুট ওয়েপয়েন্টের জন্য মার্কার তৈরি করুন। ডিফল্টরূপে, createWaypointAdvancedMarkers() প্রতিটি ওয়েপয়েন্টের জন্য 'A', 'B', 'C' ইত্যাদি লেবেলযুক্ত রুটের জন্য মার্কার তৈরি করে। আপনি সংশ্লিষ্ট RouteLeg এর মার্কার সূচক বা বৈশিষ্ট্যের উপর ভিত্তি করে মার্কার স্টাইল পরিবর্তন করার বিকল্পগুলি পাস করে মার্কারগুলিকে আরও কাস্টমাইজ করতে পারেন।

সম্পূর্ণ উদাহরণ সোর্স কোডটি দেখুন

নিম্নলিখিত কোড নমুনাটি দেখায় কিভাবে রুট ওয়েপয়েন্টের জন্য কাস্টম মার্কার তৈরি করতে হয়।

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

let mapPolylines: google.maps.Polyline[] = [];
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

// Initialize and add the map.
async function initMap() {
  //  Request the needed libraries.
  await google.maps.importLibrary('maps');

  innerMap = await mapElement.innerMap;
  innerMap.setOptions({
    mapTypeControl: false,
    mapId: 'DEMO_MAP_ID',
  });

  // Call the function after the map is loaded.
  google.maps.event.addListenerOnce(innerMap, 'idle', () => {
    getDirections();
  });
}

async function getDirections() {
  //@ts-ignore
  // Request the needed libraries.
  const [{ Route }, { PinElement }] = await Promise.all([
    google.maps.importLibrary('routes'),
    google.maps.importLibrary('marker'),
  ]);

  // Define routes request with an intermediate stop.
  const request = {
    origin: 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131',
    destination: '100 Spinnaker Dr, Sausalito, CA 94965', // We're having a yummy lunch!
    intermediates: [{ location: '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf!
    travelMode: 'DRIVING',
    fields: ['path', 'legs', 'viewport'],
  };

  // Call computeRoutes to get the directions.
  const result = await Route.computeRoutes(request);
  if (!result.routes || result.routes.length === 0) {
    console.warn("No routes found");
    return;
  }

  // Alter style based on marker index.
  function markerOptionsMaker(
    defaultOptions: google.maps.marker.AdvancedMarkerElementOptions,
    //@ts-ignore
    waypointMarkerDetails: google.maps.routes.WaypointMarkerDetails
  ) {
    const { index, totalMarkers, leg } = waypointMarkerDetails;

    // Style the origin waypoint.
    if (index === 0) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'green',
          borderColor: 'green',
        }).element
      }
    }

    // Style all intermediate waypoints.
    if (!(index === 0 || index === totalMarkers - 1)) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'blue',
          borderColor: 'blue',
        }).element
      }
    }

    // Style the destination waypoint.
    if (index === totalMarkers - 1) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'red',
          borderColor: 'red',
        }).element
      }
    }

    return { ...defaultOptions, map: innerMap };
  }

  const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);


  // Fit the map to the route.
  innerMap.fitBounds(result.routes[0].viewport);
  innerMap.setHeading(270);

  // Create polylines and add them to the map.
  mapPolylines = result.routes[0].createPolylines();
  mapPolylines.forEach((polyline) => polyline.setMap(innerMap));
}

initMap();index.ts

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

let mapPolylines = [];
const mapElement = document.querySelector('gmp-map');
let innerMap;
// Initialize and add the map.
async function initMap() {
    //  Request the needed libraries.
    await google.maps.importLibrary('maps');
    innerMap = await mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });
    // Call the function after the map is loaded.
    google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        getDirections();
    });
}
async function getDirections() {
    //@ts-ignore
    // Request the needed libraries.
    const [{ Route }, { PinElement }] = await Promise.all([
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('marker'),
    ]);
    // Define routes request with an intermediate stop.
    const request = {
        origin: 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131',
        destination: '100 Spinnaker Dr, Sausalito, CA 94965', // We're having a yummy lunch!
        intermediates: [{ location: '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf!
        travelMode: 'DRIVING',
        fields: ['path', 'legs', 'viewport'],
    };
    // Call computeRoutes to get the directions.
    const result = await Route.computeRoutes(request);
    if (!result.routes || result.routes.length === 0) {
        console.warn("No routes found");
        return;
    }
    // Alter style based on marker index.
    function markerOptionsMaker(defaultOptions, 
    //@ts-ignore
    waypointMarkerDetails) {
        const { index, totalMarkers, leg } = waypointMarkerDetails;
        // Style the origin waypoint.
        if (index === 0) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'green',
                    borderColor: 'green',
                }).element
            };
        }
        // Style all intermediate waypoints.
        if (!(index === 0 || index === totalMarkers - 1)) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'blue',
                    borderColor: 'blue',
                }).element
            };
        }
        // Style the destination waypoint.
        if (index === totalMarkers - 1) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'red',
                    borderColor: 'red',
                }).element
            };
        }
        return { ...defaultOptions, map: innerMap };
    }
    const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);
    // Fit the map to the route.
    innerMap.fitBounds(result.routes[0].viewport);
    innerMap.setHeading(270);
    // Create polylines and add them to the map.
    mapPolylines = result.routes[0].createPolylines();
    mapPolylines.forEach((polyline) => polyline.setMap(innerMap));
}
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;
}style.css

এইচটিএমএল

<html>
  <head>
    <title>Get directions</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map center="37.447646, -122.113878" zoom="12"></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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
  </body>
</html>index.html

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

জেএসফিডল.নেট

ডিফল্ট মার্কার যোগ করুন

ডিফল্ট স্টাইল ব্যবহার করে মার্কার যোগ করতে, createWaypointAdvancedMarkers() কল করুন এবং বর্তমান মানচিত্রটি নির্দিষ্ট করার জন্য একটি মার্কার বিকল্প পাস করুন, যেমনটি নিম্নলিখিত কোড স্নিপেটে দেখানো হয়েছে।

// Create markers using default style.
const markers = await result.routes[0].createWaypointAdvancedMarkers({ map: innerMap });

গুরুত্বপূর্ণ: মধ্যবর্তী ওয়েপয়েন্টগুলি অন্তর্ভুক্ত করার জন্য ComputeRoutesRequest.fields এ legs ফিল্ডটি অবশ্যই অনুরোধ করা উচিত।

একটি কাস্টম স্টাইল সহ মার্কার যোগ করুন

কাস্টম স্টাইল ব্যবহার করে মার্কার যোগ করতে, createWaypointAdvancedMarkers() পাসিং মার্কার অপশন কল করুন যাতে কাস্টম স্টাইল প্রোপার্টি অন্তর্ভুক্ত থাকে। যখন আপনি এই ধরণের স্টাইল প্রয়োগ করেন, তখন সমস্ত মার্কার একইভাবে স্টাইল করা হয়। নিম্নলিখিত কোড স্নিপেটে দেখানো হয়েছে কিভাবে কাস্টম স্টাইল ব্যবহার করে মার্কার তৈরি করতে হয়।

// Create markers with a custom style.
const markerOptions = {
  map: innerMap,
  content: new PinElement({
    scale: 1.5,
    background: '#8C0DD1',
    borderColor: '#6D0AA5',
    glyphColor: '#6D0AA5',
  }).element
}

const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptions);

পৃথক মার্কারগুলিতে একটি কাস্টম স্টাইল প্রয়োগ করুন

পৃথক মার্কারগুলিতে একটি কাস্টম স্টাইল প্রয়োগ করতে, createWaypointAdvancedMarkers() এ একটি ফাংশন পাস করুন যাতে মার্কার ইনডেক্স অথবা RouteLeg প্রোপার্টির উপর ভিত্তি করে মার্কার স্টাইল অপশন সেট করা যায়। নিম্নলিখিত কোড স্নিপেটটি মার্কার ইনডেক্সের উপর ভিত্তি করে মার্কার তৈরি এবং স্টাইল করার একটি ফাংশন দেখায়:

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

// Alter style based on marker index.
function markerOptionsMaker(
  defaultOptions: google.maps.marker.AdvancedMarkerElementOptions,
  //@ts-ignore
  waypointMarkerDetails: google.maps.routes.WaypointMarkerDetails
) {
  const { index, totalMarkers, leg } = waypointMarkerDetails;

  // Style the origin waypoint.
  if (index === 0) {
    return {
      ...defaultOptions,
      map: innerMap,
      content: new PinElement({
        glyphText: (index + 1).toString(),
        glyphColor: 'white',
        background: 'green',
        borderColor: 'green',
      }).element
    }
  }

  // Style all intermediate waypoints.
  if (!(index === 0 || index === totalMarkers - 1)) {
    return {
      ...defaultOptions,
      map: innerMap,
      content: new PinElement({
        glyphText: (index + 1).toString(),
        glyphColor: 'white',
        background: 'blue',
        borderColor: 'blue',
      }).element
    }
  }

  // Style the destination waypoint.
  if (index === totalMarkers - 1) {
    return {
      ...defaultOptions,
      map: innerMap,
      content: new PinElement({
        glyphText: (index + 1).toString(),
        glyphColor: 'white',
        background: 'red',
        borderColor: 'red',
      }).element
    }
  }

  return { ...defaultOptions, map: innerMap };
}

const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);index.ts

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

// Alter style based on marker index.
function markerOptionsMaker(defaultOptions, 
//@ts-ignore
waypointMarkerDetails) {
    const { index, totalMarkers, leg } = waypointMarkerDetails;
    // Style the origin waypoint.
    if (index === 0) {
        return {
            ...defaultOptions,
            map: innerMap,
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'green',
                borderColor: 'green',
            }).element
        };
    }
    // Style all intermediate waypoints.
    if (!(index === 0 || index === totalMarkers - 1)) {
        return {
            ...defaultOptions,
            map: innerMap,
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'blue',
                borderColor: 'blue',
            }).element
        };
    }
    // Style the destination waypoint.
    if (index === totalMarkers - 1) {
        return {
            ...defaultOptions,
            map: innerMap,
            content: new PinElement({
                glyphText: (index + 1).toString(),
                glyphColor: 'white',
                background: 'red',
                borderColor: 'red',
            }).element
        };
    }
    return { ...defaultOptions, map: innerMap };
}
const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);index.js

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

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

let mapPolylines: google.maps.Polyline[] = [];
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

// Initialize and add the map.
async function initMap() {
  //  Request the needed libraries.
  await google.maps.importLibrary('maps');

  innerMap = await mapElement.innerMap;
  innerMap.setOptions({
    mapTypeControl: false,
    mapId: 'DEMO_MAP_ID',
  });

  // Call the function after the map is loaded.
  google.maps.event.addListenerOnce(innerMap, 'idle', () => {
    getDirections();
  });
}

async function getDirections() {
  //@ts-ignore
  // Request the needed libraries.
  const [{ Route }, { PinElement }] = await Promise.all([
    google.maps.importLibrary('routes'),
    google.maps.importLibrary('marker'),
  ]);

  // Define routes request with an intermediate stop.
  const request = {
    origin: 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131',
    destination: '100 Spinnaker Dr, Sausalito, CA 94965', // We're having a yummy lunch!
    intermediates: [{ location: '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf!
    travelMode: 'DRIVING',
    fields: ['path', 'legs', 'viewport'],
  };

  // Call computeRoutes to get the directions.
  const result = await Route.computeRoutes(request);
  if (!result.routes || result.routes.length === 0) {
    console.warn("No routes found");
    return;
  }

  // Alter style based on marker index.
  function markerOptionsMaker(
    defaultOptions: google.maps.marker.AdvancedMarkerElementOptions,
    //@ts-ignore
    waypointMarkerDetails: google.maps.routes.WaypointMarkerDetails
  ) {
    const { index, totalMarkers, leg } = waypointMarkerDetails;

    // Style the origin waypoint.
    if (index === 0) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'green',
          borderColor: 'green',
        }).element
      }
    }

    // Style all intermediate waypoints.
    if (!(index === 0 || index === totalMarkers - 1)) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'blue',
          borderColor: 'blue',
        }).element
      }
    }

    // Style the destination waypoint.
    if (index === totalMarkers - 1) {
      return {
        ...defaultOptions,
        map: innerMap,
        content: new PinElement({
          glyphText: (index + 1).toString(),
          glyphColor: 'white',
          background: 'red',
          borderColor: 'red',
        }).element
      }
    }

    return { ...defaultOptions, map: innerMap };
  }

  const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);


  // Fit the map to the route.
  innerMap.fitBounds(result.routes[0].viewport);
  innerMap.setHeading(270);

  // Create polylines and add them to the map.
  mapPolylines = result.routes[0].createPolylines();
  mapPolylines.forEach((polyline) => polyline.setMap(innerMap));
}

initMap();index.ts

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

let mapPolylines = [];
const mapElement = document.querySelector('gmp-map');
let innerMap;
// Initialize and add the map.
async function initMap() {
    //  Request the needed libraries.
    await google.maps.importLibrary('maps');
    innerMap = await mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });
    // Call the function after the map is loaded.
    google.maps.event.addListenerOnce(innerMap, 'idle', () => {
        getDirections();
    });
}
async function getDirections() {
    //@ts-ignore
    // Request the needed libraries.
    const [{ Route }, { PinElement }] = await Promise.all([
        google.maps.importLibrary('routes'),
        google.maps.importLibrary('marker'),
    ]);
    // Define routes request with an intermediate stop.
    const request = {
        origin: 'Parking lot, Christmas Tree Point Rd, San Francisco, CA 94131',
        destination: '100 Spinnaker Dr, Sausalito, CA 94965', // We're having a yummy lunch!
        intermediates: [{ location: '300 Finley Rd San Francisco, CA 94129' }], // But first, we golf!
        travelMode: 'DRIVING',
        fields: ['path', 'legs', 'viewport'],
    };
    // Call computeRoutes to get the directions.
    const result = await Route.computeRoutes(request);
    if (!result.routes || result.routes.length === 0) {
        console.warn("No routes found");
        return;
    }
    // Alter style based on marker index.
    function markerOptionsMaker(defaultOptions, 
    //@ts-ignore
    waypointMarkerDetails) {
        const { index, totalMarkers, leg } = waypointMarkerDetails;
        // Style the origin waypoint.
        if (index === 0) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'green',
                    borderColor: 'green',
                }).element
            };
        }
        // Style all intermediate waypoints.
        if (!(index === 0 || index === totalMarkers - 1)) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'blue',
                    borderColor: 'blue',
                }).element
            };
        }
        // Style the destination waypoint.
        if (index === totalMarkers - 1) {
            return {
                ...defaultOptions,
                map: innerMap,
                content: new PinElement({
                    glyphText: (index + 1).toString(),
                    glyphColor: 'white',
                    background: 'red',
                    borderColor: 'red',
                }).element
            };
        }
        return { ...defaultOptions, map: innerMap };
    }
    const markers = await result.routes[0].createWaypointAdvancedMarkers(markerOptionsMaker);
    // Fit the map to the route.
    innerMap.fitBounds(result.routes[0].viewport);
    innerMap.setHeading(270);
    // Create polylines and add them to the map.
    mapPolylines = result.routes[0].createPolylines();
    mapPolylines.forEach((polyline) => polyline.setMap(innerMap));
}
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;
}style.css

এইচটিএমএল

<html>
  <head>
    <title>Get directions</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map center="37.447646, -122.113878" zoom="12"></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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
  </body>
</html>index.html

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

জেএসফিডল.নেট