Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I hide the message 'Oops! Something went wrong' when an invalid Google Maps API key is supplied?

How can I hide the message ‘Oops! Something went wrong’ when an invalid Google Maps API key is supplied? Additionally, how do I capture errors when an invalid Google Maps API key is provided and display the error in an alert message?

hdr_loadGoogleMap: function() {
        var me = this,
            vFormPanel = me.getFormPanel(),
            vFldValues = vFormPanel.getFldValues(['install_gmapikey','install_gmapid','install_gmapcoor','install_gmaptype']),
            vContainer = vFormPanel.down('container[hostCmpId=mapContainer]'),
            vLat,
            vLng,
            vGmapcoor = vFldValues['install_gmapcoor'].split(','),
            vGMapTypes = {
                'map': 'roadmap',
                'satellite': 'satellite',
                'terrain': 'terrain',
                'labels': 'hybrid'
            };


vLanguageCode ='en';
        Ext.Loader.loadScript({
            url: 'https://maps.googleapis.com/maps/api/js?key=inavlidkey&v=3.55&language='+vLanguageCode,
            onLoad: function () {
                 me.hdr_gmap = Ext.create('Ext.panel.Panel', {
                    layout: 'fit',
                    header: false,
                    border: false,
                    itemId: 'map',
                    style: 'padding: 0; border-width: 0;',
                    draggable: false,
                    height: 290,
                    width: 350,
                    items: [{
                        xtype: 'uxgmappanel',
                        useCurrentLocation: true,
                        center: {
                            lat: vLat,
                            lng: vLng
                        },
                        mapOptions: {
                            zoom: 14,
                            mapTypeId: vGMapTypes[(vFldValues['install_gmaptype']) ? vFldValues['install_gmaptype'].toLowerCase(): 'map'], 
                            mapId: vFldValues['install_gmapid']
                        }
                    }]
                });
                vContainer.add(me.hdr_gmap);
            }
        });

        window.gm_authFailure = function() {
            var vDelayedTask = new Ext.util.DelayedTask(function() {
                alert('MSG_ERR_JS_INAVLID_GAPIKEY_GMAPID');
            });
            vDelayedTask.delay(300);
        };
    }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for the response. I tried with the above code and not working. I have used below code to hide/remove error message on the map.

    window.gm_authFailure = function() {
            // Find the gm-err-container element from the HTML body
            var vErrorMessageContainer = document.querySelector('.gm-err-container');
            // Check if the element exists
            if (vErrorMessageContainer) {
                // Remove the element from the HTML body
                vErrorMessageContainer.parentNode.removeChild(vErrorMessageContainer);
                alert(Invalid API Key);
                return;
            }
        };

  2. 0

    You can make use of the error event of the script tag when loading the Google Maps API.

    hdr_loadGoogleMap: function() {
var me = this,
    vFormPanel = me.getFormPanel(),
    vFldValues = vFormPanel.getFldValues(['install_gmapikey','install_gmapid','install_gmapcoor','install_gmaptype']),
    vContainer = vFormPanel.down('container[hostCmpId=mapContainer]'),
    vLat,
    vLng,
    vGmapcoor = vFldValues['install_gmapcoor'].split(','),
    vGMapTypes = {
        'map': 'roadmap',
        'satellite': 'satellite',
        'terrain': 'terrain',
        'labels': 'hybrid'
    },
    vLanguageCode ='en';

// Create a script element to load Google Maps API
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=invalidkey&v=3.55&language=' + vLanguageCode;

// Handle script load error
script.onerror = function() {
    alert('Invalid Google Maps API key provided.'); // Display custom error message
};

// Append the script to the document
document.head.appendChild(script);

script.onload = function() {
    me.hdr_gmap = Ext.create('Ext.panel.Panel', {
        layout: 'fit',
        header: false,
        border: false,
        itemId: 'map',
        style: 'padding: 0; border-width: 0;',
        draggable: false,
        height: 290,
        width: 350,
        items: [{
            xtype: 'uxgmappanel',
            useCurrentLocation: true,
            center: {
                lat: vLat,
                lng: vLng
            },
            mapOptions: {
                zoom: 14,
                mapTypeId: vGMapTypes[(vFldValues['install_gmaptype']) ? vFldValues['install_gmaptype'].toLowerCase(): 'map'], 
                mapId: vFldValues['install_gmapid']
            }
        }]
    });
    vContainer.add(me.hdr_gmap);
};

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search