शेप्स

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

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;
उदाहरण देखें

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

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

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

flightPath.setMap(null);

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

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

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

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

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;

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;
उदाहरण देखें

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

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

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

पॉलीगॉन

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

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

  • एक ही पॉलीगॉन के ज़रिए तय किए गए कई सारे पास के इलाके.
  • छेद वाले इलाके.
  • एक या एक से ज़्यादा इलाकों के सेक्शन.

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

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

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

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

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

पॉलीगॉन की 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;

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;
उदाहरण देखें

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

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

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

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

कोई पॉलीगॉन हटाएं

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

bermudaTriangle.setMap(null);

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

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

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

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

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;
उदाहरण देखें

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

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

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

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

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

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;

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;
उदाहरण देखें

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

आयत

सामान्य 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;

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;
उदाहरण देखें

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

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

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;

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;
उदाहरण देखें

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

आयत को हटाना

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

rectangle.setMap(null);

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

सर्कल्स

Polygon को बनाने में आसान होने के लिए, सामान्य 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;

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;
उदाहरण देखें

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

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

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

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