Places UI Kit: यह इस्तेमाल के लिए तैयार लाइब्रेरी है. इससे डेवलपर को अपनी ज़रूरत के मुताबिक बदलाव करने और कंट्रोल करने की सुविधा मिलती है. इसे आज़माएं और यूआई किट के इस्तेमाल से जुड़ा अपना अनुभव शेयर करें.

आकार और लाइन

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

अपने मैप में अलग-अलग शेप जोड़े जा सकते हैं. शेप, मैप पर मौजूद एक ऑब्जेक्ट होता है. यह अक्षांश/देशांतर के निर्देशांक से जुड़ा होता है. ये शेप उपलब्ध हैं: लाइनें, पॉलीगॉन, सर्कल, और आयत. आपके पास अपने शेप को कॉन्फ़िगर करने का विकल्प भी होता है, ताकि उपयोगकर्ता उनमें बदलाव कर सकें या उन्हें खींचकर दूसरी जगह ले जा सकें.

पॉलीलाइन

अपने मैप पर लाइन बनाने के लिए, पॉलीलाइन का इस्तेमाल करें. Polyline क्लास, मैप पर कनेक्ट किए गए लाइन सेगमेंट के लीनियर ओवरले को तय करती है. Polyline ऑब्जेक्ट में, LatLng जगहों की जानकारी का कलेक्शन होता है. साथ ही, यह लाइन सेगमेंट की एक सीरीज़ बनाता है. ये सेगमेंट, जगहों की जानकारी को क्रम से जोड़ते हैं.

कोई पॉलीलाइन जोड़ना

Polyline कंस्ट्रक्टर, PolylineOptions का एक सेट लेता है. इसमें लाइन के LatLng कोऑर्डिनेट और पॉलीलाइन के विज़ुअल व्यवहार को अडजस्ट करने के लिए स्टाइल का एक सेट शामिल होता है.

Polyline ऑब्जेक्ट को मैप पर सीधी लाइन वाले सेगमेंट की सीरीज़ के तौर पर दिखाया जाता है. लाइन बनाते समय, PolylineOptions टैग के अंदर लाइन के स्ट्रोक के लिए, कस्टम रंग, मोटाई, और पारदर्शिता तय की जा सकती है. इसके अलावा, लाइन बनाने के बाद भी इन प्रॉपर्टी में बदलाव किया जा सकता है. पॉलीलाइन में, स्ट्रोक के इन स्टाइल का इस्तेमाल किया जा सकता है:

strokeColor, "#FFFFFF" फ़ॉर्मैट के हेक्साडेसिमल एचटीएमएल रंग के बारे में बताता है. Polyline क्लास में, नाम वाले रंगों का इस्तेमाल नहीं किया जा सकता.
strokeOpacity, लाइन के रंग की ओपैसिटी तय करने के लिए, 0.0 और 1.0 के बीच की कोई संख्यात्मक वैल्यू तय करता है. डिफ़ॉल्ट वैल्यू 1.0 है.
strokeWeight से लाइन की चौड़ाई पिक्सल में तय की जाती है.

पॉलीलाइन की editable प्रॉपर्टी से यह तय होता है कि उपयोगकर्ता शेप में बदलाव कर सकते हैं या नहीं. नीचे उपयोगकर्ता के हिसाब से बदलाव किए जा सकने वाले शेप दिए गए हैं. इसी तरह, draggable प्रॉपर्टी को सेट करके, उपयोगकर्ताओं को लाइन को खींचने की अनुमति दी जा सकती है.

इस उदाहरण में, दो पिक्सल चौड़ी लाल रंग की पॉलीलाइन बनाई गई है. यह पॉलीलाइन, कैलिफ़ोर्निया के ओकलैंड और ऑस्ट्रेलिया के ब्रिस्बेन के बीच हुई पहली ट्रांस-पैसिफ़िक फ़्लाइट का रास्ता दिखाती है.

TypeScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 3,
      center: { lat: 0, lng: -180 },
      mapTypeId: "terrain",
    }
  );

  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

किसी पॉलीलाइन को हटाना

मैप से पॉलीलाइन हटाने के लिए, setMap() तरीके को कॉल करें. इसके लिए, null को आर्ग्युमेंट के तौर पर पास करें. यहां दिए गए उदाहरण में, flightPath एक पॉलीलाइन ऑब्जेक्ट है:

flightPath.setMap(null);

