शेप्स

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

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

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

मैप से पॉलीलाइन हटाने के लिए, setMap() वाले उस तरीके को कॉल करें जो null को आर्ग्युमेंट के तौर पर पास करता है. यहां दिए गए उदाहरण में, 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 क्लास की मदद से, अपने मैप पर पॉलीलाइन के लुक और स्टाइल को बेहतर तरीके से मैनेज किया जा सकता है. arrows, डैश लाइन, कस्टम सिंबल, और ऐनिमेशन वाले सिंबल के बारे में जानकारी के लिए, सिंबल देखें.

पॉलीगॉन

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

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

  • किसी एक पॉलीगॉन से तय किए गए, एक से ज़्यादा गैर-सतत क्षेत्र.
  • ऐसी जगहें जिनमें छेद हैं.
  • एक या ज़्यादा क्षेत्रों के प्रतिच्छेदन.

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

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

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

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

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

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