Google Street View -Load Google Maps Error

[drusexton]

I am curious if anyone has gotten the following error message:

When I test locally on my IDE there are no issues, but when I pushed it to the server side I got an error. Correct me if I am mistaken, but upon further investigation I learned that I was having a MissingKeyMapError. I went ahead and acquired a key, and now I am trying to figure out where to implement it in the config files.

Am I looking at this wrong, or can anyone provide any insight that could help me along the way? Thanks!

@tmcgee @DavidSpriggs @kcarrier

[tmcgee]

Provide your key here: https://github.com/cmv/cmv-app/blob/develop/viewer/js/config/viewer.js#L29

[drusexton]

Tim,

First off thank you for your response. Below is my code. It still doesn't seem to work. Let me know if you sot something I am doing wrong...

`define([ 'esri/units', 'esri/geometry/Extent', 'esri/config', 'esri/tasks/GeometryService', 'esri/layers/ImageParameters', 'gis/plugins/Google' ], function (units, Extent, esriConfig, GeometryService, ImageParameters, GoogleMapsLoader) {

// url to your proxy page, must be on same machine hosting you app. See proxy folder for readme.
esriConfig.defaults.io.proxyUrl = 'proxy/proxy.ashx';
esriConfig.defaults.io.alwaysUseProxy = false;

// url to your geometry server.
esriConfig.defaults.geometryService = new GeometryService('http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer');

//Use your own Google MapsAPI Key.
//https://developer.google.com/maps/documentation/javascript/get-api-key
GoogleMapsLoader.Key = 'AIzaSyAxzcTUHdmRFz6g3iggs-tlHqHRuICIVNo';

//image parameters for dynamic services, set to png32 for higher quality exports.
var imageParameters = new ImageParameters();
imageParameters.format = 'png32';

return {
    // used for debugging your app
    isDebug: true,

    //default mapClick mode, mapClickMode lets widgets know what mode the map is in to avoid multipult map click actions from taking place (ie identify while drawing).
    defaultMapClickMode: 'identify',
    // map options, passed to map constructor. see: https://developers.arcgis.com/javascript/jsapi/map-amd.html#map1
    mapOptions: {
        basemap: 'streets',
        center: [-82.200395, 39.224600],
        zoom: 8,
        sliderStyle: 'small'
    },
    // panes: {
    //  left: {
    //      splitter: true
    //  },
    //  right: {
    //      id: 'sidebarRight',
    //      placeAt: 'outer',
    //      region: 'right',
    //      splitter: true,
    //      collapsible: true
    //  },
    //  bottom: {
    //      id: 'sidebarBottom',
    //      placeAt: 'outer',
    //      splitter: true,
    //      collapsible: true,
    //      region: 'bottom'
    //  },
    //  top: {
    //      id: 'sidebarTop',
    //      placeAt: 'outer',
    //      collapsible: true,
    //      splitter: true,
    //      region: 'top'
    //  }
    // },
    // collapseButtonsPane: 'center', //center or outer

    // operationalLayers: Array of Layers to load on top of the basemap: valid 'type' options: 'dynamic', 'tiled', 'feature'.
    // The 'options' object is passed as the layers options for constructor. Title will be used in the legend only. id's must be unique and have no spaces.
    // 3 'mode' options: MODE_SNAPSHOT = 0, MODE_ONDEMAND = 1, MODE_SELECTION = 2
    operationalLayers: [{
        /*type: 'feature',
        url: 'http://services1.arcgis.com/g2TonOxuRkIqSOFx/arcgis/rest/services/MeetUpHomeTowns/FeatureServer/0',
        title: 'STLJS Meetup Home Towns',
        options: {
            id: 'meetupHometowns',
            opacity: 1.0,
            visible: false,
            outFields: ['*'],
            mode: 0
        },
        editorLayerInfos: {
            disableGeometryUpdate: false
        },
        legendLayerInfos: {
            exclude: false,
            layerInfo: {
                title: 'My layer'
            }
        }

}, { type: 'feature', url: 'http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0', title: 'San Francisco 311 Incidents', options: { id: 'sf311Incidents', opacity: 1.0, visible: false, outFields: ['req_type', 'req_date', 'req_time', 'address', 'district'], mode: 0 } }, {/ type: 'dynamic', url: 'http://bhgis.org/arcgis/rest/services/APEG/Sites/MapServer', title: 'Map Features', options: { id: 'Properties', opacity: 1.0, visible: true, imageParameters: imageParameters }, identifyLayerInfos: { layerIds: [1] }, legendLayerInfos: { layerInfo: { hideLayers: [21] } } }, { type: 'dynamic', url: 'http://www.bhgis.org/arcgis/rest/services/MIIA/MIIA_Demographics/MapServer', title: 'Demographic Layers', options: { id: 'DemographicData', opacity: 1.0, visible: true, imageParameters: imageParameters }/, legendLayerInfos: { exclude: true }, layerControlLayerInfos: { swipe: true, metadataUrl: true, expanded: true }*/ }],

    /* set include:true to load. For titlePane type set position the the desired order in the sidebar*/
    widgets: {
        growler: {
            include: true,
            id: 'growler',
            type: 'domNode',
            path: 'gis/dijit/Growler',
            srcNodeRef: 'growlerDijit',
            options: {}
        },
        geocoder: {
            include: true,
            id: 'geocoder',
            type: 'domNode',
            path: 'gis/dijit/Geocoder',
            srcNodeRef: 'geocodeDijit',
            options: {
                map: true,
                mapRightClickMenu: true,
                geocoderOptions: {
                    autoComplete: true,
                    arcgisGeocoder: {
                        placeholder: 'Enter an address or place'
                    }
                }
            }
        },
        identify: {
            include: true,
            id: 'identify',
            type: 'invisible',
            path: 'gis/dijit/Identify',
            title: 'Identify',
            open: false,
            position: 10,
            options: 'config/identify'
        },
        basemaps: {
            include: true,
            id: 'basemaps',
            type: 'domNode',
            path: 'gis/dijit/Basemaps',
            srcNodeRef: 'basemapsDijit',
            options: 'config/basemaps'
        },
        mapInfo: {
            include: false,
            id: 'mapInfo',
            type: 'domNode',
            path: 'gis/dijit/MapInfo',
            srcNodeRef: 'mapInfoDijit',
            options: {
                map: true,
                mode: 'dms',
                firstCoord: 'y',
                unitScale: 3,
                showScale: true,
                xLabel: '',
                yLabel: '',
                minWidth: 286
            }
        },
        scalebar: {
            include: true,
            id: 'scalebar',
            type: 'map',
            path: 'esri/dijit/Scalebar',
            options: {
                map: true,
                attachTo: 'bottom-left',
                scalebarStyle: 'line',
                scalebarUnit: 'dual'
            }
        },
        locateButton: {
            include: true,
            id: 'locateButton',
            type: 'domNode',
            path: 'gis/dijit/LocateButton',
            srcNodeRef: 'locateButton',
            options: {
                map: true,
                publishGPSPosition: true,
                highlightLocation: true,
                useTracking: true,
                geolocationOptions: {
                    maximumAge: 0,
                    timeout: 15000,
                    enableHighAccuracy: true
                }
            }
        },
        overviewMap: {
            include: true,
            id: 'overviewMap',
            type: 'map',
            path: 'esri/dijit/OverviewMap',
            options: {
                map: true,
                attachTo: 'bottom-right',
                color: '#0000CC',
                height: 100,
                width: 125,
                opacity: 0.30,
                visible: false
            }
        },
        homeButton: {
            include: true,
            id: 'homeButton',
            type: 'domNode',
            path: 'esri/dijit/HomeButton',
            srcNodeRef: 'homeButton',
            options: {
                map: true,
                extent: new Extent({
                    xmin: -85.68328073230134,
                    ymin: 37.54901924313456,
                    xmax: -78.92085255373169,
                    ymax: 41.58458510902272,
                    spatialReference: {
                        wkid: 4326
                    }
                })
            }
        },
        legend: {
            include: true,
            id: 'legend',
            type: 'titlePane',
            path: 'esri/dijit/Legend',
            title: 'Legend',
            open: false,
            position: 0,
            options: {
                map: true,
                legendLayerInfos: true
            }
        },
        layerControl: {
            include: true,
            id: 'layerControl',
            type: 'titlePane',
            path: 'gis/dijit/LayerControl',
            title: 'Layers',
            open: false,
            position: 0,
            options: {
                map: true,
                layerControlLayerInfos: true,
                separated: true,
                vectorReorder: true,
                overlayReorder: true
            }
        },
        bookmarks: {
            include: true,
            id: 'bookmarks',
            type: 'titlePane',
            path: 'gis/dijit/Bookmarks',
            title: 'Bookmarks',
            open: false,
            position: 2,
            options: 'config/bookmarks'
        },
        find: {
            include: true,
            id: 'find',
            type: 'titlePane',
            canFloat: true,
            path: 'gis/dijit/Find',
            title: 'Find',
            open: false,
            position: 3,
            options: 'config/find'
        },
        draw: {
            include: true,
            id: 'draw',
            type: 'titlePane',
            canFloat: true,
            path: 'gis/dijit/Draw',
            title: 'Draw',
            open: false,
            position: 4,
            options: {
                map: true,
                mapClickMode: true
            }
        },
        measure: {
            include: true,
            id: 'measurement',
            type: 'titlePane',
            canFloat: true,
            path: 'gis/dijit/Measurement',
            title: 'Measurement',
            open: false,
            position: 5,
            options: {
                map: true,
                mapClickMode: true,
                defaultAreaUnit: units.SQUARE_MILES,
                defaultLengthUnit: units.MILES
            }
        },
        print: {
            include: true,
            id: 'print',
            type: 'titlePane',
            canFloat: true,
            path: 'gis/dijit/Print',
            title: 'Print',
            open: false,
            position: 6,
            options: {
                map: true,
                printTaskURL: 'https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task',
                copyrightText: 'Copyright 2014',
                authorText: 'Me',
                defaultTitle: 'Viewer Map',
                defaultFormat: 'PDF',
                defaultLayout: 'Letter ANSI A Landscape'
            }
        },
        directions: {
            include: false,
            id: 'directions',
            type: 'titlePane',
            path: 'gis/dijit/Directions',
            title: 'Directions',
            open: false,
            position: 7,
            options: {
                map: true,
                mapRightClickMenu: true,
                options: {
                    routeTaskUrl: 'http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Route',
                    routeParams: {
                        directionsLanguage: 'en-US',
                        directionsLengthUnits: units.MILES
                    },
                    active: false //for 3.12, starts active by default, which we dont want as it interfears with mapClickMode
                }
            }
        },
        editor: {
            include: false,
            id: 'editor',
            type: 'titlePane',
            path: 'gis/dijit/Editor',
            title: 'Editor',
            open: false,
            position: 8,
            options: {
                map: true,
                mapClickMode: true,
                editorLayerInfos: true,
                settings: {
                    toolbarVisible: true,
                    showAttributesOnClick: true,
                    enableUndoRedo: true,
                    createOptions: {
                        polygonDrawTools: ['freehandpolygon', 'autocomplete']
                    },
                    toolbarOptions: {
                        reshapeVisible: true,
                        cutVisible: true,
                        mergeVisible: true
                    }
                }
            }
        },
        streetview: {
            include: true,
            id: 'streetview',
            type: 'titlePane',
            canFloat: true,
            position: 9,
            path: 'gis/dijit/StreetView',
            title: 'Google Street View',
            options: {
                map: true,
                mapClickMode: true,
                mapRightClickMenu: true
            }
        },
        help: {
            include: true,
            id: 'help',
            type: 'floating',
            path: 'gis/dijit/Help',
            title: 'Help',
            options: {}
        }

    }
};

});`

