Draggable, on Google AppMaker

Question

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?

Pavel Shkleinik Pavel Shkleinik · Accepted Answer · 2018-03-29T18:51:03

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);

Draggable, on Google AppMaker

2 Answers