3rd party js package not working

sage
1

Hi, I’m trying to import and use this js package that requires google maps API. I keep having issues possibly related to js file loading sequence and/or global variables. At this point, I can’t get it to compile.

In summary, I’ve installed the package as specified in Roots docs, and then added entry points to js and css, enqueued the external google maps js. At first I was receiving eslint errors:

'google' and 'SnazzyInfoWindow is not defined"

From reading other threads, it seems that I can add 'google' to .eslintrc.js and webpack.config.js externals. But SnazzyInfoWindow is a constructor, so I’m not sure why it’s not available…

Here’s the full rundown.

Installed package:

yarn add snazzy-info-window

Then to [main.js] I added:

import 'snazzy-info-window/dist/snazzy-info-window.js';

To [main.scss] I added:

@import "~snazzy-info-window/dist/snazzy-info-window.min.css";

To [setup.php] I enqueued the google maps API followed by the js file:

wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=KEY', '[]', null, true);

wp_enqueue_script('sage/examplescript.js', asset_path('scripts/examplescript.js'), ['jquery'], null, true);

I then added the enclosing div to my partial to hold the map:

<div class="map-canvas"></div>

Here’s the js code for [examplescript.js]:

$(function() {
  var map = new google.maps.Map($('.map-canvas')[0], {
      zoom: 14,
      center: new google.maps.LatLng(40.72, -74),
  });
  var marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(40.72, -74),
  });
  var info = new SnazzyInfoWindow({
      marker: marker,
      content: 'Your snazzy content.',
  });
  info.open();
});

Any help is appreciated.

2

Have you looked at theissues on the GitHub repo for snazzy-info-window? I’m not sure this is a Sage-related issued. This particular issue might help you: https://github.com/atmist/snazzy-info-window/issues/16

3

I don’t know how I missed that. The last post on that thread did it. Specifically:

let SnazzyInfoWindow = require('snazzy-info-window');

I ended up wrapping it in a self-calling function:

(function () {
  function initMap() {
    let SnazzyInfoWindow = require('snazzy-info-window');
    
    // code

  }
  google.maps.event.addDomListener(window, 'load', initMap);
}());

Thanks!

4

This topic was automatically closed after 42 days. New replies are no longer allowed.