I've successfully loaded the mapbox using custom control and put the data from the database onto the mapbox. I tried the same thing using google map but it didn't work. Your views and opinions are greatly appreciated.
Congos Analytics version: 11.0.11
Error message when i load google map using custom control:
Uncaught (in promise) idmessage: "initMap is not a function"name: "InvalidValueError"stack: "Error↵ at new id (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:54:72)↵ at Object._.jd (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:54:182)↵ at sj (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:139:185)↵ at https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:139:70"__proto__: Error
:9300/bi/js/test.js:17 1. init ******************
:9300/bi/js/test.js:41 3. Draw ******************
maps.googleapis.com/maps-api-v3/api/js/40/12/common.js:115 Uncaught (in promise) TypeError: Cannot read property 'defaultView' of undefined
at new _.Rt (maps.googleapis.com/maps-api-v3/api/js/40/12/common.js:115)
at Object.Zw.j (maps.googleapis.com/maps-api-v3/api/js/40/12/map.js:77)
at maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:126
my js code:
define(["https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap", "jquery"], function(mapboxgl, jQuery) {
//Add Variables
"use strict";
var map = '',
bounds = '',
geojsonFeature = {};
function BasicControl() {};
BasicControl.prototype.initialize = function(oControlHost, fnDoneInitializing, oDataStore) {
console.log('1. init ******************')
// jQuery("head link[rel='stylesheet']").last().after("<link href='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' rel='stylesheet' />");
var mapContainer = oControlHost.container.id;
//var initMap = function() {
map = new google.maps.Map({
container: mapContainer, // container id
//center: {lat: -34.397, lng: 150.644},
center: new google.maps.LatLng( -34.397, 150.644 ),
//center: [-96, 37.8],
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8
});
// }
bounds = new google.maps.LatLngBounds();
fnDoneInitializing();
};
BasicControl.prototype.draw = function(oControlHost) {
oControlHost.container.innerHTML = "Hello World!! Map PlaceHolder";
console.log('3. Draw ******************')
};
BasicControl.prototype.setData = function(oControlHost, oDataStore) {
console.log('2. SetData *****************')
};
return BasicControl;
});
Hi,
Whatever you are doing with it, is it normal that the declaration of the "initMap" function is commented out?
From your code example, see:
//var initMap = function() {
Is it a typo when you posted your message?
V.
Hi Sunchaser,
It's not a typo.
This error appear when i enable initMap() function .
[START]##############################################################################
test.js:14 1. init ******************
test.js:38 3. Draw ******************
rsapp.htm:1 Uncaught (in promise) idmessage: "initMap is not a function"name: "InvalidValueError"stack: "Error↵ at new id (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:54:72)↵ at Object._.jd (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:54:182)↵ at sj (https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:139:185)↵ at https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap:139:70"__proto__: Errorconstructor: ƒ (a)__proto__: Object
rsstartupblock_1.js:11 rsperf: ReportSpec_OnLoad->View_OnAfterDraw: 9740.329833984375ms
rsstartupblock_11.js:65 querying for module store id, path=/content/folder[@name='WWWW']/module[@name='WWWWWWWWWWWWWWW']
rsContentView.js?v=11.0.11:611 rsperf: ViewBeforeDraw->ViewAfterDraw: 9596.592041015625ms
rsContentView.js?v=11.0.11:612 Timer 'rsperf: total_RunReport' does not exist
[END] ###############################################################################
Hi azamamin,
Not speaking about the error, but about your JS code.
Please post your JS code by using the appropriate button "Insert Code" - and please ensure that it is correctly formatted.
So that, me or somebody else could check more easily the problem.
For the moment, I have the feeling that the JS code has a problem, but it is not easy to determine exactly.
V.
Hi Sunchaser, hope this can help u.
define(["https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap", "jquery"], function (mapboxgl, jQuery) {
//Add Variables
"use strict";
var map = '',
bounds = '',
geojsonFeature = {};
function BasicControl() {};
BasicControl.prototype.initialize = function (oControlHost, fnDoneInitializing, oDataStore) {
console.log('1. init ******************')
var mapContainer = oControlHost.container.id;
map = new google.maps.Map({
container: mapContainer, // container id
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8
});
bounds = new google.maps.LatLngBounds();
fnDoneInitializing();
};
BasicControl.prototype.draw = function (oControlHost) {
oControlHost.container.innerHTML = "Hello World!! Map PlaceHolder";
console.log('3. Draw ******************')
};
BasicControl.prototype.setData = function (oControlHost, oDataStore) {
console.log('2. SetData *****************')
};
return BasicControl;
});
Not having looked at the JS itself, shouldn't API_KEY in the define URL be the actual API Key that google has provided you? https://developers.google.com/maps/documentation/javascript/get-api-key (https://developers.google.com/maps/documentation/javascript/get-api-key)
This is just an example, the actual code is included with the actual API key value