Broken Google Maps with GGPKG and Pano2VR

Update: The plugin author got back to me on this issue, and provided the following clarification: 

In our software the photographer/enduser gets their own API key and enters it in.

Up until a few months ago our own API key was used, but then Google changed things around and the API has to be in the map element.
Due to the possibilities of many customers and end users all using the same API, the end user/photographer now needs to get their own.

If you’re a Pano2VR user, refer to this Garden Gnome document for instructions on how to enter your API key.

This is a pretty niche topic, but imagine you want to produce full spherical panorama photographs and show them on your WordPress site in HTML5 virtual reality. Like I said: niche. But panorama photography is a popular field, and VR panos are really cool and unique. Tools such as Garden Gnome’s Pano2VR make converting your photos into virtual panoramas a breeze. They also provide a WordPress plugin and file format (GGPKG) that makes them easy to implement on your site in HTML5.

While working on implementing one of these GGPKG virtual reality panoramas onto a client’s website, I ran into the following error when attempting to display a Google map below the panorama:

Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

The panorama can be configured to include a Google Map with pins dropped on the location the pictures were taken. Really nifty idea, and a great way to add context to your photos. This error was caused by the plugin not including the ability to declare a Google Maps API key. As per Google:

“To use the Google Maps JavaScript API, you must register your app project on the Google API Console and get a Google API key which you can add to your app.”
Source: https://developers.google.com/maps/documentation/javascript/get-api-key

I searched the plugin files and found in the ggpkg-import/ggpkg-import.php to find where they are enqueuing the Google Maps script:

function ggsw_add_googlemaps_script()
{
ggsw_error_log("in add_googlemaps_script!");
wp_enqueue_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?v=3.exp');
}

Simply adding my API key to the arguments resolved the issue. Here is what the line looked like after editing:

wp_enqueue_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?key=abcdefghijklmnopqrstuvwxyz&v=3.exp');

Now it works fine, no more error caused by a missing API key! My recommendation to the plugin author was that they provide the option of adding a Google Maps API key in a future release.

Edit: While I was at it, I replaced the rather unprofessional looking “map goes here!” text that appears while the map is loading. I replaced it with “Loading Google Maps…” If you’d like to do the same, search for “map goes here!” in ggpkg-import/include/ggsw-include.php and replace the string with one of your preference.

[divider line_type=”No Line” custom_height=”50″]

Do you like what you see? Contact us today!

If you’re Canadian or located in the National Capital Region, let’s chat about bringing your project or business online.

[divider line_type=”No Line” custom_height=”50″]