How do import a javascript file on /scripts/routes/common.js?

sage
1

is there a way to do a import https://www.somesite.com/somejs.js on the top of the common.js file? what would be the best way to import a javascript file?

I am trying to load the Javascript needed for ACF google maps.

2

You can enqueue the script like so in your /theme/app/setup.php

file:

/**
 * Theme assets
 */
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
    wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);

    if (is_single() && comments_open() && get_option('thread_comments')) {
        wp_enqueue_script('comment-reply');
    }
    if (is_singular('properties')) {
        wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=[YOUR MAPS KEY]', [], null, true);
    }
}, 100);
3

Still didn’t work, when i add the Google Maps helper code from here https://www.advancedcustomfields.com/resources/google-map/ on the js file in the route folder and try to run a yarn build command it returns this error

   26:25  error  'google' is not defined                   no-undef

26:54 error Missing trailing comma comma-dangle
28:23 error 'google' is not defined no-undef
62:33 error Missing trailing comma comma-dangle
66:26 error 'google' is not defined no-undef
68:19 error Missing trailing comma comma-dangle
78:32 error 'google' is not defined no-undef
79:36 error Missing trailing comma comma-dangle
83:11 error 'google' is not defined no-undef
103:26 error 'google' is not defined no-undef
107:39 error Missing trailing comma comma-dangle
124:15 error 'map' is assigned a value but never used no-unused-vars

and this is how my common.js file looks like

export default {
init() {

(function( $ ) {

  /**
   * initMap
   *
   * Renders a Google Map onto the selected jQuery element
   *
   * @date    22/10/19
   * @since   5.8.6
   *
   * @param   jQuery $el The jQuery element.
   * @return  object The map instance.
   */
  function initMap( $el ) {

    // Find marker elements within map.
    var $markers = $el.find('.marker');

    // Create gerenic map.
    var mapArgs = {
      zoom        : $el.data('zoom') || 16,
      mapTypeId   : google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map( $el[0], mapArgs );

    // Add markers.
    map.markers = [];
    $markers.each(function(){
      initMarker( $(this), map );
    });

    // Center map based on markers.
    centerMap( map );

    // Return map instance.
    return map;
  }

  /**
   * initMarker
   *
   * Creates a marker for the given jQuery element and map.
   *
   * @date    22/10/19
   * @since   5.8.6
   *
   * @param   jQuery $el The jQuery element.
   * @param   object The map instance.
   * @return  object The marker instance.
   */
  function initMarker( $marker, map ) {

    // Get position from marker.
    var lat = $marker.data('lat');
    var lng = $marker.data('lng');
    var latLng = {
      lat: parseFloat( lat ),
      lng: parseFloat( lng )
    };

    // Create marker instance.
    var marker = new google.maps.Marker({
      position : latLng,
      map: map
    });

    // Append to reference for later use.
    map.markers.push( marker );

    // If marker contains HTML, add it to an infoWindow.
    if( $marker.html() ){

      // Create info window.
      var infowindow = new google.maps.InfoWindow({
        content: $marker.html()
      });

      // Show info window when marker is clicked.
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open( map, marker );
      });
    }
  }

  /**
   * centerMap
   *
   * Centers the map showing all markers in view.
   *
   * @date    22/10/19
   * @since   5.8.6
   *
   * @param   object The map instance.
   * @return  void
   */
  function centerMap( map ) {

    // Create map boundaries from all map markers.
    var bounds = new google.maps.LatLngBounds();
    map.markers.forEach(function( marker ){
      bounds.extend({
        lat: marker.position.lat(),
        lng: marker.position.lng()
      });
    });

    // Case: Single marker.
    if( map.markers.length == 1 ){
      map.setCenter( bounds.getCenter() );

      // Case: Multiple markers.
    } else{
      map.fitBounds( bounds );
    }
  }

  // Render maps on page load.
  $(document).ready(function(){
    $('.acf-map').each(function(){
      var map = initMap( $(this) );
    });
  });

})(jQuery);
},

finalize() {
},
};

I added the code you told me on setup.php but still no luck

4

Maybe this thread can help:

5

Yeah i tried that and did a yarn build but nothing.

6

You need to fix your eslint errors.

You can use this at the top of your common.js file to disable eslint and rebuild to see if your maps work and fix your errors later:

/* eslint-disable */

i.e:

/* eslint-disable */
export default {
  init() {
    // JavaScript to be fired on the about us page
7

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