आकार और रेखाएं

प्लैटफ़ॉर्म चुनें: 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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

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

ध्यान दें: JavaScript को TypeScript स्निपेट से इकट्ठा किया जाता है.

उदाहरण देखें

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

JSFiddle.net Google क्लाउड शेल

पॉलीलाइन हटाएं

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

flightPath.setMap(null);

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

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

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

• getAt(), किसी दी गई शून्य-आधारित इंडेक्स वैल्यू पर LatLng दिखाता है.
• insertAt(), शून्य-आधारित इंडेक्स वैल्यू पर, पास किया गया 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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

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

ध्यान दें: JavaScript को TypeScript स्निपेट से इकट्ठा किया जाता है.

उदाहरण देखें

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

JSFiddle.net Google क्लाउड शेल

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

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

पॉलीगॉन

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

Polygon ऑब्जेक्ट, मुश्किल आकारों के बारे में बता सकते हैं. इनमें ये शामिल हैं:

• एक पॉलीगॉन द्वारा परिभाषित कई गैर-संतत क्षेत्र.
• उन जगहों को चुनें जिनमें छेद हैं.
• एक या एक से ज़्यादा इलाकों के चौराहे.

कोई जटिल आकार तय करने के लिए, आप एक से ज़्यादा पाथ वाले पॉलीगॉन का इस्तेमाल करें.

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

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

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

सिर्फ़ एक पाथ वाले सामान्य पॉलीगॉन के लिए, LatLng निर्देशांक की एक कैटगरी का इस्तेमाल करके Polygon बनाया जा सकता है. paths प्रॉपर्टी में सेव करते समय, Maps JavaScript API सामान्य अरे को अरे के कलेक्शन में बदल देगा. यह एपीआई, एक पाथ वाले पॉलीगॉन के लिए 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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

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

ध्यान दें: JavaScript को TypeScript स्निपेट से इकट्ठा किया जाता है.

उदाहरण देखें

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

JSFiddle.net Google क्लाउड शेल

पॉलीगॉन अपने-आप पूरा होना

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

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

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

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

bermudaTriangle.setMap(null);

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

पॉलीगॉन हटाना, पॉलीलाइन हटाने जैसा ही है. पॉलीलाइन पर इस्तेमाल हुए कोड को देखने के लिए: उदाहरण देखें.

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

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

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

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

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

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

ध्यान दें: JavaScript को TypeScript स्निपेट से इकट्ठा किया जाता है.

उदाहरण देखें

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

JSFiddle.net Google क्लाउड शेल

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

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

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

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

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

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

ध्यान दें: JavaScript को TypeScript स्निपेट से इकट्ठा किया जाता है.

उदाहरण देखें

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

JSFiddle.net Google क्लाउड शेल

आयत

सामान्य Polygon क्लास के अलावा, Google Maps JavaScript API में 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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

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

ध्यान दें: JavaScript को TypeScript स्निपेट से इकट्ठा किया जाता है.

उदाहरण देखें

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

JSFiddle.net Google क्लाउड शेल

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

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

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

ध्यान दें: JavaScript को TypeScript स्निपेट से इकट्ठा किया जाता है.

उदाहरण देखें

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

JSFiddle.net Google क्लाउड शेल

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

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

rectangle.setMap(null);

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

रेक्टैंगल हटाना, पॉलीलाइन हटाने जैसा ही है. पॉलीलाइन के लिए इस्तेमाल हुआ कोड देखने के लिए: उदाहरण देखें.

सर्कल्स

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

एक मंडली जोड़ें

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

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

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

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

TypeScript

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.

interface City {
  center: google.maps.LatLngLiteral;
  population: number;
}

const citymap: Record<string, City> = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap(): void {
  // Create the map.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 37.09, lng: -95.712 },
      mapTypeId: "terrain",
    }
  );

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

const citymap = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap() {
  // Create the map.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 37.09, lng: -95.712 },
    mapTypeId: "terrain",
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

window.initMap = initMap;
index.js

ध्यान दें: JavaScript को TypeScript स्निपेट से इकट्ठा किया जाता है.

उदाहरण देखें

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

JSFiddle.net Google क्लाउड शेल

कोई मंडली निकालें

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

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	यह तब ट्रिगर होता है, जब उपयोगकर्ता आकार को खींचना बंद कर देता है.

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