Creating auto-complete with google api

Currently I’m trying to use one of my fields in a custom module to be autocompleted with the Google Places API, I’ve been able to do an example on my localhost with just a textbox and it works just fine before trying to transfer the code over to my custom javascript.

I’ve added my
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=AIzaSyAvWClrsdpl2pYkkxTKu_DaYMYLYpGuVcA"></script>

into my editviewdefs.php in the javascript include and inspect element shows that this is loading, and I’ve added my custom js into my script

google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {
	let input = document.getElementById('o_address_c');
	new google.maps.places.Autocomplete(input);
}

but on my test server the textbox is autofilled with ā€˜Enter a location’ and the autocomplete works fine - in suitecrm nothing happens and I get the ā€˜google is not defined’ error. I’ve tried using both async, defer, and find that both break the local code and doesn’t change anything in suitecrm. Looking at the HTML of the page when it loads shows the google API script being called before my custom script so it should be defined. Is there a way I can call a script before editviewdefs.php is called? I see that the google API is connected to in requests but I’m unable to troubleshoot this


This also looks like the API is being reached before the definition error occurs

I added

initialize();

into my ā€˜javascript’ => tag at the end of the rest of the functions and now it works accordingly

1 Like