how to load google map using custom control

[azamamin]

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;
});

[Sunchaser]

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:

Code Select Expand


//var initMap = function() {

Is it a typo when you posted your message?

V.

[azamamin]

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] ###############################################################################

[Sunchaser]

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.

[azamamin]

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;
});

[ashley]

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

[azamamin]

This is just an example, the actual code is included with the actual API key value