Thanks,

Dru

[tmcgee]

@drusexton I don't have a way to test your specific Google Maps API key but the config file looks correct. If you have a public URL that exhibits this issue, I might have an opportunity to view it and perhaps discover more.

[drusexton]

@tmcgee thanks for your quick reply!. I have been busy with other things so I had to table this issue. I will make sure my API Key is good-to-go. I will let you know how it goes.

[green3g]

Also, please add the error message that gets printed to the console. (Press F12 in chrome). It might help solve the issue.

[drusexton]

@tmcgee I am still really busy with other things in my office, and have yet to get back to this. However I realize I didn't provide you with the public URL, so here it is:

http://bhgis.org/apeg/propertyinventory/viewer/

@roemhildtg Thanks for the F12 tip, now I wont have to go the developer tools menu. As for the error message, there is not a whole lot to inspect (At least from my view point). My application was running with all other functionality except for the streetview widget. When I implemented the API Key in the viewer.js config as Tim pointed out it broke everything but the title bar.

I have been too tied up with other tasks to investigate if my api key is correct. Thanks for all of your help and I apologize for delayed responses to you all.

[tmcgee]

@drusexton Wait, you blame me? :smile: js.arcgis.com and many other services dependent on Amazon Web Services are having a serious outage today. I blame them!

