GoogleMap

The GoogleMap component renders a Google Map instance.

Props

PropTypeDefaultDescription
idstringUnique identifier for the map container
optionsgoogle.maps.MapOptions{}Google Maps configuration options
mapContainerStylestring'width:100%;height:100%'CSS styles for the map container
mapContainerClassNamestringCSS class for the map container
onLoad(map: google.maps.Map) => voidCallback when map is loaded
onUnmount(map: google.maps.Map) => voidCallback before map 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
onCenterChanged(e: google.maps.MapMouseEvent) => voidCenter changed event handler

Usage

<script>
  import { APIProvider, GoogleMap } from 'svelte-google-maps-api';
  
  const apiKey = 'YOUR_API_KEY';
  const mapOptions = {
    center: { lat: 35.6812362, lng: 139.7649361 },
    zoom: 10
  };
  
  function handleClick(e) {
    console.log('Map clicked at:', e.latLng.lat(), e.latLng.lng());
  }
  
  function handleLoad(map) {
    console.log('Map loaded:', map);
  }
</script>

<div style="height: 400px; width: 100%;">
  <APIProvider {apiKey}>
    <GoogleMap 
      id="map" 
      options={mapOptions} 
      mapContainerStyle="width: 100%; height: 100%;"
      onClick={handleClick}
      onLoad={handleLoad}
    />
  </APIProvider>
</div>
svelte

Context

The GoogleMap component consumes the context set by APIProvider and sets its own context with the map instance:

setContext('map', { getMap: () => map });
javascript

This context is used by child components like Marker.

Example with Event Handling

<script>
  import { APIProvider, GoogleMap } from 'svelte-google-maps-api';
  
  const apiKey = 'YOUR_API_KEY';
  const mapOptions = {
    center: { lat: 35.6812362, lng: 139.7649361 },
    zoom: 10
  };
  
  let clickedPosition = null;
  
  function handleClick(e) {
    clickedPosition = {
      lat: e.latLng.lat(),
      lng: e.latLng.lng()
    };
  }
</script>

<div>
  {#if clickedPosition}
    <p>Clicked at: {clickedPosition.lat.toFixed(6)}, {clickedPosition.lng.toFixed(6)}</p>
  {:else}
    <p>Click on the map to see coordinates</p>
  {/if}
  
  <div style="height: 300px; width: 100%;">
    <APIProvider {apiKey}>
      <GoogleMap 
        id="map" 
        options={mapOptions} 
        mapContainerStyle="width: 100%; height: 100%;"
        onClick={handleClick}
      />
    </APIProvider>
  </div>
</div>
svelte

Notes

  • The GoogleMap component must be a child of the APIProvider component.
  • It creates a Google Maps instance and attaches it to the specified DOM element.
  • Event listeners are automatically cleaned up when the component is destroyed.
Last update at: 2025/05/05 16:35:24