ध्यान दें कि ऊपर दिए गए तरीके से पॉलीलाइन नहीं मिटती है. इससे मैप से पॉलीलाइन हट जाती है. अगर आपको पॉलीलाइन मिटानी है, तो उसे मैप से हटाएं. इसके बाद, पॉलीलाइन को null पर सेट करें.

पॉलीलाइन की जांच करना

पॉलीलाइन, निर्देशांकों की एक सीरीज़ को LatLng ऑब्जेक्ट के कलेक्शन के तौर पर दिखाती है. इन कोऑर्डिनेट से लाइन का पाथ तय होता है. निर्देशांक पाने के लिए, getPath() को कॉल करें. इससे MVCArray टाइप की एक कैटगरी मिलेगी. इन कार्रवाइयों का इस्तेमाल करके, ऐरे में बदलाव किया जा सकता है और उसकी जांच की जा सकती है:

getAt(), दिए गए ज़ीरो-आधारित इंडेक्स वैल्यू पर LatLng दिखाता है.
insertAt(), 0 से शुरू होने वाले इंडेक्स की दी गई वैल्यू पर, पास किया गया LatLng डालता है. ध्यान दें कि उस इंडेक्स वैल्यू पर मौजूद सभी मौजूदा कोऑर्डिनेट आगे बढ़ जाते हैं.
removeAt(), दिए गए ज़ीरो-आधारित इंडेक्स वैल्यू पर मौजूद LatLng को हटाता है.

ध्यान दें: mvcArray[i] सिंटैक्स का इस्तेमाल करके, किसी ऐरे के iवें एलिमेंट को वापस नहीं पाया जा सकता. आपको mvcArray.getAt(i) का इस्तेमाल करना होगा.

यहां दिए गए उदाहरण में, क्लिक के आधार पर पॉलीलाइन बनाने का तरीका बताया गया है. वर्टेक्स जोड़ने के लिए, मैप पर क्लिक करें.

TypeScript

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

let poly: google.maps.Polyline;
let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event: google.maps.MapMouseEvent) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng as google.maps.LatLng);

  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
let poly;
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });
  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);
  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);
  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

पॉलीलाइन को पसंद के मुताबिक बनाना

सिंबल के तौर पर, किसी पॉलीलाइन में वेक्टर इमेज जोड़ी जा सकती हैं. सिंबल और PolylineOptions क्लास का इस्तेमाल करके, अपने मैप पर पॉलीलाइन के लुक और फ़ील को काफ़ी हद तक कंट्रोल किया जा सकता है. ऐरो, डैश वाली लाइनें, कस्टम सिंबल और ऐनिमेटेड सिंबल के बारे में जानकारी पाने के लिए, सिंबल देखें.

पॉलीगॉन

पॉलीगॉन, बंद पाथ (या लूप) से घिरा हुआ एक क्षेत्र होता है. इसे निर्देशांकों की एक सीरीज़ से तय किया जाता है. Polygon ऑब्जेक्ट, Polyline ऑब्जेक्ट की तरह होते हैं. इनमें क्रम से लगाए गए कोऑर्डिनेट की सीरीज़ होती है. पॉलीगॉन को स्ट्रोक और फ़िल की मदद से बनाया जाता है. पॉलीगॉन के किनारे (स्ट्रोक) के लिए, अपनी पसंद के रंग, मोटाई, और ओपैसिटी तय की जा सकती हैं. साथ ही, बंद किए गए हिस्से (फ़िल) के लिए, अपनी पसंद के रंग और ओपैसिटी तय की जा सकती हैं. रंगों को हेक्साडेसिमल एचटीएमएल फ़ॉर्मैट में दिखाया जाना चाहिए. रंगों के नाम इस्तेमाल नहीं किए जा सकते.

Polygon ऑब्जेक्ट, मुश्किल शेप के बारे में जानकारी दे सकते हैं. जैसे:

एक पॉलीगॉन से तय किए गए कई ऐसे इलाके जो एक-दूसरे से जुड़े हुए नहीं हैं.
ऐसे इलाके जिनमें छेद हों.
एक या उससे ज़्यादा इलाकों के इंटरसेक्शन.

किसी जटिल शेप को तय करने के लिए, कई पाथ वाले पॉलीगॉन का इस्तेमाल किया जाता है.

