Google Street View Widget 2.1 - 08/29/16

12-31-2014 11:01 AM

Google Street View Widget 2.1 - 08/29/16

All after much back and forth with different people and what now seems to be legitimate email traffic with the Google Maps API Team. It is now apparent that this widget does NOT conform to the Google Maps API Terms of Service. Due to this fact, this widget download will be removed and the live preview site will be un-accessible.  It is my recommendation that all users of this widget immediately remove the widget from their WAB site and discontinue use of this widget. The only way it seems currently to be compliant with the TOS is to not have a (non-Google) map visible at all in the app which is of no use at all to us esri users. I find it hard to understand how the Worlds leader in GIS technology and Google can not come to terms on the use of StreetView panoramas with esri basemaps, but it is what it is. So after years of this widget being used by hundreds of users around the world we must say good-bye.

Here is another widget for the Web App Builder.

Web AppBuilder for ArcGIS | Help - Google Street View widget

List of the latest enhancements and changes:

  1. Updated for WAB 2.1

List of older enhancements and changes:

  1. Widget no longer open the street view html window automatically on open.
  2. Prevent popup check from firing multiple times.
  3. Removed sensor portion of the StreetView code as Google has depreciated it.
  4. Minor configuration UI changes.
  5. Widget code updated to work with all the new themes and their style colors.
  6. Fixed issue with maps whose spatial reference was not 4326 or 102100


  • This widget conforms to the Google Terms of Use (TOS) agreement
  • Widget allows configuration of Google Street View Panorama Options
  • Widget provides drag and drop support
  • Widget provides graphical feedback on the map when changes are made to the Street View Panorama window
  • This widget displays the Google Street View Panorama in a popup browser window as to not violate the Google TOS agreement


I have to say, this widget looks so useful!! I also really appreciate the time you put into the eSearch widget, its so much more functional than the built in query widget.

However, I'm having trouble setting up the Google Map API to allow access to the street view widget in my apps.

The apps I am creating are using the WAB developer version 1, then hosting them online using Google Drive. I've successfully created an application that runs well hosted on the Google Drive as the web host. Here is the example: ArcGIS Web Application

