Bing Maps API - Trouble With Pushpin Info

JavaScript
1

Greetings,

I use Google Maps API a lot and rarely have problems with it. I’m in a particular situation whereas I need to use Bing Maps and I’m running into a wall.

All is working except for the pinInfo bubbles. They are all loading but all contain the same content. I’m using PHP to loop through some locations based on a query.

When the map loads and I click on any pushpin and it displays the same infobox no matter what pin I select.

Any help is greatly appreciated.

<script type="text/javascript">
	function init(){

	    // Initialize the map
	    var map = new Microsoft.Maps.Map(
	        document.getElementById("map"),
	        {	
				center: new Microsoft.Maps.Location(36.133428, -86.825628),
	            credentials: "--MY CREDS--",
	            mapTypeId: Microsoft.Maps.MapTypeId.road,
				zoom:10
	        }
	    );


	    // Creates a collection to store multiple pins
	    var pins = new Microsoft.Maps.EntityCollection();
	
		var position = new Microsoft.Maps.Location(36.133428, -86.825628);
var infoPos = new Microsoft.Maps.Location(36.133428, -86.825628);
var pin = new Microsoft.Maps.Pushpin(position);
var pinInfobox = new Microsoft.Maps.Infobox(infoPos, {title: 'Blakemore Children\\'s Center', visible: false});

Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);

pins.push(pin);
pins.push(pinInfobox);

var position = new Microsoft.Maps.Location(36.112321, -86.808275);
var infoPos = new Microsoft.Maps.Location(36.112321, -86.808275);
var pin = new Microsoft.Maps.Pushpin(position);
var pinInfobox = new Microsoft.Maps.Infobox(infoPos, {title: 'First Steps, Inc.', visible: false});

Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);

pins.push(pin);
pins.push(pinInfobox);

var position = new Microsoft.Maps.Location(36.160374, -86.799663);
var infoPos = new Microsoft.Maps.Location(36.160374, -86.799663);
var pin = new Microsoft.Maps.Pushpin(position);
var pinInfobox = new Microsoft.Maps.Infobox(infoPos, {title: 'Grace M. Eaton Child Care & Early Learning Center', visible: false});

Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);

pins.push(pin);
pins.push(pinInfobox);

var position = new Microsoft.Maps.Location(36.16022, -86.794828);
var infoPos = new Microsoft.Maps.Location(36.16022, -86.794828);
var pin = new Microsoft.Maps.Pushpin(position);
var pinInfobox = new Microsoft.Maps.Infobox(infoPos, {title: 'Bethlehem Centers of Nashville', visible: false});

Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);

pins.push(pin);
pins.push(pinInfobox);

var position = new Microsoft.Maps.Location(36.152879, -86.767793);
var infoPos = new Microsoft.Maps.Location(36.152879, -86.767793);
var pin = new Microsoft.Maps.Pushpin(position);
var pinInfobox = new Microsoft.Maps.Infobox(infoPos, {title: 'Wayne Reed Christian Childcare Center', visible: false});

Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);

pins.push(pin);
pins.push(pinInfobox);

var position = new Microsoft.Maps.Location(36.128548, -86.84995);
var infoPos = new Microsoft.Maps.Location(36.128548, -86.84995);
var pin = new Microsoft.Maps.Pushpin(position);
var pinInfobox = new Microsoft.Maps.Infobox(infoPos, {title: 'St. Mary Villa Child Development Center', visible: false});

Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);

pins.push(pin);
pins.push(pinInfobox);

var position = new Microsoft.Maps.Location(36.177, -86.809951);
var infoPos = new Microsoft.Maps.Location(36.177, -86.809951);
var pin = new Microsoft.Maps.Pushpin(position);
var pinInfobox = new Microsoft.Maps.Infobox(infoPos, {title: 'Eighteenth Avenue Family Enrichment Center', visible: false});

Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);

pins.push(pin);
pins.push(pinInfobox);

var position = new Microsoft.Maps.Location(36.178051, -86.77109);
var infoPos = new Microsoft.Maps.Location(36.178051, -86.77109);
var pin = new Microsoft.Maps.Pushpin(position);
var pinInfobox = new Microsoft.Maps.Infobox(infoPos, {title: 'McNeilly Center for Children', visible: false});

Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);

pins.push(pin);
pins.push(pinInfobox);

var position = new Microsoft.Maps.Location(36.16479, -86.856395);
var infoPos = new Microsoft.Maps.Location(36.16479, -86.856395);
var pin = new Microsoft.Maps.Pushpin(position);
var pinInfobox = new Microsoft.Maps.Infobox(infoPos, {title: 'St. Luke\\'s Community House', visible: false});

Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);

pins.push(pin);
pins.push(pinInfobox);

	    
		function displayInfobox(e)
		         {
		            pinInfobox.setOptions({ visible:true });
		         }

		         function hideInfobox(e)
		         {
		            pinInfobox.setOptions({ visible: false });
		         }
		

		
	    // Adds all pins at once
	    map.entities.push(pins);
		map.entities.push(pinsInfo);
	}
	</script>
	<div id='myMap' style='position:relative; width:323px; height:300px;'></div>
2

Can you perhaps get the index of the current pin from the event variable that is being passed in. It seems that if you just call pinInfobox.setOptions() you’ll only ever address the last item. Whereas if you used something like pins[e.index].pinInfobox.setOptions() you would address the infobox for the pin that was clicked.

While I am not sure what the property of the event variable it is that you need to use, try outputting the contents of it with [I]console.log(e)[/I] inside of the displayInfobox method and see what it spits out :slight_smile:

3

John,

thanks for your help. i think you are right but I’m not sure how to access the “ID” of the pin being clicked on to pass it to the function.

Any suggestions?

Thanks