none
Invoke push pin click event on page load. RRS feed

  • Question


  • I am showing few pins on bing map with the click events, so on click info box is shown.

    Is there anyway to show the infobox of pin1 on page load? I like info box of certain pin to be displayed the

    first time map is loaded.

    Here is the code;

    var map = null, infobox, dataLayer, BingMapKey; function GetMap() { BingMapKey = 'MY KEY'; Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme', { callback: themesModuleLoaded }); }

    function themesModuleLoaded() { map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: BingMapKey, zoom: 7, center: new Microsoft.Maps.Location(546, 787), theme: new Microsoft.Maps.Themes.BingTheme() }); dataLayer = new Microsoft.Maps.EntityCollection(); map.entities.push(dataLayer); var infoboxLayer = new Microsoft.Maps.EntityCollection(); map.entities.push(infoboxLayer); infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point(0, 20) }); infoboxLayer.push(infobox); AddData(); } function AddData() { var offset = new Microsoft.Maps.Point(-3, 2); var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(44, 66)); pin1.Title = 'Vendor'; pin1.Description = 'description'; Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox); dataLayer.push(pin1); var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(11, 55), { icon: '~/images/icons/pushpins/pins/pur.png', width: 30, height: 40, text: '1', textOffset: offset }); pin2.Title = 'title'; pin2.Description = 'description'; Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox); dataLayer.push(pin2); } function displayInfobox(e) { if (e.targetType == 'pushpin') { infobox.setLocation(e.target.getLocation()); infobox.setOptions({ visible: true, title: e.target.Title, description: e.target.Description, width: 170, height: 100, }); } }







    • Edited by MUAR Monday, January 26, 2015 5:47 PM
    • Edited by Ricky_Brundritt Monday, January 26, 2015 7:07 PM Fixing formatting
    Monday, January 26, 2015 5:30 PM

Answers

  • There are a lot of different ways to go about this. One simple way to do this is to show the infobox right after you add the pushpin to the map by updating the AddData function like so:

    function AddData() {
        var offset = new Microsoft.Maps.Point(-3, 2);
        var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(44, 66));
        pin1.Title = 'Vendor';
        pin1.Description = 'description';
        Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
        dataLayer.push(pin1);
    	
    	displayInfobox({
    		target: pin1,
    		targetType : 'pushpin'
    	});
    	
    	
        var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(11, 55), {
            icon: '~/images/icons/pushpins/pins/pur.png',
            width: 30,
            height: 40,
            text: '1',
            textOffset: offset
        });
        pin2.Title = 'title';
        pin2.Description = 'description';
        Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);
        dataLayer.push(pin2);
    }


    http://rbrundritt.wordpress.com

    • Proposed as answer by Ricky_Brundritt Monday, January 26, 2015 7:06 PM
    • Marked as answer by MUAR Wednesday, January 28, 2015 2:26 PM
    Monday, January 26, 2015 7:06 PM