docs: clarify the requiremnts for google maps and throw error if elem…

…ent id is not set (#178)

guides/3.ADAPTERS.md

@@ -192,7 +192,9 @@ draw.setMode("freehand");
 ### Google Maps
 
 > [!IMPORTANT]
-> The Google Maps API requires an `apiKey` property when loading the library.
+> There are some requirements for the Google Map Adapter to work correctly:
+> 1) The Google Maps API requires an `apiKey` property when loading the library.
+> 2) The map element must have a id property set
 
 ```javascript
 // Import Google Maps
@@ -215,13 +217,15 @@ const loader = new Loader({
 });
 
 loader.load().then((google) => {
-  // Create map
-  const map = new google.maps.Map(document.getElementById(id), {
+  // Create map element
+  const mapElement = document.getElementById(id) // The map element must have an id set for the adapter to work!
+
+  // Create the google map itself
+  const map = new google.maps.Map(mapElement, {
     disableDefaultUI: true,
     center: { lat, lng },
     zoom: zoom,
     clickableIcons: false,
-    mapId: id,
   });
 
   // Once the map is loaded

src/adapters/google-maps.adapter.spec.ts

@@ -31,6 +31,7 @@ const createMockGoogleMap = (overrides?: Partial<google.maps.Map>) => {
 		getCenter: jest.fn(),
 		getClickableIcons: jest.fn(),
 		getDiv: jest.fn(() => ({
+			id: "map",
 			querySelector: jest.fn(),
 		})),
 		getHeading: jest.fn(),
@@ -87,6 +88,27 @@ describe("TerraDrawGoogleMapsAdapter", () => {
 			expect(adapter.unproject).toBeDefined();
 			expect(adapter.setCursor).toBeDefined();
 		});
+
+		it("throws an error if the map container id is not set", () => {
+			const map = createMockGoogleMap();
+			map.getDiv = jest.fn();
+
+			expect(() => {
+				new TerraDrawGoogleMapsAdapter({
+					lib: {
+						LatLng: jest.fn(),
+						OverlayView: jest.fn().mockImplementation(() => ({
+							setMap: jest.fn(),
+						})),
+					} as any,
+					map,
+					minPixelDragDistance: 1,
+					minPixelDragDistanceSelecting: 8,
+					minPixelDragDistanceDrawing: 8,
+					coordinatePrecision: 9,
+				});
+			}).toThrowError();
+		});
 	});
 
 	describe("register", () => {
@@ -97,7 +119,10 @@ describe("TerraDrawGoogleMapsAdapter", () => {
 				addEventListener: jest.fn(),
 			} as unknown as HTMLDivElement;
 			const mockMap = createMockGoogleMap({
-				getDiv: jest.fn(() => ({ querySelector: jest.fn(() => div) })) as any,
+				getDiv: jest.fn(() => ({
+					id: "map",
+					querySelector: jest.fn(() => div),
+				})) as any,
 				data: {
 					addListener: addListenerMock,
 				} as any,
@@ -136,7 +161,10 @@ describe("TerraDrawGoogleMapsAdapter", () => {
 				removeEventListener: jest.fn(),
 			} as unknown as HTMLDivElement;
 			const mockMap = createMockGoogleMap({
-				getDiv: jest.fn(() => ({ querySelector: jest.fn(() => div) })) as any,
+				getDiv: jest.fn(() => ({
+					id: "map",
+					querySelector: jest.fn(() => div),
+				})) as any,
 				data: {} as any,
 			});
 			const adapter = new TerraDrawGoogleMapsAdapter({
@@ -162,7 +190,10 @@ describe("TerraDrawGoogleMapsAdapter", () => {
 				removeEventListener: jest.fn(),
 			} as unknown as HTMLDivElement;
 			const mockMap = createMockGoogleMap({
-				getDiv: jest.fn(() => ({ querySelector: jest.fn(() => div) })) as any,
+				getDiv: jest.fn(() => ({
+					id: "map",
+					querySelector: jest.fn(() => div),
+				})) as any,
 				data: {
 					addListener: addListenerMock,
 				} as any,
@@ -220,6 +251,7 @@ describe("TerraDrawGoogleMapsAdapter", () => {
 				getDiv: jest.fn(
 					() =>
 						({
+							id: "map",
 							getBoundingClientRect: jest.fn(() => ({})),
 						}) as unknown as HTMLDivElement,
 				),
@@ -255,6 +287,7 @@ describe("TerraDrawGoogleMapsAdapter", () => {
 				getDiv: jest.fn(
 					() =>
 						({
+							id: "map",
 							getBoundingClientRect: jest.fn(() => ({})),
 						}) as unknown as HTMLDivElement,
 				),
@@ -452,6 +485,7 @@ describe("TerraDrawGoogleMapsAdapter", () => {
 		it("is no-op for cursor: unset", () => {
 			const map = createMockGoogleMap() as google.maps.Map;
 			const container = {
+				id: "map",
 				offsetLeft: 0,
 				offsetTop: 0,
 				style: { removeProperty: jest.fn(), cursor: "initial" },
@@ -470,6 +504,10 @@ describe("TerraDrawGoogleMapsAdapter", () => {
 				map,
 			});
 
+			// We want to reset getDiv so we can correctly ensure
+			// map.getDiv is not called in setCursor
+			jest.resetAllMocks();
+
 			adapter.setCursor("unset");
 
 			expect(map.getDiv).not.toHaveBeenCalled();
@@ -506,7 +544,8 @@ describe("TerraDrawGoogleMapsAdapter", () => {
 
 			adapter.setCursor("pointer");
 
-			expect(map.getDiv).toHaveBeenCalledTimes(1);
+			// Once in constructor, once in setCursor
+			expect(map.getDiv).toHaveBeenCalledTimes(2);
 
 			const firstSheetAndRule = document.styleSheets[0]
 				.cssRules[0] as CSSStyleRule;
@@ -544,7 +583,8 @@ describe("TerraDrawGoogleMapsAdapter", () => {
 			adapter.setCursor("pointer");
 			adapter.setCursor("pointer");
 
-			expect(map.getDiv).toHaveBeenCalledTimes(1);
+			// Once in constructor, once in setCursor
+			expect(map.getDiv).toHaveBeenCalledTimes(2);
 		});
 	});
 

src/adapters/google-maps.adapter.ts

@@ -17,6 +17,13 @@ export class TerraDrawGoogleMapsAdapter extends TerraDrawBaseAdapter {
 		super(config);
 		this._lib = config.lib;
 		this._map = config.map;
+
+		// In order for the internals of the adapter to work we require an ID to
+		// allow query selectors  to work
+		if (!this._map.getDiv().id) {
+			throw new Error("Google Map container div requires and id to be set");
+		}
+
 		this._coordinatePrecision =
 			typeof config.coordinatePrecision === "number"
 				? config.coordinatePrecision