Google places api

#1

does anyone know how to get the google places api to work, im trying to autofill and address into inputs, i tried following the post on here relating to google maps api, but got confused, can someone give me an example of this also where would i put the script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
async defer> /script
does this just go into the index, non reason document?

#2

this is what ive come up with so far, now im stuck

type domElement = {. "value": string};
type document = {
  .
  [@bs.meth] "getElementById" : string => domElement
};

[@bs.send] external getElementById : (document, string) => domElement = "getElementById";
[@bs.val] external doc : document = "document";
[@bs.send] external preventEventDefault : (ReactEventRe.Form.t) => unit = "preventDefault";

[@bs.deriving abstract]
type geolocation = {
  lat: string,
  lng: string,
};

[@bs.deriving abstract]
type circle = {
  center: geolocation,
  radius: string,
};

[@bs.deriving abstract]
type setup = {
  types: list(string),
};

[@bs.new] [@bs.scope ("google", "map" , "places")] external autocomplete : (domElement, setup) => unit = "Autocomplete";

[@bs.new] [@bs.scope ("google", "map" , "places")] external circle : (circle) => unit = "Circle";

[@bs.send] external preventEventDefault : (ReactEventRe.Form.t) => unit = "preventDefault";

type componentForm = {
street_number: string,
route: string,
locality: string,
administrative_area_level_1: string,
country: string,
postal_code: string
};

let types = setup(~types=["geocode"])

let initAutocomplete = () => {
 let autocomplete = autocomplete(getElementById(doc, "autocomplete"), types );

};

let fillInAddress = () => {

};

let geolocate = () => {

};

let componentForm = () => {
street_number: "short_name",
route: "long_name",
locality: "long_name",
administrative_area_level_1: "short_name",
country: "long_name",
postal_code: "short_name"
};
#3

this works

//Googleplaces.re

type domElement = {.
"value": string };

type document = {.
[@bs.meth] "getElementById" : string => domElement };

type componentForm = {
street_number: string,
route: string,
locality: string,
administrative_area_level_1: string,
country: string,
postal_code: string
};

[@bs.deriving abstract]
type geolocation = {
  lat: string,
  lng: string,
};

[@bs.deriving abstract]
type circle = {
  center: geolocation,
  radius: string,
};

[@bs.deriving abstract]
type setup = {
  types: list(string),
};

[@bs.send] external getElementById : (document, string) => domElement = "getElementById";

[@bs.val] external doc : document = "document";

[@bs.val] external autocomplete : autocomplete = "Autocomplete";

[@bs.send] external preventEventDefault : (ReactEventRe.Form.t) => unit = "preventDefault";


[@bs.new] [@bs.scope ("google", "maps", "places")] external autocomplete : (domElement, setup) => unit = "Autocomplete";

[@bs.new] [@bs.scope ("google", "maps", "places")] external circle : (circle) => unit = "Circle";


let componentForm = () => {
street_number: "short_name",
route: "long_name",
locality: "long_name",
administrative_area_level_1: "short_name",
country: "long_name",
postal_code: "short_name"
};
#4

i am trying to get to get the click event working via
[@bs.new] [@bs.scope (“google”, “maps”, “event”)] external addListener : (domElement, string, unit) => unit = “addListener”;

but when i use addListener(getElementById(doc, “elementid”),“place_changed”,fillInAddress())
the fillinaddress function runs immediatly it doesnt just run when place_changed, how do i make this only run on place_changed
i am trying to get this function to run in autocomplete.addListener(‘place_changed’, fillInAddress);
but addlistener is a function under the scope of event.
i cant run autocomplete.addListener(‘place_changed’, fillInAddress) because addListener doesnt exist in the record
neither does autocomplete.getPlace();
i tried creating a object type autocomplete = {.
[@bs.meth] “addListener” : (string, unit) => unit,
[@bs.meth] “getPlace” : (string, unit) => unit
};
but it doesnt work either