locked
[SOLVED] Having difficulty getting pushpins to appear. RRS feed

  • Question

  • Hi,

    I'm finally at the point where I want to display pushpins. I've got a PHP script that formats  JSON string to my liking and I'm trying to use that to create the pins using an ajax request. For some reason, the pins are not showing up though, when the page is loaded (or another event occurs which should load pins).

     

    Here's the JavaScript:

     

    		<script type="text/javascript">
    			function GetMap()
    			{
    				var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
    				{
    					credentials: "MYKEY",
    					center: new Microsoft.Maps.Location(49.16, -123.95),
    					mapTypeId: Microsoft.Maps.MapTypeId.road,
    					zoom: 13
    				});
    				
    				$.ajax({
    				type: 'POST',		
    				url: 'GetLocations.php',
    				data: {},
    				contentType: "application/json; charset=utf-8",
    				dataType: "json",
    				success: function (response) 
    					{
    						var pins = response.Locations
    						$.each(pins, function (index, pin) 
    						{
    								var pinLocation = new Microsoft.Maps.Location(pin.Latitude, pin.Longitude)
    								var NewPin = new Microsoft.Maps.Pushpin(pinLocation, { text: pin.Title });
    								map.entities.push(NewPin);
    							});
    					}
    				});					
    			}
    		</script>
    
    

    <body onload="GetMap();">

     

     

    The PHP for creating the JSON string:

     

     

    $json_string="";
    $entry_count=1;
    $json_array_name="Locations";
    $json_string .= "{\"$json_array_name\":[\r\n";
    while($row = sqlsrv_fetch_array($result))
    {
    $json_string .= "{\"__type\":\"VEMaps.PinData\",\"Title\":\"$entry_count\",\"Description\":\"Push Pin $entry_count.\",\"Latitude\":";
    $json_string .= "$row[15],\"Longitude\":$row[16]}";
    $entry_count++;
    }
    $json_string .= "]}";
    

     


    And some sample output:

     

     

    {"Locations":[
    {"__type":"VEMaps.PinData","Title":"1","Description":"Push Pin 1.","Latitude":49.2529500000000000,"Longitude":-124.1304200000000000}
    {"__type":"VEMaps.PinData","Title":"2","Description":"Push Pin 2.","Latitude":49.1660280000000000,"Longitude":-123.9507860000000000}
    ]}

     


    Any ideas? Thanks for reading.

    Kevin


    • Edited by kevin-berry Monday, June 13, 2011 5:58 AM
    • Moved by Ricky_Brundritt Friday, March 9, 2012 6:06 PM (From:Bing Maps: Map Control and Web services Development)
    Saturday, June 11, 2011 12:31 PM

Answers

  • Are you getting any errors (check the javascript error console)? Also, it looks like you're missing a semicolon at the end of the line:
    var pinLocation = new Microsoft.Maps.Location(pin.Latitude, pin.Longitude)

    twitter: @alastaira blog: http://alastaira.wordpress.com/
    • Marked as answer by kevin-berry Monday, June 13, 2011 8:57 PM
    Saturday, June 11, 2011 2:44 PM
  • I would actually try debugging the javascript line by line, firebug will do this for you (http://getfirebug.com/javascript) then you can inspect the objects that come back. I suspect "pins" ends up being an empty array or something like that for it not to be erroring, yet not showing pins
    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware | Windows Live Developer MVP
    • Marked as answer by kevin-berry Monday, June 13, 2011 8:57 PM
    Sunday, June 12, 2011 8:26 AM
  • Hi,

    So I eventually got it working after a lot of fiddling and posting here, deleting posts here, etc etc. I'll be posting code shortly once I get a few hiccups figured out. Thanks to everyone for all their help! I probably wouldn't be at the stage I'm at without your help. :)


    OK, so once I have my criteria (gleaned from a series of checkboxes and a jquery date-range picker), I use the following function to update my map with pushpins based on the criteria. Only pushpins that satisfy the criteria are loaded. I didn't include the logic for getting my custom icon, but hopefully anyone who comes across this post can figure that out themselves... basically I used the a whole lot of very inefficient if statements;

    if(pin.classification=="Type1")
    icon_type="images/icons/type1.png";      
    if(pin.classification=="Type2")
    icon_type="images/icons/type2.png";

    ....

     

    Anyway, my update function is located in this thread:http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/ed7e0811-d776-44f5-a68b-e2f5a03b84e2

    • Marked as answer by kevin-berry Monday, June 13, 2011 8:56 PM
    Monday, June 13, 2011 12:35 AM

All replies

  • Are you getting any errors (check the javascript error console)? Also, it looks like you're missing a semicolon at the end of the line:
    var pinLocation = new Microsoft.Maps.Location(pin.Latitude, pin.Longitude)

    twitter: @alastaira blog: http://alastaira.wordpress.com/
    • Marked as answer by kevin-berry Monday, June 13, 2011 8:57 PM
    Saturday, June 11, 2011 2:44 PM
  • Hi,

     

    I fixed that semicolon issue, but Firebug, as far as I can tell, is not issuing any errors at me. Maybe I'm doing it wrong? Here's the process:

     

    on page load, GetMap is called, which I assume also calls $.ajax... the script GetLocations.php runs and at the end of the script I have an echo command that echo's my json script. (If I do a bit of fiddling, I can get the php file to output the text to the screen). I assume that in order for the Bing ajax call to work, the PHP file just needs to echo the text, and the ajax call interprets the output?

     

    Kevin

    Saturday, June 11, 2011 9:32 PM
  • I would actually try debugging the javascript line by line, firebug will do this for you (http://getfirebug.com/javascript) then you can inspect the objects that come back. I suspect "pins" ends up being an empty array or something like that for it not to be erroring, yet not showing pins
    Brian @ Earthware - UK interactive mapping web developers http://www.earthware.co.uk/blog | http://www.twitter.com/earthware | Windows Live Developer MVP
    • Marked as answer by kevin-berry Monday, June 13, 2011 8:57 PM
    Sunday, June 12, 2011 8:26 AM
  • Hi,

    So I eventually got it working after a lot of fiddling and posting here, deleting posts here, etc etc. I'll be posting code shortly once I get a few hiccups figured out. Thanks to everyone for all their help! I probably wouldn't be at the stage I'm at without your help. :)


    OK, so once I have my criteria (gleaned from a series of checkboxes and a jquery date-range picker), I use the following function to update my map with pushpins based on the criteria. Only pushpins that satisfy the criteria are loaded. I didn't include the logic for getting my custom icon, but hopefully anyone who comes across this post can figure that out themselves... basically I used the a whole lot of very inefficient if statements;

    if(pin.classification=="Type1")
    icon_type="images/icons/type1.png";      
    if(pin.classification=="Type2")
    icon_type="images/icons/type2.png";

    ....

     

    Anyway, my update function is located in this thread:http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/ed7e0811-d776-44f5-a68b-e2f5a03b84e2

    • Marked as answer by kevin-berry Monday, June 13, 2011 8:56 PM
    Monday, June 13, 2011 12:35 AM