Multiple Bing Map Pushpins from SQL not showing in Firefox & Chrome but do in IE

Question

I'm displaying a Bing Map (v7) in my Webmatrix2 website with a series of pushpins & infoboxes drawn from a SQL Express database using a JSON enquiry.

While the maps appears in all 3 browsers I'm testing (IE, FF & Chrome) the pushpins are sometimes not showing in FF & Chrome, particularly if I refresh with Cntrl+F5

This is my first JSON and Bing Maps app so expect there's a few mistakes.

Any suggestions on how to improve the code and get display consistency?

 @{
    Layout = "~/_MapLayout.cshtml";
}


 <script type="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>           
 <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
 <link rel="StyleSheet" href="infoboxStyles.css" type="text/css"> 
<script type="text/javascript">

    var map = null;
    var pinLayer, pinInfobox;
    var mouseover;
    var pushpinFrameHTML = '<div class="infobox"><a class="infobox_close" href="javascript:closeInfobox()"><img src="/Images/close2.jpg" /></a><div class="infobox_content">{content}</div></div><div class="infobox_pointer"><img src="images/pointer_shadow.png"></div>';
    var pinLayer = new Microsoft.Maps.EntityCollection();
    var infoboxLayer = new Microsoft.Maps.EntityCollection();

    function getMap() {
        map = new Microsoft.Maps.Map(document.getElementById('map'), {
            credentials: "my-key",
            zoom: 4,
            center: new Microsoft.Maps.Location(-25, 135),
            mapTypeId: Microsoft.Maps.MapTypeId.road
        });
        pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
        AddData();

    }



    $(function AddData() {
        $.getJSON('/ListSchools', function (data) {
            var schools = data;
            $.each(schools, function (index, school) {
                for (var i = 0; i < schools.length; i++) {
                    var pinLocation = new Microsoft.Maps.Location(school.SchoolLat, school.SchoolLon);
                    var NewPin = new Microsoft.Maps.Pushpin(pinLocation);

                    NewPin.title = school.SchoolName;
                    NewPin.description = "<a href=SchoolDetails?searchschool=" + school.SchoolID + ">-- Learn More --</a>";
                    pinLayer.push(NewPin); //add pushpin to pinLayer
                    Microsoft.Maps.Events.addHandler(NewPin, 'mouseover', displayInfobox);
                }
            });
            infoboxLayer.push(pinInfobox);
            map.entities.push(pinLayer);
            map.entities.push(infoboxLayer);
        });
    })

    function displayInfobox(e) {
        if (e.targetType == "pushpin") {
            var pin = e.target;
            var html = "<span class='infobox_title'>" + pin.title + "</span><br/>" + pin.description;

            pinInfobox.setOptions({
                visible: true,
                offset: new Microsoft.Maps.Point(-33, 20),
                htmlContent: pushpinFrameHTML.replace('{content}', html)
            });

            //set location of infobox
            pinInfobox.setLocation(pin.getLocation());
        }
    }

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

    function getCurrentLocation() {
        var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
        geoLocationProvider.getCurrentPosition();
    }



  </script>

<body onload="getMap();">
<div id="map"  style="position:relative; width:800px; height:600px;"></div>
     <div>
         <input type="button" value="Find Nearest Schools" onclick="getCurrentLocation();" />
      </div>
</body>

The JSON file is simply

@{
    var db = Database.Open("StarterSite");    
    var sql = @"SELECT * FROM Schools WHERE SchoolLon !=  ' ' AND  SchoolLon != 'null' ";
    var data = db.Query(sql);
    Json.Write(data, Response.Output);
}

rbrundritt rbrundritt · Accepted Answer · 2014-09-18T11:57:38

Add your pinLayer, infobox, and infoboxLayer before calling the AddData function and see if that makes a difference. Also verify that school.SchoolLat and school.SchoolLon are numbers and not a string version of a number. If they are a string, then use parseFloat to turn them into a number. Other than that everything looks fine.

Multiple Bing Map Pushpins from SQL not showing in Firefox & Chrome but do in IE

1 Answers