CODEWITHSUNDEEP
bing-mapspushpin
Bobby
Bobby

Reputation: 1

Unable to add Pushpins with Options with Bing Map V7

I was able to add seven numbered pushpins using the Bing Maps V7 Interactive SDK at http://www.bingmapsportal.com/ISDK/AjaxV7#Pushpins4.

The code was copied to our website but instead of showing the seven numbered pushpins the map was zoomed out completely with no pushpins. How do I get the map to display correctly?

Here is the code that is currently in place:

  <script type="text/javascript">
  var map = null;

  function getMap()
  {
    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'MyCredentialString'});
  }

  function addPushpinWithOptions()
  {
    map.entities.clear(); 
    var offset = new Microsoft.Maps.Point(0, 5);
    var pushpinOptions = {icon: virtualPath + '/Content/poi_custom.png', text : '1', visible: true, textOffset: offset}; 
    var pushpin= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.597619, -104.803023), pushpinOptions);
    var pushpinOptions2 = {icon: virtualPath + '/Content/poi_custom.png', text : '2', visible: true, textOffset: offset}; 
    var pushpin2= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(38.835701,-104.823429), pushpinOptions2);
    var pushpinOptions3 = {icon: virtualPath + '/Content/poi_custom.png', text : '3', visible: true, textOffset: offset}; 
    var pushpin3= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.686367, -104.942632), pushpinOptions3);
    var pushpinOptions4 = {icon: virtualPath + '/Content/poi_custom.png', text : '4', visible: true, textOffset: offset}; 
    var pushpin4= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(40.525520,-105.026337), pushpinOptions4);
    var pushpinOptions5 = {icon: virtualPath + '/Content/poi_custom.png', text : '5', visible: true, textOffset: offset}; 
    var pushpin5= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.710943,-105.085228), pushpinOptions5);
    var pushpinOptions6 = {icon: virtualPath + '/Content/poi_custom.png', text : '6', visible: true, textOffset: offset}; 
    var pushpin6= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.535295,-104.882056), pushpinOptions6);
    var pushpinOptions7 = {icon: virtualPath + '/Content/poi_custom.png', text : '7', visible: true, textOffset: offset}; 
    var pushpin7= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(39.964544,-105.163545), pushpinOptions7);
    map.setView( {center: new Microsoft.Maps.Location(39.786367, -105.142632), zoom: 8}); 
    map.entities.push(pushpin);
    map.entities.push(pushpin2);
    map.entities.push(pushpin3);
    map.entities.push(pushpin4);
    map.entities.push(pushpin5);
    map.entities.push(pushpin6);
    map.entities.push(pushpin7);
  }
  </script>

Upvotes: 0

Views: 410

Answers (1)

rbrundritt
rbrundritt

Reputation: 17954

Do you define the virtualPath parameter and have an email there? The code sample creates a pushpin by using an image that is at URL "virtualPath + '/Content/poi_custom.png'". If you have your own image then replace this with your own URL.

For example: 

var pushpinOptions = {
   icon: 'images/myImage.png', 
   text : '1', 
   textOffset: offset
};

The visible property is true by default, so no need to add that. Also, the textoffset property is used to position the custom text over the image as needed. This should be a Microsoft.Maps.Point object.

For example:

var offset = new Microsoft.Maps.Point(10,20);

You may also find this blog post useful when it comes to positioning custom pushpin icons: https://rbrundritt.wordpress.com/2014/10/02/correcting-anchoring-pushpins-to-the-map/

Upvotes: 1

Related Questions