使用jQuery Store Locator插件以编程方式选择标记

Question

I'm trying to programatically select a marker on a map with the jQuery Store Locator Plugin .

I have a jQuery click event that should trigger a marker selection.

// Init
$('#bh-sl-map-container').storeLocator({ //settings })

$('.select-head-office').click(function() {
  // Here I'd like to select a specific marker, 
  // Ideally, select a marker from a unique category. Ex: Head office
});

The plugin has the method changeSelectedMarker(), not sure if I could use it to solve my problem.

Answer 1

I finally figured a solution. It's a little hackish but it works well.

First, I realized I could use the list of locations to get the markers IDs, and associate them with the location category.

<li data-markerid="{{markerid}}" data-marker-category="{{category}}">

Then, with jQuery, I select get the markerId for the location with the category 'head-office'. (Ideally, a unique category)

$('*[data-marker-category='head-office']').data('markerid');

I created a custom method to pan to the selected marker.

selectMarker: function(markerId) {
 var _this = this;
 var map = _this.map;
 var infowindow = _this.infowindow;
 var storeStart = _this.storeStart;
 var page = _this.page;
 var selectedMarker = markers[markerId];

 map.panTo(selectedMarker.getPosition());
 if (_this.settings.bounceMarker === true) {
  selectedMarker.setAnimation(google.maps.Animation.BOUNCE);
  setTimeout(function () {
    selectedMarker.setAnimation(null);
  }, 1200);
 }
}

Finally, I call my method with the markerid variable I got earlier.

storeLocator = $map_container.data('plugin_storeLocator');
storeLocator.selectMarker(activeMarkerID);