Draggable, on Google AppMaker

问题:

I want a little guidance, because I haven't found the explanation I need yet.

I'm developing a website on Google App Maker, and I want to use on Google Map Widget a Draggable Marker.

All the info I have found, is like for an external website including HTML and JavaScript libraries. The error is shown when I type:

var marker = new google.maps.Marker({
  position: latlon,
  map: map,
  draggable: true,
  title:"Drag me!"
});

"Uncaught TypeError: google.maps.Marker is not a constructor at var marker = new google.maps.Marker ({ (NewScript1: 143) ".

I have tried in client side script, and in server side script.

Question, if I want to use a marker I need to add libraries to appmaker?

回答1:

Most likely you are getting the error because you are executing your client script before Maps API is loaded. To be 100% sure that it is loaded you need to execute your code in onAttach event of the Google Map Widget (maybe onDataLoad one will work as well).

If you want to make the Marker that App Maker adds to the map by default draggable you can use this snippet:

// Google Map widget's onAttach event handler
var marker = widget.getAddressMarkerJs();
marker.setDraggable(true);

In case you want to add all-new marker(s) you can use this snippet:

// Google Map widget's onAttach event handler
var map = widget.getMapJs();

var marker = new google.maps.Marker({
  position: { lat: 0, lng: 0 },
  map: map,
  draggable: true,
  title:"Drag me!"
});

Bonus snippet to remove default marker from the map

// Google Map widget's onAttach event handler
var marker = widget.getAddressMarkerJs();
marker.setMap(null);

回答2:

If you want to use Google Maps, you need to consider it as a widget in the App Maker API which is slightly different from the Google Maps API you are using.

If you look at the App Maker API you will see how you can add markers to a maps widget and how to return them: https://developers.google.com/appmaker/scripting/api/widgets#GoogleMap