Embedding Google Street View in Drupal 8

Google Street View

Embedding Google Street View in Drupal 8

Drupal 8
Contrib

One of our clients requested a new Drupal 8 website using the popular Paragraphs module to compose content, managing the paragraph blocks using the Masonry grid layout library. Some of the paragraph types are used to embed Google Maps along with Google Street View.

Geolocation Field

Geolocation Field

To manage and display embedded Google Maps, we use the excellent Geolocation Field contrib module. This implements a "geolocation" field type, saving location coordinates along with sine, cosine and radian values to easily calculate proximities in SQL. A number of widgets and formatters are added, including Google Maps with geocoding support and the generic Google Maps formatter.

This provides us with a way to create a Google Maps paragraph type, where the user configures the location of the map, and we can apply additional JSON styling (using Snazzy Maps) and a custom marker image. However, showing Google Street View perspectives is not supported out of the box. Sure, you can drop Pegman on a street and open up the panorama this way, but it does not open automatically, let alone showing the POV (heading, pitch and zoom) the client intended.

At first, to support this use case we implemented a patch for the Geolocation Field module. The existing Google Maps widget and formatter was modified to support saving the POV values and opening up the Street View panorama when the values are present. However, this use case is deemed too much of an edge case to integrate and maintain it in the Geolocation Field module itself.

Geolocation Street View

We present you: Geolocation Street View

For us, re-rolling and adapting a patch for each new version of a contrib module, even when we use cweagans/composer-patches to automatically apply core and contrib patches, is not a viable solution in the long run. So we created a new contrib module that extends Geolocation Field. In comes Geolocation Street View. This module extends the Google Maps geolocation widget to detect when the client opens up Street View and to save the POV values (heading, pitch and zoom) in the field's data property. Next to this, a new formatter embeds Google Maps (like the existing formatter in Geolocation Field) and opens up the Street View panorama with the given POV.

Using this solution, we added a second paragraph type "Street View". This way, the client has complete control for embedding Street View perspectives without the visitor having to open it manually.

VIM rules

Technical details

To develop the module, we started off by generating the module itself using Drupal Console. Then, we added a field widget and formatter using Console for the existing Geolocation field type.

The new StreetViewWidget extends the GeolocationGooglegeocoderWidget present in Geolocation Field. In essence, it adds hidden form fields for heading, pitch and zoom to the widget form, saving the values in the existing data blob column (which saves metadata arrays using Drupal's MapDataDefinition). On the JavaScript side, Street View is opened when the POV values are present, and a number of additional events are added using both Geolocation Field's and Google Maps' API's. A location change and clear event callback also clears the POV fields. When Street View is open, a StreetViewPanorama position_changed and pov_changed event respectively updates the existing coordinates (latitude and longitude) fields and fills in the values for the hidden POV fields.

Displaying Street View is done using the new StreetViewFormatter. This formatter does not, contrary to the GeolocationGoogleMapFormatter in Geolocation Field, support multiple locations (markers) on a single map, so extending this formatter class was not a good option. We did include the existing GoogleMapsDisplayTrait though, providing us with the default formatter settings and helper methods. Two additional formatter settings were added, disabling the close button on the Street View panorama and disabling the address pane shown in the upper left corner. More settings can be added in later versions. The JavaScript part does nothing more than opening the configured panorama when the POV values are there.

You are welcome to test the module (currently in beta 1) and report any issues in the issue tracker. We intend to release a first release candidate when no new bugs are found for a while.

Header picture: © 2017 Google

Blijf op de hoogte via onze nieuwsbrief