Bing Maps - trigger a Click on PushPin event

Question

I have the following bing card: https://www.bob-elliot.co.uk/locateV2.php

When the store is selected in the left list, the map is automatically centered on this button, what I need to do now is call the click () handle of this output (or the corresponding information buffer is displayed).

The problem is that I click contacts in Microsoft.Maps.EntityCollection(); called dataLayer , so I can't directly call map.entities.get () - or rather, if I try to name it that way, get () will not return anything.

Pay attention to the zoomMap() function at the bottom of this fragment, I commented on the corresponding lines.

How can I trigger a click event?

 var map = null; var dataLayer = null; var infoboxLayer = null; function loadMap() { //#### Prep default location var defaultLocation = new Microsoft.Maps.Location(53.6880, -2.6646); //#### Prep Map Options var mapOptions = { credentials: 'KEY_REMOVED', center: defaultLocation, mapTypeId: Microsoft.Maps.MapTypeId.road, zoom: 7, enableClickableLogo: false, enableSearchLogo: false } //#### Initialise the primary map control map = new Microsoft.Maps.Map(document.getElementById('BobElliotMap'), mapOptions); //#### Add data layer dataLayer = new Microsoft.Maps.EntityCollection(); map.entities.push(dataLayer); //#### Add infobox layer infoboxLayer = new Microsoft.Maps.EntityCollection(); map.entities.push(infoboxLayer); //#### Prep InfoBox & add to infobox layer var infoboxOptions = { width: 300, height: 200, visible: false, offset: new Microsoft.Maps.Point(0, 20) }; infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), infoboxOptions); infoboxLayer.push(infobox); //#### Add Data to the map DrawPins(); } function displayInfobox(e) { if (e.targetType == "pushpin") { infobox.setOptions({ title: e.target.Title, description: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) }); infobox.setLocation(e.target.getLocation()); //#### A buffer limit to use to specify the infobox must be away from the edges of the map. var buffer = 30; var infoboxOffset = infobox.getOffset(); var infoboxAnchor = infobox.getAnchor(); var infoboxLocation = map.tryLocationToPixel(e.target.getLocation(), Microsoft.Maps.PixelReference.control); var dx = infoboxLocation.x + infoboxOffset.x - infoboxAnchor.x; var dy = infoboxLocation.y - 25 - infoboxAnchor.y; if (dy < buffer) { //Infobox overlaps with top of map. //#### Offset in opposite direction. dy *= -1; //#### add buffer from the top edge of the map. dy += buffer; } else { //#### If dy is greater than zero than it does not overlap. dy = 0; } if (dx < buffer) { //Check to see if overlapping with left side of map. //#### Offset in opposite direction. dx *= -1; //#### add a buffer from the left edge of the map. dx += buffer; } else { //Check to see if overlapping with right side of map. dx = map.getWidth() - infoboxLocation.x + infoboxAnchor.x - infobox.getWidth(); //#### If dx is greater than zero then it does not overlap. if (dx > buffer) { dx = 0; } else { //#### add a buffer from the right edge of the map. dx -= buffer; } } //#### Adjust the map so infobox is in view if (dx != 0 || dy != 0) { map.setView({ centerOffset: new Microsoft.Maps.Point(dx, dy), center: map.getCenter() }); } } } function DrawPins() { var pin0 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(53.1913, -2.51945)); pin0.Title = "** CYCLONE CYCLES A/C CLOSED"; pin0.Description = "74 WEAVER STREET<br />WINSFORD<br />CHESHIRE<br />CW7 4AA<br /><br /><b>Tel:</b> [phone]"; Microsoft.Maps.Events.addHandler(pin0, 'click', displayInfobox); dataLayer.push(pin0); var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(53.7485, -0.348162)); pin1.Title = "**2 WHEELS CYCLES LIMITED - HULL"; pin1.Description = "8 SPRING STREET<br />HULL<br />HU2 8RB<br /><br /><b>Tel:</b> [phone]<br /><b>Fax:</b> [phone]<br /><b>Web:</b> <a href='http://www.2wheelscycles.co.uk' targer='_blank'>www.2wheelscycles.co.uk</a>"; Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox); dataLayer.push(pin1); } function zoomMap(PinID, Lat, Long) { var ZoomLocation = new Microsoft.Maps.Location(Lat, Long); map.setView({ zoom: 13, center: ZoomLocation }); //#### These are the lines that dont work, selectedPin remains undefined //var selectedPin = dataLayer.entities.get(PinID); //Microsoft.Maps.Events.invoke(selectedPin, 'click', ''); } 

Answer 1

Looks like for some reason e.target is not part of the displayInfobox function.

I changed your code a bit to 2, 3 places to get something close to your intended point. Please check it below:

 var map = null; var dataLayer = null; var infoboxLayer = null; function loadMap() { //Prep default location var defaultLocation = new Microsoft.Maps.Location(53.6880, -2.6646); //Prep Map Options var mapOptions = { //credentials: 'KEY_REMOVED', center: defaultLocation, mapTypeId: Microsoft.Maps.MapTypeId.road, zoom: 7, enableClickableLogo: false, enableSearchLogo: false } //Initialise the primary map control map = new Microsoft.Maps.Map(document.getElementById('BobElliotMap'), mapOptions); //Add data layer dataLayer = new Microsoft.Maps.EntityCollection(); map.entities.push(dataLayer); // Add infobox layer infoboxLayer = new Microsoft.Maps.EntityCollection(); map.entities.push(infoboxLayer); //Prep InfoBox & add to infobox layer var infoboxOptions = { width: 300, height: 200, visible: false, offset: new Microsoft.Maps.Point(0, 20) }; infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), infoboxOptions); infoboxLayer.push(infobox); //Add Data to the map DrawPins(); setTimeout(function() { //Initial zoom for testing zoomMap function var pushpin = dataLayer.get(0); var indx = dataLayer.indexOf(pushpin); zoomMap(indx, pushpin.getLocation().latitude, pushpin.getLocation().longitude); },500); } function displayInfobox(e) { if ( this.target.id && this.target.id.indexOf("pin") != -1 ) { alert("click event fired on pushpin"); infobox.setOptions({ title: this.target.Title, description: this.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) }); infobox.setLocation(this.target.getLocation()); //A buffer limit to use to specify the infobox must be away from the edges of the map. var buffer = 30; var infoboxOffset = infobox.getOffset(); var infoboxAnchor = infobox.getAnchor(); var infoboxLocation = map.tryLocationToPixel(this.target.getLocation(), Microsoft.Maps.PixelReference.control); var dx = infoboxLocation.x + infoboxOffset.x - infoboxAnchor.x; var dy = infoboxLocation.y - 25 - infoboxAnchor.y; if (dy < buffer) { //Infobox overlaps with top of map. //#### Offset in opposite direction. dy *= -1; //#### add buffer from the top edge of the map. dy += buffer; } else { //#### If dy is greater than zero than it does not overlap. dy = 0; } if (dx < buffer) { //Check to see if overlapping with left side of map. //#### Offset in opposite direction. dx *= -1; //#### add a buffer from the left edge of the map. dx += buffer; } else { //Check to see if overlapping with right side of map. dx = map.getWidth() - infoboxLocation.x + infoboxAnchor.x - infobox.getWidth(); //#### If dx is greater than zero then it does not overlap. if (dx > buffer) { dx = 0; } else { //#### add a buffer from the right edge of the map. dx -= buffer; } } //#### Adjust the map so infobox is in view if (dx != 0 || dy != 0) { map.setView({ centerOffset: new Microsoft.Maps.Point(dx, dy), center: map.getCenter() }); } } } function DrawPins() { var pin0 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(53.1913, -2.51945)); pin0.id = "pin_0"; pin0.Title = "** CYCLONE CYCLES A/C CLOSED"; pin0.Description = "74 WEAVER STREET<br />WINSFORD<br />CHESHIRE<br />CW7 4AA<br /><br /><b>Tel:</b> [phone]"; Microsoft.Maps.Events.addHandler(pin0, 'click', displayInfobox); dataLayer.push(pin0); var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(53.7485, -0.348162)); pin1.id = "pin_1"; pin1.Title = "**2 WHEELS CYCLES LIMITED - HULL"; pin1.Description = "8 SPRING STREET<br />HULL<br />HU2 8RB<br /><br /><b>Tel:</b> [phone]<br /><b>Fax:</b> [phone]<br /><b>Web:</b> <a href='http://www.2wheelscycles.co.uk' targer='_blank'>www.2wheelscycles.co.uk</a>"; Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox); dataLayer.push(pin1); } function zoomMap(indx, Lat, Long) { var ZoomLocation = new Microsoft.Maps.Location(Lat, Long); map.setView({ zoom: 13, center: ZoomLocation }); //#### These are the lines that dont work, selectedPin remains undefined //var selectedPin = dataLayer.entities.get(PinID); //Microsoft.Maps.Events.invoke(selectedPin, 'click', ''); var selectedPin = dataLayer.get(indx); Microsoft.Maps.Events.invoke(selectedPin, 'click'); }