Google App Maker中谷歌地图组件添加可拖拽标记报错求助

Hey there! I’ve built custom map functionality in Google App Maker before, so I know exactly why you’re hitting this error—App Maker wraps the Google Maps API in its own widget system, so you can’t use the raw external-site code directly. Let’s fix this step by step:

Why Your Original Code Fails #

In standard external websites, you load the Maps JS API directly and create markers against the global google.maps object. But App Maker initializes the Maps API in a scoped way, and the Map widget doesn’t expose the native map instance by default. That’s why google.maps.Marker throws a constructor error—it’s not fully initialized or accessible when you run your code.

Step-by-Step Solution #

1. Name Your Map Widget #

First, make sure your Map widget has a clear name (e.g., locationMap) in the App Maker editor. This lets you reference it easily in your scripts.

2. Use the Widget’s getMap() Method #

App Maker’s Map widget provides a getMap() function that returns the native Google Maps instance. You need to use this to attach your draggable marker.

3. Add the Marker in the Right Event #

Run your marker code after the map has finished loading. The best place is either the Map widget’s onLoad event or the parent page’s onAttach event.

Here’s the working code example:

// Get the native Google Maps instance from your App Maker widget
const nativeMap = widget.root.descendants.locationMap.getMap();

// Set your initial marker position (replace with your desired lat/lng)
const initialPosition = new google.maps.LatLng(37.7749, -122.4194);

// Create the draggable marker
const draggableMarker = new google.maps.Marker({
  position: initialPosition,
  map: nativeMap,
  draggable: true,
  title: "Drag me!"
});

// Optional: Listen for drag end to capture the new position
google.maps.event.addListener(draggableMarker, 'dragend', (event) => {
  const newLat = event.latLng.lat();
  const newLng = event.latLng.lng();
  console.log(`Marker dragged to: ${newLat}, ${newLng}`);
  
  // If you need to save this to an App Maker data model, add your logic here
  // Example: widget.root.descendants.myRecord.location = new google.maps.LatLng(newLat, newLng);
});

Key Notes #

• API Permissions: App Maker usually handles Maps API setup automatically, but if you run into authorization errors, double-check that your Google Cloud project (linked to App Maker) has the Maps JavaScript API enabled.
• Avoid Conflicts: If your map is bound to a data source with existing markers, your custom marker will coexist with them—but make sure they don’t interfere with each other.
• Scope Matters: Always reference the widget correctly using widget.root.descendants.[widgetName] to avoid scoping issues in App Maker’s script environment.

内容的提问来源于stack exchange，提问作者Jose Ortiz