Rectangle

The Rectangle component draws a rectangle on the map defined by southwest and northeast coordinates.

Props

PropTypeDefaultDescription
boundsgoogle.maps.LatLngBounds | google.maps.LatLngBoundsLiteralBounds of the rectangle
optionsgoogle.maps.RectangleOptionsRectangle configuration options
onLoad(rectangle: google.maps.Rectangle) => voidCallback when rectangle is loaded
onUnmount(rectangle: google.maps.Rectangle) => voidCallback before rectangle is destroyed

Event Handler Props

PropTypeDescription
onClick(e: google.maps.MapMouseEvent) => voidClick event handler
onDblClick(e: google.maps.MapMouseEvent) => voidDouble click event handler
onDrag(e: google.maps.MapMouseEvent) => voidDrag event handler
onDragEnd(e: google.maps.MapMouseEvent) => voidDrag end event handler
onDragStart(e: google.maps.MapMouseEvent) => voidDrag start event handler
onMouseDown(e: google.maps.MapMouseEvent) => voidMouse down event handler
onMouseMove(e: google.maps.MapMouseEvent) => voidMouse move event handler
onMouseOut(e: google.maps.MapMouseEvent) => voidMouse out event handler
onMouseOver(e: google.maps.MapMouseEvent) => voidMouse over event handler
onMouseUp(e: google.maps.MapMouseEvent) => voidMouse up event handler
onRightClick(e: google.maps.MapMouseEvent) => voidRight click event handler
onBoundsChanged() => voidBounds changed event handler

Usage

<script>
  import { APIProvider, GoogleMap, Rectangle } from 'svelte-google-maps-api';
  
  const apiKey = 'YOUR_API_KEY';
  const mapOptions = {
    center: { lat: 35.6812362, lng: 139.7649361 },
    zoom: 12
  };
  
  // Rectangle bounds
  const bounds = {
    north: 35.6912362,
    south: 35.6712362,
    east: 139.7749361,
    west: 139.7549361
  };
  
  // Rectangle options
  const rectangleOptions = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  };
  
  function handleRectangleClick() {
    alert('Rectangle clicked!');
  }
</script>

<div style="height: 400px; width: 100%;">
  <APIProvider {apiKey}>
    <GoogleMap id="map" options={mapOptions} mapContainerStyle="width: 100%; height: 100%;">
      <Rectangle 
        bounds={bounds} 
        options={rectangleOptions}
        onClick={handleRectangleClick}
      />
    </GoogleMap>
  </APIProvider>
</div>
svelte

Editable Rectangle

You can make the rectangle editable by setting the editable option to true:

<script>
  import { APIProvider, GoogleMap, Rectangle } from 'svelte-google-maps-api';
  
  const apiKey = 'YOUR_API_KEY';
  const mapOptions = {
    center: { lat: 35.6812362, lng: 139.7649361 },
    zoom: 12
  };
  
  // Rectangle bounds
  let bounds = {
    north: 35.6912362,
    south: 35.6712362,
    east: 139.7749361,
    west: 139.7549361
  };
  
  // Rectangle options
  const rectangleOptions = {
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.35,
    editable: true
  };
  
  function handleBoundsChanged(rectangle) {
    // Get the updated bounds
    const newBounds = rectangle.getBounds();
    bounds = {
      north: newBounds.getNorthEast().lat(),
      south: newBounds.getSouthWest().lat(),
      east: newBounds.getNorthEast().lng(),
      west: newBounds.getSouthWest().lng()
    };
    
    console.log('Bounds updated:', bounds);
  }
</script>

<div>
  <p>North: {bounds.north.toFixed(6)}, East: {bounds.east.toFixed(6)}</p>
  <p>South: {bounds.south.toFixed(6)}, West: {bounds.west.toFixed(6)}</p>
  
  <div style="height: 400px; width: 100%;">
    <APIProvider {apiKey}>
      <GoogleMap id="map" options={mapOptions} mapContainerStyle="width: 100%; height: 100%;">
        <Rectangle 
          bounds={bounds} 
          options={rectangleOptions}
          onLoad={(rectangle) => {
            // Add a listener for bounds changes
            google.maps.event.addListener(rectangle, 'bounds_changed', () => handleBoundsChanged(rectangle));
          }}
        />
      </GoogleMap>
    </APIProvider>
  </div>
</div>
svelte

Context

The Rectangle component consumes the context set by GoogleMap to access the map instance:

const { getMap } = getContext('map') ?? {};
let map = getMap();
javascript

Notes

  • The Rectangle component must be a child of the GoogleMap component.
  • It creates a Google Maps rectangle and attaches it to the map.
  • Event listeners are automatically cleaned up when the component is destroyed.
  • The rectangle is automatically removed from the map when the component is unmounted.
Last update at: 2025/05/05 16:35:24