The problem is, I don't know what to use as the URL's when registering the Google Maps API. I don't really know what the URL will be until it is uploaded to Google Drive, and then at that point I can't change the widget settings (unless I edit the script files but I wouldn't be sure which to edit.)

Just wondering if you could share any info that could help me get this widget up and running in my apps!




   Your the first that has ever contacted me about using Google Drive. You can leave the API Key blank and it should work fine. If you want to keep track of Street View API usage based on particular sites then you need the Google API Key and in your case you would have to manually edit the config_Google Street View.json in the apps configs\StreetView folder once you have it downloaded. Simply add your api key  string to the googleapikey property in the config_Google Street View.json file.


Thanks for the info. I'll give that a try. I didn't know you could leave the API key blank, while leaving it blank and testing it locally, I get an error message from google saying it's not registered.

Google Drive has been my workaround for being able to distribute custom applications to clients. Our company doesn't have an ArcGIS server or any type of HTTP server, so it seemed the best bet was to use a web host. Google Drive is free for hosting 5gb of data, and these apps are relatively small, so this solution should work for quite a few apps. You just have to use the link[DOCUMENTID] with the document ID being the ID string of the index file. Google has documentation about using Drive as a web host here: Host webpages with Drive - Drive Help

I did run into one problem with this method, however. In the example app I posted above, when I uploaded it any widgets that were in the header area didn't work. If you clicked on them nothing happened. However, the widgets in the "floating area" worked fine. I spent awhile trying to remedy this issue but I couldn't find a source of the error, so I removed those widgets, as they weren't essential to the function of the app.



while leaving it blank and testing it locally, I get an error message from google saying it's not registered.

Strange All though testing on my end I never put the APIKey. I only add the key after I deploy the app so that I can track the usage.


Dose the Street Viewer require a certain projection to work?

I am not using WGS84 (LAT/LONG), but a State Plane projection and I can't get the viewer to work.



   I see the issue and I am working on the fix. Thanks for reporting this.


   The fixed version is now available.

Hi Robert, excellent app thanks,

Can you advise if its possible to get custom markers to appear in streetview where there is a feature in the arcgis map. In other words you would have to get the feature details (Coordinates) near where you enter into streetview and then add them in somehow, but I think you need to load a google map to do this. Let me know your thoughts please as this would be very useful in that it means you could actually see the wepmap features in streeview too. I know that you would need a set of icons in the code to match feature type but thats not a major issue. Please would appreciate your advise


   Currently I have not researched this possibility but if StreetView does have the ability to show markers in the street view window than this would be real interesting. The big determining factor for my widgets development is new functionality has to be reasonable to develop and configure, the new feature would have to be of interest and useful to a number of the widgets users. Many time an idea seems good but to make that feature configurable for all users data makes the idea a unrealistic goal.

I think he is referring to something like the tools Arc2Earth has for desktop software.

It would be awesome if someone could make this possible for web mapping platforms such as the old Viewer for Flex or the new WAB.


I am getting an error when I drop the streetview person on the map

it says the key is not valid.

yet if I click it away streetview seems to be loaded.

I just left the settings as you had them.

I see I need to get a key

what is the difference between the 2 choices?

The client ID is for Google business users and the API key is for normal users

I have a dumb question. I'm used to Flex application builder where I just add widget and navigate to the zip file. What is the process in Web Application Builder to add a widget?

It's actually an easy process but can be rather lengthy if you haven't installed Web AppBuilder yet. Check out this blog Deploying a Custom Web App Widget – ArcGIS Online and the corresponding links, it should give you a leg up. Post any further questions to the Web AppBuilder Custom Widgets Group and you should get all your questions answered, it's a very helpful group.


   So are you good now with the install process for custom widgets, based on the links Ben provided?

I think I will be once I get my IT dept. to install the correct programs
he mentions.

OK, just wanted to be sure you did not still have questions.

Thanks Robert, oh I'm sure I will have questions later

Once I have a web map and deployed as a Web Application Builder map I am then downloading from my Web Application Developer and putting map on my wwwroot and inetpub folder of our GIS Server. Should I add widgets here to the widgets folder on ArcGIS Server or should I add them to the folder before I copy the map to the Server. Does it make a difference? Also on a side note, is there an easy way to add a second logo?


   I am not sure it make a difference but I normally add it in WAB and then download the app.

A second logo where?

Actually anywhere, but I was thinking maybe on the map above the scale bar. Used to do that in Flex Builder. 


   I will have to look into this and get back with you.

Thank you

Anonymous User

I'm getting this same thing Glenn. I went to APIs & Auth, then Credentials, Generate new Key, and pasted in. Tried both fields both failed.  Also it seems like Google's own directions are out of date, the screenshots don't look like the current page. Anyone else notice this? But it 's okay.  It works fine blank.  We use Google Analytics to track overall page use so we don't need to track streetview specifically.

note Robert's response

I have it working now

The client ID is for Google business users and the API key is for normal users

Anonymous User

I tried the API Key box. It did not work. I cleared cache, then launched, just tried. Unauthorized error. I even Downloaded then tried it in all three browsers, no dice. I signed up with a Gmail account so I presume we are a normal user. It says all Referrers allowed in the Google Console.  However, I'm perfectly fine leaving it blank. I just wanted to leave this here as an error report. Perhaps it is user error perhaps a bug, I don't know. I will be happy to do further testing upon suggestions.

Here it is copied out of Google Console / APIs & Auth / Credentials:

Public API access

Use of this key does not require any user action or consent, does not grant access to any account information, and is not used for authorization.

Learn more

Create new Key 


Key for browser applications    

API key



Any referrer allowed        

Activation date

May 5, 2015, 7:56:00 AM

Activated by


   I am not sure I have explained this well enough in the help docs but when using this widget in a development environment the use of the API key or client id is not needed. It is only when you actually deploy your app to a production server and are using a FQDN url that you need to register that FQDN url with Google and get and api key to plug into the widget. Hope this clears things up.

I got it to work also using my Google API key, however, since this is Google Streetview being deployed on an ArcGIS Server to the public is there a different licensing agreement.?


   Not that I am aware of.

Hello Robert,

I´ve recently added your Widget to my WAB, but when I drop the Street View Man, the pop-up window shows this message:

No Street View Image Available

or you have not yet dragged the Google® Street View man

onto the map to set your location.

Any suggestions regarding this matter?

Thanks in advance


  Can you check the your browsers console messages and see if there is an error listed?


The widget has finally started working (I don't really know why).

At this point, the pop-up window showed the Street View for a few seconds with full functionality, but then this message appeared:

As I read in a previous reply, I left the API key blank, and now works like a charm!

Thank you for your interest and for this useful widget!

Help me out here, I had a google api key for Flex so I just put it in for this app but I kept getting the message that the provided key is invalid.  So I thought, I will just create a new one, I created a new key for server application but I still receive the same error.  Also, for some odd reason I cannot seem to get it to run at all on my webserver machine but when I launch it, the widget works until I get the api key error. 


   Leave the API key blank until you actually deploy your application to a production web server.

I think the issue was on the server machine I am working with, Internet Explorer must be really locked down and I have troubles bring up the configuration for widgets.  When I started using Firefox, it started working.  Also, I didn't realize the help files were on the live site, I have since located them and I think things will go smoother for me from now on. 

Hello Ben,

Can you please provide link or the URL to the blog referenced in your post?

Best regards,


Not 100 % sure this is what he meant but it is an excellent source to get started.

Thank you for sending the link Josh.

Best regards,


When I check your live preview site I get a create widget error message.error.png

is this a 1.2 issue? Should I just be patient?


   My live preview site is still using 1.1 so it is not a 1.2 update issue. I just pulled up the site without issue in FireFox but when I use Chrome I see the same issue you are seeing. I will have to get this fixed. Thanks for reporting this. I will likely fix the 1.1 as well as release a new 1.2 version soon.


I get the same error with the widget when I invoke it from an app that was imported into 1.2 from 1.1.  It was working fine in 1.1.




  Many of my custom widgets for 1.1 will not work in 1.2. Eventually I will update all of them,


It looks like 1.2 has lots of profound changes....

The LocalLayer widget, the most important widget of all, is particularly effected.



Robert, looking forward to when you can update the Streetview Widget to work in 1.2.  It's an awesome widget and really appreciated. 

Robert & company,

Simple fix to get Google Street View Widget to work with 1.2...

Within the Widget.js file, look for the line that says...

---var cs = domStyle.getComputedStyle(query(".jimu-main-bgColor")[0]);

Change the "jimu-main-bgColor" to "jimu-main-background"

---var cs = domStyle.getComputedStyle(query(".jimu-main-background")[0]);

- Vic

That works perfectly.  Good job! 


   Thanks for the info. I had to do a lot more to make this work for several of the other new themes. Hopefully I will have a new release later this week.


  1.2 compatible version now available.

Thanks for the quick update.  You rock.

I am still getting a create widget error, is it possible I need to change my google api key?

Version history
Last update:
‎12-31-2014 11:01 AM
Updated by: