Answered by:
clicking on pushins not working each have to try a couple of times on phone

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' });
- 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' });
- 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 youWednesday, November 29, 2017 12:47 AM