Bing Maps Trigger Launch Event
I'm having trouble with the click event on Bing Maps. I have an array of repositories and I can put all the kick and click events without any problem (to open the infobox)
var STORES = [
{
id: 123,
lat: 1.23456789,
lng: -1.23456789,
name: 'AEVA'
},
...
]
for (var i = 0; i < STORES.length; i++) {
var pinOptions: {icon: 'map-pin.png?id'+STORES[i].id, width: 29, height: 52},
LatLng = new Microsoft.Maps.Location(STORES[i].lat, STORES[i].lng),
pin = new Microsoft.Maps.Pushpin(LatLng, pinOptions);
pin.content = '<p>'+STORES[i].name+'</p>';
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
bing.pinLayer.push(pin);
}
Now the problem is that the user comes to the page via a search page which basically adds a hashtag with an id like / stores # id123
I want the card to automatically open the field with this ID, so I added this code
var hash = window.location.hash;
hash = hash.replace("#", "");
if(hash.length>0){
var pin = $('img[src*="?'+hash+'"]').parent();
pin.trigger('click');
}
But it just won't work. I have also tried
Microsoft.Maps.Events.invoke(a, 'click');
But nothing happened, does anyone have a solution to trigger the event?
thank
source to share
Microsoft.Maps.Events.invoke
expects an entity entity, not an Html element. Entity can be any of the following types: Infobox , Polygon , Polyline , Pushpin , TileLayer, or EntityCollection .
Having said that, you might consider the following approach for finding Pushpin :
function findPin(map,storeId)
{
for(var i = 0; i < map.entities.getLength();i++){
var entity = map.entities.get(i);
if(entity.getIcon === undefined) continue;
var icon = entity.getIcon();
if(entity.getIcon() === "map-pin.png?id" + storeId) return entity;
}
return null;
}
Using
var storeId = window.location.hash.replace("#id", "");
if(storeId.length > 0){
var selectedPin = findPin(bing,storeId);
Microsoft.Maps.Events.invoke(selectedPin, 'click');
}
Where
function displayInfobox(e) {
infobox.setLocation(this.target.getLocation());
infobox.setOptions({ visible: true });
}
source to share