PDA

View Full Version : Google Maps Error



info@ferraresegroup.com
7 Nov 2016, 8:31 AM
Hi,
staring from empty modern project,
then i added Google Maps resource and on preview errors appear.

On Chrome console:
- You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
- Google Maps API error: MissingKeyMapError


Ext.define('Maps.view.MyMap', { extend: 'Ext.ux.google.Map', alias: 'widget.mymap',
requires: [ 'Maps.view.MyMapViewModel' ],
viewModel: { type: 'mymap' }
});


Luca




version:
4.0.2.209




channel:
4.0-stable




platform:
1.2.3.16 - darwin x64




cmd:
6.2.0.103




framework:
Ext JS 6.2.x Modern

petr.felzmann
10 Nov 2016, 3:31 AM
Google Map component in modern toolkit is fixed in just released 4.1 EA.

petr.vecera
10 Nov 2016, 9:42 AM
Hello

There is also a bug in the ExtJS framework which is not yet fixed.
- You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
Remove the GoogleMapsAPI from the resources in the SA.

If you encounter issue where it says that your google API key is invalid. You have to override / edit the framework file.
http://docs.sencha.com/extjs/6.2.0/modern/src/Map.js.html#Ext.ux.google.Map

Regards
Petr

info@ferraresegroup.com
11 Nov 2016, 4:09 PM
well, but...
after several attempts still not reached me yet any email to download EA 4.1.
Am i doing something wrong?
Thanks,
Luca

richardvd
13 Nov 2016, 2:18 PM
Override for adding your Google Maps API key to the URL in Ext JS 6.2.0 (from this thread (https://www.sencha.com/forum/showthread.php?328469-How-to-change-Google-Maps-API-URL)):




Ext.define('Override.mixin.Mashup', {
override: 'Ext.mixin.Mashup',

onClassMixedIn: function (targetClass) {
if (targetClass.$className === 'Ext.ux.google.Map') {
targetClass.prototype.requiredScripts = [
'//maps.googleapis.com/maps/api/js?key=MY_APIKEY'
]
}
this.callParent([targetClass]);
}
});

info@ferraresegroup.com
30 Dec 2016, 9:27 AM
SA 4.1.0.91.... still has the problem.
Always with modern 6.2

richardvd
31 Dec 2016, 8:34 AM
I am able to use the Ext.Map component in SA 4.1.0.91 without warnings as described in this thread (https://www.sencha.com/forum/showthread.php?328469-How-to-change-Google-Maps-API-URL&p=1169711&viewfull=1#post1169711).

info@ferraresegroup.com
5 Jan 2017, 11:00 AM
From Google Console:
"You have included the Google Maps API multiple times on this page. This may cause unexpected errors."



Version:
4.1.0.91





Channel:
4.1-stable





Platform:
1.2.8.3 - darwin x64





Renderer:
51.0.2704.106





Cmd:
6.2.1.29





Framework:
Ext JS 6.2.x Modern

richardvd
5 Jan 2017, 1:08 PM
The Ext.Map component already loads the Google Maps API by itself, but SA by default will also add that resource, hence the message.

You can fix that by deleting the Google Maps API resource in SA.

info@ferraresegroup.com
7 Jan 2017, 2:18 AM
GoogleMapsApi removed from SA Project Inspector...


The Ext.Map component already loads the Google Maps API by itself, but SA by default will also add that resource, hence the message.

You can fix that by deleting the Google Maps API resource in SA.


BUT NOW

"Google Maps API error: MissingKeyMapError"


In Application->launch i have this code:

Ext.define('Override.mixin.Mashup', { override: 'Ext.mixin.Mashup',


onClassMixedIn: function (targetClass) {
if (targetClass.$className === 'Ext.ux.google.Map') {
targetClass.prototype.requiredScripts = [
'//maps.googleapis.com/maps/api/js?key=<my_key>'
];
}
this.callParent([targetClass]);
}
});

info@ferraresegroup.com
7 Jan 2017, 3:10 AM
Thanks Richardvd,
this solve my problem.
Luca




Under your project directory, there is an overrides folder. In that folder, create a file named Override.mixin.Mashup.js and paste the code in there. Replace MY_APIKEY by your own Google Maps API key.

After dragging the Ext.Map component to your canvas in Sencha Architect, you may notice that the Google Maps API gets added as a resource. This is a bug, because as of Ext 6.2 (Modern) the Ext.Map component already loads the Google Maps API on its own. So you should delete the Google Maps API resource in the Project Inspector.

If all is set up correctly you should not see any warnings in your browser's Javascript console while displaying a Google Map in your Modern app.

dawesi
29 Jul 2018, 1:59 PM
IMHO the requiredScripts should be configured by the google maps api object in SA


that way you can set your key, so in SA, I'd create the override to REMOVE the requiredScripts, then use the configurable 'google maps api' for projects.

that way you can just include the override without settings,



Ext.define('Override.mixin.Mashup', {
override: 'Ext.mixin.Mashup',

onClassMixedIn: function (targetClass) {
if (targetClass.$className === 'Ext.ux.google.Map') {
targetClass.prototype.requiredScripts = []
}
this.callParent([targetClass]);
}
});