Google Maps JavaScript API Samples

You can style feature layers by assigning a google.maps.FeatureStyleOptions object or a styling function to the layer's style property.

• Static Styling: Apply the same style to every feature in the layer.
• Dynamic Styling: Provide a function that receives feature parameters and returns different FeatureStyleOptions based on the feature's properties (e.g., highlighting a specific placeId).

Note: To use Data-Driven Styling, your Map must be initialized with a mapId that has a style configured in the Google Cloud Console to enable the desired feature types.

// Static style
countryLayer.style = {
    fillColor: 'white',
    fillOpacity: 0.1,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2.0,
};

// Dynamic style based on placeId
const targetPlaceId = 'SOME_PLACE_ID';
countryLayer.style = (params) => {
    if (params.feature.placeId === targetPlaceId) {
        return {
            fillColor: 'blue',
            fillOpacity: 0.5,
            strokeColor: 'blue',
            strokeOpacity: 1.0,
            strokeWeight: 2.0,
        };
    } else {
        return {
            fillColor: 'white',
            fillOpacity: 0.1,
            strokeColor: 'black',
            strokeOpacity: 1.0,
            strokeWeight: 1.0,
        };
    }
};

To add custom HTML or images to a Google Map that move and scale with the map, extend the google.maps.OverlayView class. You must implement four key lifecycle methods to manage the overlay's presence and positioning:

1. constructor: Initialize your custom properties (e.g., image URLs, bounds).
2. onAdd(): Called when the overlay is added to the map. Use this to create your DOM elements and append them to one of the map's panes via this.getPanes(). Common panes include overlayLayer.
3. draw(): Called when the map's projection changes (e.g., zoom or pan). Use this.getProjection() to convert LatLng coordinates to pixel coordinates using fromLatLngToDivPixel(). This allows you to position and resize your DOM elements correctly.
4. onRemove(): Called when the overlay is removed from the map. Use this to clean up your DOM elements to prevent memory leaks.

Once the class is defined, instantiate it and call .setMap(map) to display it.

class MyCustomOverlay extends google.maps.OverlayView {
  private div_: HTMLElement | null = null;
  private bounds_: google.maps.LatLngBounds;

  constructor(bounds: google.maps.LatLngBounds) {
    super();
    this.bounds_ = bounds;
  }

  onAdd() {
    this.div_ = document.createElement("div");
    const panes = this.getPanes()!;
    panes.overlayLayer.appendChild(this.div_);
  }

  draw() {
    const projection = this.getProjection()!;
    const sw = projection.fromLatLngToDivPixel(this.bounds_.getSouthWest())!;
    const ne = projection.fromLatLngToDivPixel(this.bounds_.getNorthEast())!;

    if (this.div_) {
      this.div_.style.left = sw.x + "px";
      this.div_.style.top = sw.y + "px"; // Note: logic depends on coordinate system
      this.div_.style.width = (ne.x - sw.x) + "px";
      this.div_.style.height = (ne.y - sw.y) + "px";
    }
  }

  onRemove() {
    if (this.div_) {
      this.div_.parentNode?.removeChild(this.div_);
      this.div_ = null;
    }
  }
}

const overlay = new MyCustomOverlay(bounds);
overlay.setMap(map);

When using Google Maps objects (like LatLng or LatLngLiteral) as dependencies in React hooks (e.g., useEffect), standard shallow comparison or even standard deep comparison may fail or trigger unnecessary updates.

To solve this, implement a custom equality check using google.maps.LatLng.equals(). This ensures that two different object instances representing the same coordinates are treated as equal by React's dependency tracking.

import { isLatLngLiteral } from "@googlemaps/typescript-guards";
import { createCustomEqual } from "fast-equals";

const deepCompareEqualsForMaps = createCustomEqual(
  (deepEqual) => (a: any, b: any) => {
    if (
      isLatLngLiteral(a) ||
      a instanceof google.maps.LatLng ||
      isLatLngLiteral(b) ||
      b instanceof google.maps.LatLng
    ) {
      return new google.maps.LatLng(a).equals(new google.maps.LatLng(b));
    }
    return deepEqual(a, b);
  }
);

To make Deck.gl layers interactive (e.g., pickable: true) while they are overlaid on a Google Map, you must intercept Google Maps mouse events and convert them into Deck.gl events.

1. Coordinate Projection: Use deck.getViewports()[0].project([lng, lat]) to convert the Google Maps latLng into the pixel coordinates expected by Deck.gl.
2. Event Mapping: Map Google Maps event types to Deck.gl types:
   • click $\rightarrow$ click (Note: You may need to manually trigger pickObject for click events if not using pointer events).
   • dblclick $\rightarrow$ click with tapCount: 2.
   • mousemove $\rightarrow$ pointermove.
   • mouseout $\rightarrow$ pointerleave.
3. Redraw: Call this.requestRedraw() after handling events to ensure the Deck.gl layer updates its visual state (like highlights).

handleMouseEvent(deck: any, type: string, event: google.maps.MapMouseEvent) {
  const point = deck.getViewports()[0].project([
    event.latLng!.lng(), 
    event.latLng!.lat()
  ]);
  
  const deckEvent = {
    type,
    offsetCenter: { x: point[0], y: point[1] },
    srcEvent: event,
  };

  // Map types and call deck._onEvent or deck._onPointerMove
  // ...
  
  this.requestRedraw();
}