ध्यान दें: डेटा लेयर, पॉलीगॉन बनाने का एक आसान तरीका है. यह आपके लिए पॉलीगॉन वाइंडिंग को मैनेज करता है. इससे, छेद वाले पॉलीगॉन बनाना आसान हो जाता है. डेटा लेयर के बारे में जानकारी देने वाला दस्तावेज़ देखें.

कोई पॉलीगॉन जोड़ें

पॉलीगोनल एरिया में कई अलग-अलग पाथ शामिल हो सकते हैं. इसलिए, Polygon ऑब्जेक्ट की paths प्रॉपर्टी, MVCArray टाइप के हर ऐरे के लिए ऐरे की जानकारी देती है. हर ऐरे, क्रम से लगाए गए LatLng कोऑर्डिनेट का एक अलग क्रम तय करता है.

सिर्फ़ एक पाथ वाले सामान्य पॉलीगॉन के लिए, LatLng कोऑर्डिनेट के एक ही कलेक्शन का इस्तेमाल करके Polygon बनाया जा सकता है. Maps JavaScript API, कंस्ट्रक्शन के दौरान सामान्य ऐरे को ऐरे के ऐरे में बदल देगा. ऐसा तब होगा, जब इसे paths प्रॉपर्टी में सेव किया जाएगा. यह एपीआई, एक पाथ वाले पॉलीगॉन के लिए एक आसान getPath() तरीका उपलब्ध कराता है.

ध्यान दें: इस तरीके से सामान्य पॉलीगॉन बनाने पर भी, आपको पॉलीगॉन से वैल्यू वापस पाने के लिए, पाथ को MVCArray के तौर पर बदलना होगा.

पॉलीगॉन की editable प्रॉपर्टी से यह तय होता है कि उपयोगकर्ता शेप में बदलाव कर सकते हैं या नहीं. यहां उपयोगकर्ता के हिसाब से बदलाव किए जा सकने वाले शेप दिए गए हैं. इसी तरह, draggable प्रॉपर्टी को सेट करके, उपयोगकर्ताओं को शेप को खींचकर ले जाने की अनुमति दी जा सकती है.

TypeScript

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
      mapTypeId: "terrain",
    }
  );

  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });
  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

पॉलीगॉन अपने-आप पूरा होने की सुविधा

ऊपर दिए गए उदाहरण में Polygon में LatLng निर्देशांकों के चार सेट शामिल हैं. हालांकि, ध्यान दें कि पहले और आखिरी सेट एक ही जगह की जानकारी देते हैं. इससे लूप पूरा हो जाता है. हालांकि, व्यवहार में, चूंकि पॉलीगॉन बंद किए गए क्षेत्रों को तय करते हैं, इसलिए आपको निर्देशांकों का आखिरी सेट तय करने की ज़रूरत नहीं है. Maps JavaScript API, किसी भी पाथ के लिए पॉलीगॉन को अपने-आप पूरा कर देगा. इसके लिए, वह आखिरी जगह को पहली जगह से जोड़ने वाला स्ट्रोक बनाएगा.

यह उदाहरण, पिछले उदाहरण जैसा ही है. हालांकि, इसमें आखिरी LatLng को शामिल नहीं किया गया है: उदाहरण देखें.

पॉलीगॉन हटाना

मैप से किसी पॉलीगॉन को हटाने के लिए, setMap() तरीके को कॉल करें. इसके लिए, null को आर्ग्युमेंट के तौर पर पास करें. यहां दिए गए उदाहरण में, bermudaTriangle एक पॉलीगॉन ऑब्जेक्ट है:

bermudaTriangle.setMap(null);

ध्यान दें कि ऊपर दिए गए तरीके से, पॉलीगॉन नहीं मिटता है. इससे मैप से पॉलीगॉन हट जाता है. अगर आपको पॉलीगॉन मिटाना है, तो उसे मैप से हटाएं. इसके बाद, पॉलीगॉन को null पर सेट करें.

पॉलीगॉन की जांच करना

पॉलीगॉन, कोऑर्डिनेट की अपनी सीरीज़ को ऐरे के ऐरे के तौर पर दिखाता है. इसमें हर ऐरे, MVCArray टाइप का होता है. हर "लीफ" कैटगरी, LatLng कोऑर्डिनेट की एक कैटगरी होती है. यह एक पाथ के बारे में बताती है. इन निर्देशांकों को वापस पाने के लिए, Polygon ऑब्जेक्ट के getPaths() तरीके को कॉल करें. ऐरे एक MVCArray है. इसलिए, आपको इन कार्रवाइयों का इस्तेमाल करके इसे बदलना और इसकी जांच करनी होगी:

