SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Guru hifigrafix's Avatar
    Join Date
    Oct 2005
    Location
    Nashville, TN
    Posts
    628
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bing Maps API - Trouble With Pushpin Info

    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.

    Code:
    <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. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hifigrafix View Post
    Code:
    function displayInfobox(e){
      pinInfobox.setOptions({ visible:true });
    }
    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 console.log(e) inside of the displayInfobox method and see what it spits out
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Guru hifigrafix's Avatar
    Join Date
    Oct 2005
    Location
    Nashville, TN
    Posts
    628
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    John

    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •