รูปร่างและเส้น

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

// 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

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