getAt(), दिए गए ज़ीरो-आधारित इंडेक्स वैल्यू पर LatLng दिखाता है.
insertAt(), 0 से शुरू होने वाले इंडेक्स की दी गई वैल्यू पर, पास किया गया LatLng डालता है. ध्यान दें कि उस इंडेक्स वैल्यू पर मौजूद सभी मौजूदा कोऑर्डिनेट आगे बढ़ जाते हैं.
removeAt(), दिए गए ज़ीरो-आधारित इंडेक्स वैल्यू पर मौजूद LatLng को हटाता है.

TypeScript

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

let map: google.maps.Map;

let infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords: google.maps.LatLngLiteral[] = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);

  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event: any) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this as google.maps.Polygon;
  const vertices = polygon.getPath();

  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
let map;
let infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);
  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this;
  const vertices = polygon.getPath();
  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

पॉलीगॉन में छेद करना

किसी पॉलीगॉन के अंदर खाली जगह बनाने के लिए, आपको दो पाथ बनाने होंगे. इनमें से एक पाथ दूसरे के अंदर होना चाहिए. होल बनाने के लिए, अंदरूनी पाथ को तय करने वाले कोऑर्डिनेट, बाहरी पाथ को तय करने वाले कोऑर्डिनेट के उलट क्रम में होने चाहिए. उदाहरण के लिए, अगर बाहरी पाथ के निर्देशांक घड़ी की सुई की दिशा में हैं, तो अंदरूनी पाथ के निर्देशांक घड़ी की सुई की उलटी दिशा में होने चाहिए.

ध्यान दें: डेटा लेयर, आपके लिए अंदरूनी और बाहरी पाथ के क्रम को मैनेज करती है. इससे छेद वाले पॉलीगॉन बनाना आसान हो जाता है. डेटा लेयर के बारे में जानकारी देने वाला दस्तावेज़ देखें.

इस उदाहरण में, दो पाथ वाला पॉलीगॉन बनाया गया है. इसमें अंदरूनी पाथ, बाहरी पाथ की उलटी दिशा में है.

TypeScript

// This example creates a triangular polygon with a hole in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
    }
  );

  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];

  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example creates a triangular polygon with a hole in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
  });
  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];
  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

आयत

Google Maps JavaScript API में, सामान्य Polygon क्लास के अलावा, Rectangle ऑब्जेक्ट के लिए एक खास क्लास भी शामिल होती है, ताकि उन्हें आसानी से बनाया जा सके.

रेक्टैंगल जोड़ना

Rectangle, Polygon की तरह ही होता है. इसमें रेक्टैंगल के किनारे (स्ट्रोक) के लिए, अपनी पसंद के रंग, मोटाई, और ओपैसिटी तय की जा सकती है. साथ ही, रेक्टैंगल के अंदर के हिस्से (फ़िल) के लिए, अपनी पसंद के रंग और ओपैसिटी तय की जा सकती है. रंगों को हेक्साडेसिमल संख्या वाले एचटीएमएल स्टाइल में दिखाया जाना चाहिए.

Polygon के उलट, आपको Rectangle के लिए paths तय करने की ज़रूरत नहीं होती. इसके बजाय, आयत में bounds प्रॉपर्टी होती है. यह प्रॉपर्टी, आयत के लिए google.maps.LatLngBounds तय करके, आयत के आकार के बारे में बताती है.

रेक्टैंगल की editable प्रॉपर्टी से यह तय होता है कि उपयोगकर्ता शेप में बदलाव कर सकते हैं या नहीं. यहां उपयोगकर्ता के हिसाब से बदले जा सकने वाले शेप दिए गए हैं. इसी तरह, draggable प्रॉपर्टी सेट करके, लोगों को रेक्टैंगल को खींचने की अनुमति दी जा सकती है.

TypeScript

// This example adds a red rectangle to a map.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 33.678, lng: -116.243 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example adds a red rectangle to a map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

यहां दिया गया कोड, उपयोगकर्ता के मैप पर ज़ूम लेवल बदलने पर हर बार एक रेक्टैंगल बनाता है. रेक्टैंगल का साइज़, व्यूपोर्ट के हिसाब से तय होता है.

