Loading RichMarker into Sage theme

sage
#1

I am using RichMarker for https://github.com/googlemaps/js-rich-marker for the markers in my maps in Sage. The problem is I can’t get RichMarker to load or load at the right time. Has anyone used this successfully? OR barring that something like RichMarker as a replacement?

#2

More detail:
in my setup.php Have a conditional to call the google map api like so:

  if( get_post_type() == 'artist' || get_post_type() == 'city' ) {
    wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery'], null, true);
    wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?sensor=false&key='.GOOGLE_MAP_API.'&callback=initMap', ['sage/js'], null, true);
  } else {
    wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery'], null, true);
  }

In a script file I have this function initMap function:

function initMap() {
   console.log('loading richmarker');
   var headID = document.getElementsByTagName("head")[0],
   newScript = document.createElement('script');
   newScript.type = 'text/javascript';
   newScript.src = "/app/themes/culturecollide-theme/dist/scripts/rich_marker.js";
   headID.appendChild(newScript);
}

then in main.js I have an init and finalize method:

    'artist_template_default': {
      init: function() {
        parsed_map_vars = JSON.parse(map_vars);
        map = new google.maps.Map($('.travel__detail__map__map').get(0), {
         zoom: 16,
         center: new google.maps.LatLng(parsed_map_vars.city.location.lat, parsed_map_vars.city.location.lng),
         scrollwheel: false,
         styles: styles,
         mapTypeControl: false,
         streetViewControl: false
       });

     },
     finalize: function() {
       parsed_map_vars.locations.forEach(function(feature, index) {
         var marker = new RichMarker({
           map: map,
           position: feature.position,
           content: '<div class="cc-map-marker '+feature.id+'"><img class="img-fluid" src="../images/map_icon.png" srcset="../images/map_icon.png 1x, ../images/map_icon@2x.png 2x" /></div>',
           anchor: RichMarkerPosition.MIDDLE,
           flat: true,
           draggable: false,
           title: feature.name,
           id: feature.id,
         });
         marker.setZIndex(index++);
         markers[feature.id] = marker;
         google.maps.event.addListener(marker, 'click', scrollToDetail);
       });
       google.maps.event.addListenerOnce(map, 'idle', loadMarker);
     }

Lastly, here is my manifest.json config for RichMarker:

    "rich_marker.js": {
      "files":[
        "../bower_components/kds-google-maps-utility-library-v3/richmarker/src/richmarker-compiled.js"
      ]
    }
  },

I prototyped this in a middleman app and all I needed there was to require the rich marker to the asset pipeline. I tried that and it didn’t work, I did some googling and in the google groups for Maps it was said that RichMarker needed to be loaded in the callback, hence what I have here but still nothing,