[drusexton]

@tmcgee I wish I could say with confidence that it is the outage, but my service has been running like this since Friday. Its not your fault... My colleague in the office suggested I ditch the streetview widget, but I think I can get it to work eventually. Thanks to you all for your help! I'll keep you posted on my solution, and keep checking back to see if anyone has any solutions.

[green3g]

Hey @drusexton you are missing the google loader file. It was added to the new version of cmv (soon to be released).

https://github.com/cmv/cmv-app/blob/develop/viewer/js/gis/plugins/Google.js

You can tell because of the error messages in your browser console:

GET http://bhgis.org/apeg/propertyinventory/viewer/js/gis/plugins/Google.js 404 (Not Found)
init.js:31 info: ["/apeg/propertyinventory/viewer/js/gis/plugins/Google.js", Event]

[drusexton]

@roemhildtg about 5 mins after I sent the public URL, I went into the Console and notices I was missing a plug-in. You saved me some time in searching for the plugin config so thanks a lot! However the application is still failing, so it back to the drawing board for me. If anyone would like they can access the above referenced public URL to see if you can help pinpoint whats the issue now. Thanks again!

[tmcgee]

@drusexton In addition to using the Plugin, you also need to use the updated StreetView widget that uses the Plugin. I suggest you update your application to use the latest version of CMV then that will include the plugin, the updated StreetView and all the other updates that have occurred in the last 18 months. It shouldn't take very long to move your configuration to the new version.