TypeScript

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 40.74852, lng: -73.981687 },
      mapTypeId: "terrain",
    }
  );

  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds() as google.maps.LatLngBounds,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 40.74852, lng: -73.981687 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds(),
    });
  });
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

रेक्टैंगल हटाना

मैप से किसी रेक्टैंगल को हटाने के लिए, setMap() तरीके को कॉल करें. इसके लिए, null को आर्ग्युमेंट के तौर पर पास करें.

rectangle.setMap(null);

ध्यान दें कि ऊपर दिए गए तरीके से, रेक्टैंगल नहीं मिटता है. इससे मैप से रेक्टैंगल हट जाता है. अगर आपको रेक्टैंगल मिटाना है, तो उसे मैप से हटाएं. इसके बाद, रेक्टैंगल को null पर सेट करें.

सर्कल्स

सामान्य Polygon क्लास के अलावा, Google Maps JavaScript API में Circle ऑब्जेक्ट के लिए एक खास क्लास शामिल होती है, ताकि उन्हें आसानी से बनाया जा सके.

कोई सर्कल जोड़ना

Circle, Polygon की तरह ही होता है. इसमें सर्कल के किनारे (स्ट्रोक) के लिए, कस्टम कलर, वेट, और ओपैसिटी तय की जा सकती हैं. साथ ही, सर्कल के अंदर के हिस्से (फ़िल) के लिए, कस्टम कलर और ओपैसिटी तय की जा सकती हैं. रंगों को हेक्साडेसिमल न्यूमेरिक एचटीएमएल स्टाइल में दिखाया जाना चाहिए.

Polygon के उलट, आपको Circle के लिए paths तय करने की ज़रूरत नहीं होती. इसके बजाय, सर्कल में दो अतिरिक्त प्रॉपर्टी होती हैं, जिनसे उसके आकार के बारे में पता चलता है:

center, सर्कल के केंद्र के google.maps.LatLng के बारे में बताता है.
radius, सर्कल की त्रिज्या को मीटर में दिखाता है.

सर्कल की editable प्रॉपर्टी से यह तय होता है कि उपयोगकर्ता शेप में बदलाव कर सकते हैं या नहीं. यहां उपयोगकर्ता के हिसाब से बदलाव किए जा सकने वाले शेप दिए गए हैं. इसी तरह, draggable प्रॉपर्टी को सेट करके, उपयोगकर्ताओं को सर्कल को खींचने की अनुमति दी जा सकती है.

इस उदाहरण में, जापान के क्योटो शहर में अलग-अलग जगहों के बीच पैदल चलने में लगने वाले अनुमानित समय को दिखाने के लिए, सर्कल का इस्तेमाल किया गया है. मेन्यू से ज़रूरी दूरी चुनें. इसके बाद, सर्कल को फिर से बीच में लाने के लिए, मैप पर क्लिक करें. इसके बाद, सर्कल को खींचकर उसकी जगह बदलें.

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;

async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
    (await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary;
    // Get the gmp-map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    const buttons = document.querySelectorAll('input[name="radius"]');

    const walkingCircle = new google.maps.Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });

    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;

    const pinSvg = parser.parseFromString(
        svgString,
        'image/svg+xml'
    ).documentElement;

    const centerMarker = new google.maps.marker.AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        //@ts-ignore
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);

    // Wait for the map to finish drawing its tiles.
    google.maps.event.addListenerOnce(innerMap, 'tilesloaded', function () {
        // Get the controls div
        const controls = document.getElementById('control-panel');

        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });

    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (event) => {
            const target = event.target as HTMLInputElement;
            walkingCircle.setRadius(Number(target.value));
        });
    });

    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });

    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}

