On my live site, the Google Map field is not working and I get the following errors in the console:

js_hxo8LLjpT7DhXzsSYgz75xh_wE18eJ7A_erzYCkYTZA.js:107 Uncaught ReferenceError: google is not defined(anonymous 
js_hxo8LLjpT7DhXzsSYgz75xh_wE18eJ7A_erzYCkYTZA.js:107 Uncaught ReferenceError: google is not defined(anonymous function) 
util.js:208 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
util.js:208 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
js?sensor=false&_=1467561611964:32 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

My environment: Drupal 8.1.2 with caching and css/js compression enabled.

Currently, I don't have found a way to add my api key. To overwrite/extend the "google-map-apis" library works only for the maps displayed in the frontend theme. But not if I edit a node.

Also, I think the integration of the "google-map-apis" is too late and whereby the "google not defined" js error occurs.

CommentFileSizeAuthor
#15 setting-for-google-api-key-2759953-15.patch7.6 KBpauloamgomes
#13 setting-for-google-api-key-2759953-13.patch7.6 KBpauloamgomes
#3 setting-for-google-api-key-2759953.patch7.69 KBashwinsh

Comments

cbeier created an issue. See original summary.

cbeier’s picture

cbeier commented

The way that I currently use to get the module to run on production is to modify the library js path via hook_library_info_alter() :

/**
 * Implements hook_library_info_alter().
 *
 * Change the google map library url to add the custom Google API key.
 */
function YOUR_MODULE_library_info_alter(&$libraries, $extension) {
  if (isset($libraries['google-map-apis'])) {
    $old_path = array_keys($libraries['google-map-apis']['js']);
    $old_path = $old_path[0];

    if (strpos($old_path, 'key') == FALSE) {
      // Parse the old/original js path and extract the query parameters.
      $js_url = parse_url($old_path);
      parse_str($js_url['query'], $js_url_query);

      // Modify the query parameters.
      unset($js_url_query['sensor']);
      $js_url_query['key'] = \Drupal::service('settings')->get('google_api_key');

      // Build the new js url with the modified params.
      $js_url['query'] = http_build_query($js_url_query);

      $new_js_url = '//' . $js_url['host'] . $js_url['path'] . '?' . $js_url['query'];

      $new_js = array(
        $new_js_url => [],
      );
      foreach ($libraries['google-map-apis']['js'][$old_path] as $key => $option) {
        $new_js[$new_js_url][$key] = $option;
      }

      $libraries['google-map-apis']['js'] = $new_js;
    }
  }
}

And then add you Google API key to your settings.php:

$settings['google_api_key'] = 'YOUR KEY';
ashwinsh’s picture

ashwinsh
He/Him
Primary language English
Location Pune
commented
StatusFileSize
new setting-for-google-api-key-2759953.patch7.69 KB

Hello @cbeier,

I have attached a patch for this issue, please review it.

Now users can choose whether they want to use an api key or a 'for Work' client id. It will also provides a warning on the status report page if an api key or client id is not provided so that users are aware it.

Also added configuration link for this module. (Reference Path: admin/config/gmap_field_settings)

Note: Please clear cache while reviewing these changes.

Thank you,
AshwinSh

ashwinsh’s picture

ashwinsh
He/Him
Primary language English
Location Pune
commented
Status: Active » Needs review
ashwinsh’s picture

ashwinsh
He/Him
Primary language English
Location Pune
commented
Priority: Normal » Critical
cbeier’s picture

cbeier commented

Maybe a general discussion: What is the best practice to integrate a external library/js with variable params in Drupal 8?

In the drupal documentation I don't have find a proper answer. Maybe it is a better way to integration the gmap js file not via a library, because we always have to manipulate the path via hook.

ashwinsh’s picture

ashwinsh
He/Him
Primary language English
Location Pune
commented

Hello @cbeier,

Did you review above patch file?

See : https://www.drupal.org/theme-guide/8/assets for assets management in Drupal 8.

As per drupal standards, we can integrate external js/css library through library.yml file and override as per requirements. If you have any other reference links or any other way to handle this then please share it.

Thank you,

javivf’s picture

javivf commented
Status: Needs review » Reviewed & tested by the community

It works as expected and I think is the correct way to setup js library

@ashwin.shaharkar Thanks :)

sokru’s picture

sokru commented

Works as planned, but should there be link in configuration page /admin/config to settings page admin/config/gmap_field_settings?

ashwinsh’s picture

ashwinsh
He/Him
Primary language English
Location Pune
commented

Hello @sokru,

Thank you for review.

I have already added a link for 'admin/config/gmap_field_settings' in google_map_field.info.yml file as 'configure: gmap.field.settings' in patch file. Also please check google_map_field.routing.yml for routing.

Thank you,

tanmuhittin’s picture

tanmuhittin commented

I still get error. I use drupal 7. Patch file doesnt work. Cannot add the key wrong question sorry

kbentham’s picture

kbentham commented

This works great! I agree with @sokru, it would be helpful if the config page was discoverable through configuration page. There should be a links.menu.yml file that adds the link to the web services menu item "system.admin_config_services".

pauloamgomes’s picture

pauloamgomes commented
StatusFileSize
new setting-for-google-api-key-2759953-13.patch7.6 KB

Hi, just followed previous suggestion and updated @ashwinsh patch to include the link. Also changed the menu path by replacing the underscore with dashes.

pauloamgomes’s picture

pauloamgomes commented
Status: Reviewed & tested by the community » Needs review
pauloamgomes’s picture

pauloamgomes commented
StatusFileSize
new setting-for-google-api-key-2759953-15.patch7.6 KB

Removed blank space.

kmoll’s picture

kmoll commented

I have reviewed the patch. I am able to add a key through UI page added and all warnings/errors are gone once a key is added.

+1 RTBC.

kmoll’s picture

kmoll commented
Status: Needs review » Reviewed & tested by the community
Carlos Miranda Levy’s picture

Carlos Miranda Levy commented

Not wanting to delay this commit any further, but per convention and as common practice shared by other modules, the API key definition should be at least listed at:
/admin/config/services.

  • pauloamgomes authored b408d38 on 8.x-1.x 
    Issue #2759953 by hatznie, ashwinsh, pauloamgomes: Added API key...
pauloamgomes’s picture

pauloamgomes commented
Status: Reviewed & tested by the community » Needs review

Patch applied to dev version, please review.

pauloamgomes’s picture

pauloamgomes commented
Status: Needs review » Fixed
pauloamgomes’s picture

pauloamgomes commented
Status: Fixed » Closed (fixed)
moshe weitzman’s picture

moshe weitzman commented

This module has no default config in a /config folder. It should just like most modules in core. There should additionally be a contrib schema file. See https://www.drupal.org/docs/8/creating-custom-modules/defining-and-using...

pauloamgomes’s picture

pauloamgomes commented

Thanks @moshe-weitzman, created a new issue and patch at #2849944