[green3g]

The other thing I noticed is you used Key instead of KEY. Keep in mind javascript is case sensitive, so that will not work. double check this line

[drusexton]

Thanks everyone, I probably wont get to this until the end of next week at possibly even the following week. However I will let you all know how it goes. THANKS AGAIN!

[drusexton]

@tmcgee @roemhildtg Fellas I have finally had the chance to get back to this issue.I have implemented everyone's suggestions, yet still have no resolve. As far as I can tell the only issue is the API Key. The public URL is still out there if anyone would like to explore, and try to help me figure out what I am missing. @tmcgee you mentioned something about having no way to test my API Key, that leads me to think that maybe I am neglecting to do something on the Google side of things? I noticed in the Google Maps API there is a section about where to specify the key when loading the API. Is this what I am missing?

[green3g]

From above:

@drusexton In addition to using the Plugin, you also need to use the updated StreetView widget that uses the Plugin. I suggest you update your application to use the latest version of CMV then that will include the plugin, the updated StreetView and all the other updates that have occurred in the last 18 months. It shouldn't take very long to move your configuration to the new version.

[drusexton]

@roemhildtg As far as I know I am using the latest version 1.3.4?

[green3g]

Try the 2.0 beta. Its not so much a beta as its very stable. We just haven't had the time to put together releases for it. https://github.com/cmv/cmv-app/releases

[green3g]

Here's the latest version of the widget: https://github.com/cmv/cmv-app/blob/develop/viewer/js/gis/dijit/StreetView.js

[drusexton]

@roemhildtg I have tried everything I can think of with 1.3.4 to get the Streetview widget to work. I am going to reluctantly give 2.0 beta a go. I only say reluctantly because I did download it. I like many of the new functions, and most of all Streetview works for me. However whereas with 1.3.4 Streetview was my only major issue, it appears that I have many issues to iron out with 2.0 beta. For example there are a lot of basemaps, many of them do not even work. Also there appears to be an override on the header/title because when I load the url my Custom title and sub title flash and then quickly disappear. I hate to walk away from solving my issue with 1.3.4. But If I really want Streetview to work 2.0 is my only option. Thanks again to @roemhildtg and @tmcgee for your efforts in trying to help me solve this issue.

[tmcgee]

@drsexton Yes, unfortunately 2.0 is your only option because of changes made by Google requiring you to provide a key for your production environment.

All basemaps provided with 2.0 do work. If you are using your own custom basemaps, you might have minimal conversion but I don't think so.

Sounds like you've left the titles option in the viewer.js from the demo. You can remove them or edit them.