initMap();index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
async function initMap() {
    // Import the needed libraries.
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    (await google.maps.importLibrary('marker'));
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');
    const initialCenter = { lat: 34.98956821576194, lng: 135.74239981260283 }; // Hotel Emion, Kyoto, Japan
    // Get the inner map.
    const innerMap = mapElement.innerMap;
    const buttons = document.querySelectorAll('input[name="radius"]');
    const walkingCircle = new google.maps.Circle({
        strokeColor: '#ffdd00ff',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ffdd00ff',
        fillOpacity: 0.35,
        map: innerMap,
        center: initialCenter,
        radius: 400,
        draggable: true,
        editable: false,
    });
    // Define a "Crosshair" vector icon
    const parser = new DOMParser();
    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-6 -6 12 12"><path d="M -6,0 L 6,0 M 0,-6 L 0,6" stroke="black" stroke-width="1"/></svg>`;
    const pinSvg = parser.parseFromString(svgString, 'image/svg+xml').documentElement;
    const centerMarker = new google.maps.marker.AdvancedMarkerElement({
        position: initialCenter,
        title: 'A marker using a custom SVG image.',
        //@ts-ignore
        anchorLeft: '-50%',
        anchorTop: '-50%',
    });
    centerMarker.append(pinSvg);
    mapElement.append(centerMarker);
    // Wait for the map to finish drawing its tiles.
    google.maps.event.addListenerOnce(innerMap, 'tilesloaded', function () {
        // Get the controls div
        const controls = document.getElementById('control-panel');
        // Display controls once map is loaded.
        if (controls) {
            controls.style.display = 'block';
        }
    });
    // Add event listener to update the radius based on user selection.
    buttons.forEach((button) => {
        button.addEventListener('change', (event) => {
            const target = event.target;
            walkingCircle.setRadius(Number(target.value));
        });
    });
    // Handle user click, reset the map center and position the circle.
    innerMap.addListener('click', (mapsMouseEvent) => {
        const newCenter = mapsMouseEvent.latLng;
        walkingCircle.setCenter(newCenter);
        centerMarker.position = newCenter;
        innerMap.panTo(newCenter);
    });
    // Handle user dragging the circle, update the center marker position.
    walkingCircle.addListener('center_changed', () => {
        centerMarker.position = walkingCircle.getCenter();
    });
}
initMap();index.js

सीएसएस

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

#control-panel {
  display: none; /* Set to 'display: block' after the map loads. */
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-family: "Roboto", "sans-serif";
  font-size: medium;
  margin: 10px;
  padding: 10px;
}style.css

एचटीएमएल

<html>
    <head>
        <title>Circles</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- 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: "weekly"});</script>
    </head>
    <body>
        <gmp-map
            center="34.98956821576194, 135.74239981260283"
            zoom="15"
            map-id="DEMO_MAP_ID">
            <div id="control-panel" slot="control-inline-start-block-start">
                <input
                    id="short-walk"
                    type="radio"
                    name="radius"
                    value="400"
                    checked />
                <label for="short-walk">Short Walk (~5 minutes)</label><br />
                <input
                    id="medium-walk"
                    type="radio"
                    name="radius"
                    value="800" />
                <label for="medium-walk">Medium Walk (~15 minutes)</label><br />
                <input id="long-walk" type="radio" name="radius" value="1600" />
                <label for="long-walk">Long Walk (~30 minutes) </label>
            </div>
        </gmp-map>
    </body>
</html>index.html

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net

किसी सर्कल को हटाना

मैप से किसी सर्कल को हटाने के लिए, setMap() तरीके को कॉल करें. इसके लिए, null को आर्ग्युमेंट के तौर पर पास करें.

circle.setMap(null);

ध्यान दें कि ऊपर दिए गए तरीके से सर्कल नहीं मिटता. इससे मैप से सर्कल हट जाता है. अगर आपको सर्कल मिटाना है, तो उसे मैप से हटाएं. इसके बाद, सर्कल को null पर सेट करें.

ऐसे शेप जिनमें उपयोगकर्ता बदलाव कर सकते हैं और उन्हें एक जगह से दूसरी जगह ले जा सकते हैं

किसी शेप को बदलाव करने लायक़ बनाने पर, उसमें हैंडल जुड़ जाते हैं. लोग इनका इस्तेमाल करके, सीधे मैप पर शेप की जगह बदल सकते हैं, उसे फिर से आकार दे सकते हैं, और उसका साइज़ बदल सकते हैं. आपके पास किसी शेप को खींचकर छोड़ने की सुविधा देने का विकल्प भी होता है, ताकि लोग उसे मैप पर किसी दूसरी जगह पर ले जा सकें.

उपयोगकर्ता के ऑब्जेक्ट में किए गए बदलाव, सेशन के बीच बने नहीं रहते. अगर आपको उपयोगकर्ता के बदलावों को सेव करना है, तो आपको जानकारी खुद कैप्चर और सेव करनी होगी.

किसी शेप में बदलाव करने की अनुमति देना

किसी भी शेप (पॉलीलाइन, पॉलीगॉन, सर्कल, और रेक्टैंगल) को उपयोगकर्ता के हिसाब से बदलाव करने के लिए सेट किया जा सकता है. इसके लिए, शेप के विकल्पों में editable को true पर सेट करें.

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

