Original Street View colors without Google API Key

Street View is a good tool, which can be incorporated into your own interactive maps like Leaflet or OpenLayers. Unfortunately, since 2018 Google hasn’t served it for free. In turn, the Google Maps products can’t be set up properly, because you can see the “For development purposes only” information along with the poor quality of the map and Street View. Maps appear darker than usual and Street View is displayed on a negative scale. The current pricing for Google Maps can be found here. Maybe it’s not a huge amount to pay, but if you don’t want to do it, you probably won’t need to. In this short post, I would like to show you how to get over (at least partially) the negative scale of the Street View. You will still see the message “For development purposes only”, but your Street View won’t be negative anymore.

The issue lies in the CSS code included in the Street View implementation. In the OpenLayers example, this implementation includes 2 files, the .js and the .css one, which look pretty much like this:

<link rel="stylesheet" href="ol-street-view.css" />
<script src="ol-street-view.js"></script>

and our alteration can be done in the .css file.
We should find the section, which defines our Street View panorama toggleable on our map. Next, just adding the filter argument and invert function should solve our problem.

#ol-street-view--panorama {
    display: none;
    background-color: #555555 !important;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
    /*-webkit-filter: invert(1);*/
    filter: invert(1);
}

.ol-street-view--activated #ol-street-view--panorama {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    border-bottom: 3px solid #222222;
    /*-webkit-filter: invert(1);*/
    filter: invert(1);
}

Alternatively, you can use the webkit-filter argument, which has been quoted in the examples above. The result should make you happy (Pic. 1).

Pic. 1 Reverting back the Street View negative scale by simple argument in CSS code.

On the other hand, all the Street View options will be negative this time (Zoom, compass, address) but it’s only a minor thing. The landscape captured by the Street View camera won’t be negative anymore.

Mariusz Krukar

Links:

1. https://www.plugandplaydesign.co.uk/google-maps-for-development-purposes-only-error/
2. https://developers.google.com/maps/documentation/javascript/streetview
3. https://www.adoclib.com/blog/google-maps-shows-for-development-purposes-only.html
4. https://tsh.io/blog/time-of-transition-what-are-the-google-maps-api-alternatives/
5. https://www.eliassonmarketing.com/google-maps-api-what-you-need-to-know/
6. Street View – coding library example – negative view
7. Google Street View with negative colors – standalone version
8. Google Maps Platforrms FAQ
9. https://mapsplatform.google.com/pricing/
10. https://rapidapi.com/blog/how-to-get-google-maps-api-key-free-tutorial/
11. https://github.com/GastonZalba/ol-street-view
12. https://gist.github.com/crofty/2197042
13. https://mapsplatform.google.com/pricing/
14. https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert()

Forums:

1. https://stackoverflow.com/questions/13325798/invert-colors-of-an-image-in-css-or-javascript
2. Py4u.net: Google Maps shows “For development purposes only”
3. Support.ruckuswireless.com: Dashboard cannot load Google map correctly – Google Map API key

Youtube: