none
clicking on pushins not working each have to try a couple of times on phone RRS feed

  • Question

  •  i am using this code for the clicked event and on my phone it doesnt appear to be very accurate finger is big pin is small is there a better way to do this                   

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script type='text/javascript'
                src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap'
                async defer></script>
        <script type='text/javascript'>
        var map, infobox;
    
        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key'
            });
    
            //Create an infobox at the center of the map but don't show it.
            infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
                visible: false
            });
    
            //Assign the infobox to a map instance.
            infobox.setMap(map);
    
            //Create random locations in the map bounds.
            var randomLocations = Microsoft.Maps.TestDataGenerator.getLocations(5, map.getBounds());
            
            for (var i = 0; i < randomLocations.length; i++) {
                var pin = new Microsoft.Maps.Pushpin(randomLocations[i]);
    
                //Store some metadata with the pushpin.
                pin.metadata = {
                    title: 'Pin ' + i,
                    description: 'Discription for pin' + i
                };
    
                //Add a click event handler to the pushpin.
                Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
    
                //Add pushpin to the map.
                map.entities.push(pin);
            }
        }
    
        function pushpinClicked(e) {
            //Make sure the infobox has metadata to display.
            if (e.target.metadata) {
                //Set the infobox options with the metadata of the pushpin.
                infobox.setOptions({
                    location: e.target.getLocation(),
                    title: e.target.metadata.title,
                    description: e.target.metadata.description,
                    visible: true
                });
            }
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div>
    </body>
    </html>
    Tuesday, November 28, 2017 2:45 AM

Answers

  • A couple of options;

    • Ensure your mobile browser is set to mobile and not desktop rendering. If you have a high resolution screen, it should be rendering a high resolution version of the map and the pushpin should be similar in size to what you see when loading on a computer. 
    • If the pushpin is still too small, then use a larger pushpin icon. There is a lot of different ways to do this. If you want a pushpin that looks just like the default pushpin, use this code:
    var pin = new Microsoft.Maps.Pushpin(randomLocations[I], {
        icon: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" xml:space="preserve"><circle cx="16" cy="16" r="14" style="stroke:{color};stroke-width:3;fill:transparent" /><circle cx="16" cy="16" r="11" fill="{color}"/><text x="16" y="20" style="font-size:14px;font-family:arial;fill:#ffffff;" text-anchor="middle">{text}</text></svg>',
        anchor: new Microsoft.Maps.Point(16, 16),
        roundClickableArea:true,
        color: '#b300af'
    });


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Tuesday, November 28, 2017 4:28 PM
    • Marked as answer by Ronc1 Wednesday, November 29, 2017 12:47 AM
    Tuesday, November 28, 2017 4:28 PM

All replies

  • A couple of options;

    • Ensure your mobile browser is set to mobile and not desktop rendering. If you have a high resolution screen, it should be rendering a high resolution version of the map and the pushpin should be similar in size to what you see when loading on a computer. 
    • If the pushpin is still too small, then use a larger pushpin icon. There is a lot of different ways to do this. If you want a pushpin that looks just like the default pushpin, use this code:
    var pin = new Microsoft.Maps.Pushpin(randomLocations[I], {
        icon: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" xml:space="preserve"><circle cx="16" cy="16" r="14" style="stroke:{color};stroke-width:3;fill:transparent" /><circle cx="16" cy="16" r="11" fill="{color}"/><text x="16" y="20" style="font-size:14px;font-family:arial;fill:#ffffff;" text-anchor="middle">{text}</text></svg>',
        anchor: new Microsoft.Maps.Point(16, 16),
        roundClickableArea:true,
        color: '#b300af'
    });


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Tuesday, November 28, 2017 4:28 PM
    • Marked as answer by Ronc1 Wednesday, November 29, 2017 12:47 AM
    Tuesday, November 28, 2017 4:28 PM
  • Thank you
    Wednesday, November 29, 2017 12:47 AM