उदाहरण देखें

किसी शेप को खींचकर छोड़ने की सुविधा चालू करना

डिफ़ॉल्ट रूप से, मैप पर बनाया गया कोई भी शेप अपनी जगह पर स्थिर रहेगा. उपयोगकर्ताओं को मैप पर किसी शेप को दूसरी जगह पर ले जाने की अनुमति देने के लिए, शेप के विकल्पों में draggable को true पर सेट करें.

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

किसी पॉलीगॉन या पॉलीलाइन पर खींचकर छोड़ने की सुविधा चालू करते समय, आपको पॉलीगॉन या पॉलीलाइन को जियोडेसिक बनाने पर भी विचार करना चाहिए. इसके लिए, उसकी geodesic प्रॉपर्टी को true पर सेट करें.

जियोडेसिक पॉलीगॉन को एक जगह से दूसरी जगह ले जाने पर, उसकी भौगोलिक आकृति में कोई बदलाव नहीं होता. हालांकि, मर्कटर प्रोजेक्शन में पॉलीगॉन को उत्तर या दक्षिण की ओर ले जाने पर, वह थोड़ा अलग दिखता है. नॉन-जियोडेसिक पॉलीगॉन, स्क्रीन पर हमेशा अपनी शुरुआती स्थिति में दिखेंगे.

जियोडेसिक पॉलीलाइन में, पॉलीलाइन के सेगमेंट को पृथ्वी की सतह पर दो बिंदुओं के बीच सबसे छोटे पाथ के तौर पर दिखाया जाता है. इसमें यह माना जाता है कि पृथ्वी एक गोला है. वहीं, मर्केटर प्रोजेक्शन में सीधी लाइनों का इस्तेमाल किया जाता है.

निर्देशांक सिस्टम के बारे में ज़्यादा जानने के लिए, मैप और टाइल के निर्देशांक से जुड़ी गाइड देखें.

इस मैप में, लगभग एक ही साइज़ और डाइमेंशन वाले दो त्रिकोण दिखाए गए हैं. लाल रंग के त्रिभुज की geodesic प्रॉपर्टी को true पर सेट किया गया है. ध्यान दें कि उत्तर की ओर बढ़ने पर, इसका आकार कैसे बदलता है.

उदाहरण देखें

बदलाव करने से जुड़े इवेंट सुनना

किसी शेप में बदलाव करने पर, बदलाव पूरा होने के बाद एक इवेंट ट्रिगर होता है. इन इवेंट के बारे में यहां बताया गया है.

आकार	इवेंट
सर्कल	`radius_changed` `center_changed`
पॉलीगॉन	`insert_at` `remove_at` `set_at` लिसनर को पॉलीगॉन के पाथ पर सेट किया जाना चाहिए. अगर पॉलीगॉन में एक से ज़्यादा पाथ हैं, तो हर पाथ पर एक लिसनर सेट करना होगा.
पॉलीलाइन	`insert_at` `remove_at` `set_at` लिसनर को पॉलीलाइन के पाथ पर सेट किया जाना चाहिए.
रेक्टैंगल	`bounds_changed`

कुछ काम के कोड स्निपेट:

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

किसी आयत में बदलाव करने वाले इवेंट को मैनेज करने का उदाहरण देखें: उदाहरण देखें.

ड्रैग करने से जुड़े इवेंट सुनना

किसी शेप को खींचने पर, खींचने की कार्रवाई शुरू और खत्म होने के साथ-साथ खींचने के दौरान भी इवेंट ट्रिगर होते हैं. नीचे दिए गए इवेंट, पॉलीलाइन, पॉलीगॉन, सर्कल, और रेक्टैंगल के लिए फ़ायर किए जाते हैं.

इवेंट	ब्यौरा
`dragstart`	यह इवेंट तब ट्रिगर होता है, जब उपयोगकर्ता शेप को खींचना शुरू करता है.
`drag`	जब उपयोगकर्ता किसी शेप को खींच रहा होता है, तब यह इवेंट बार-बार ट्रिगर होता है.
`dragend`	यह तब ट्रिगर होता है, जब उपयोगकर्ता शेप को खींचना बंद कर देता है.

इवेंट मैनेज करने के बारे में ज़्यादा जानने के लिए, इवेंट से जुड़े दस्तावेज़ देखें.