...

View Full Version : I need help with Bing Maps API code



macmonkey
09-21-2011, 03:24 PM
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>


I imagine that the problem might have something to do with the fact that I'm not using any kind of index when calling displayInfobox(e).

How do I access the "ID" of the pin being clicked on?


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum