craft-locate
craft-locate copied to clipboard
'google' is not defined when creating entry from within an entries field modal
First time submitting an issue, please let me know if you need any more information!
Steps to reproduce:
- Have a section with a craft-locate field type
- Have an entry with an entries field linking to the above section
- Create a new entry by clicking on the entries field, and selecting '+ New [entry] entry'
- google is not defined error block the field from functioning
My suggestion is to either.
- Use a callback in the google API script URL to initiate when google has finished loading the script
- add a setTimeout in the
Plugin.prototype
init
function, which checks if google is defined yet:
Before:
init: function (id) {
var _this = this;
$(function () {
var fields = {
lat: document.getElementById(_this.options.prefix + _this.options.name + '-lat'),
lng: document.getElementById(_this.options.prefix + _this.options.name + '-lng'),
placeid: document.getElementById(_this.options.prefix + _this.options.name + '-placeid'),
}
var input = document.getElementById(_this.options.prefix + _this.options.name + '-location');
var options = JSON.parse('{' + _this.options.optionsObject + '}');
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
console.log(place);
fields.lat.value = place.geometry.location.lat();
fields.lng.value = place.geometry.location.lng()
fields.placeid.value = place.place_id;
});
input.addEventListener('change', function(e) {
if (!input.value) {
fields.lat.value = '';
fields.lng.value = '';
fields.placeid.value = '';
}
});
});
}
After:
init: function (id) {
var _this = this;
var google = window.google;
if (!google) {
setTimeout(function() {
_this.init();
}, 250);
} else {
$(function () {
var fields = {
lat: document.getElementById(_this.options.prefix + _this.options.name + '-lat'),
lng: document.getElementById(_this.options.prefix + _this.options.name + '-lng'),
placeid: document.getElementById(_this.options.prefix + _this.options.name + '-placeid'),
}
var input = document.getElementById(_this.options.prefix + _this.options.name + '-location');
var options = JSON.parse('{' + _this.options.optionsObject + '}');
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
console.log(place);
fields.lat.value = place.geometry.location.lat();
fields.lng.value = place.geometry.location.lng()
fields.placeid.value = place.place_id;
});
input.addEventListener('change', function(e) {
if (!input.value) {
fields.lat.value = '';
fields.lng.value = '';
fields.placeid.value = '';
}
});
});
}
}