google map not working, locations Array?

Question

I have a problem I can't resolve. If I hard code the array (commented out in attached code) and ignore the ajax call the map function works. However, build the array from the ajax call and nothing happens. I think it must be the array itself but I cannot see what's wrong.

This is the server side code where I'm just adding a test table

[System.Web.Services.WebMethod]
public static string GetLocations()
{
    DataTable dtSource = new DataTable();
    dtSource.Columns.Add("address", typeof(string));
    dtSource.Rows.Add("CM0 8JH");
    dtSource.Rows.Add("SE14 5RU");

    DataTable dtLatLng = new DataTable();
    dtLatLng.Columns.Add("lat", typeof(string));
    dtLatLng.Columns.Add("lng", typeof(string));

    foreach (DataRow row in dtSource.Rows)
    {
        DataTable dtWork = GetLatLng(row[0].ToString());

        foreach (DataRow rowwork in dtWork.Rows)
        {
            dtLatLng.Rows.Add(rowwork[2], rowwork[3]);
            dtWork = null;
        }
    }
    return ConvertDataTabletoString(dtLatLng);
}

public static string ConvertDataTabletoString(System.Data.DataTable dt)
{
    System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
    Dictionary<string, object> row;
    foreach (System.Data.DataRow dr in dt.Rows)
    {
        row = new Dictionary<string, object>();
        foreach (System.Data.DataColumn col in dt.Columns)
        {
            row.Add(col.ColumnName, dr[col]);
        }
        rows.Add(row);
    }
    return serializer.Serialize(rows);
}

public static DataTable GetLatLng(string address)
{
    string url = "https://maps.googleapis.com/maps/api/geocode/xml?address=" + address + "&key=AIzaSyBWQFCssXf-cic6HMYiRncde_4r9Paq9JY";
    System.Net.WebRequest request = System.Net.WebRequest.Create(url);

    using (System.Net.WebResponse response = (System.Net.HttpWebResponse)request.GetResponse())
    {
        using (System.IO.StreamReader reader = new System.IO.StreamReader(response.GetResponseStream(), System.Text.Encoding.UTF8))
        {
            DataSet dsResult = new DataSet();
            dsResult.ReadXml(reader);
            DataTable dtCoordinates = new DataTable();
            dtCoordinates.Columns.AddRange(new DataColumn[4] { new DataColumn("Id", typeof(int)),
                new DataColumn("Address", typeof(string)),
                new DataColumn("Latitude",typeof(string)),
                new DataColumn("Longitude",typeof(string)) });
            foreach (DataRow row in dsResult.Tables["result"].Rows)
            {
                string geometry_id = dsResult.Tables["geometry"].Select("result_id = " + row["result_id"].ToString())[0]["geometry_id"].ToString();
                DataRow location = dsResult.Tables["location"].Select("geometry_id = " + geometry_id)[0];
                dtCoordinates.Rows.Add(row["result_id"], row["formatted_address"], location["lat"], location["lng"]);
            }
            return dtCoordinates;
        }
    }
}

here is the client side code where I alternately comment out the hard coded array and call the ajax call

<style>
    #map {
        height: 500px;
    }

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>


<script type="text/javascript">
    function initMap() {
        var locations = [];

        //var locations = [
        //    { "lat": 51.6286544, "lng": 0.8193251 },
        //    { "lat": 51.4826440, "lng": -0.0473788 }
        //]

        $.ajax({
            type: "POST",
            url: "SecretSquirrel.aspx/GetLocations",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                data = $.parseJSON(data.d);
                $.each(data, function (i, item) {
                    locations.push({
                        "lat": item.lat,
                        "lng": item.lng
                    });
                    //alert(locations[i].lng);
                });
            }
        });

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: {
                lat: 51.5074,
                lng: 0.1278
            }
        });

        // Create an array of alphabetical characters used to label the markers. 
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function (location, i) {
            return new google.maps.Marker({
                position: location,
                label: labels[i % labels.length]
            });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers, {
            imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
        });
    }
</script>

<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script type="text/javascript" async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWQFCssXf-cic6HMYiRncde_4r9Paq9JY&callback=initMap">
</script>

I have searched forums so am not just putting this up without exhausting myself!!! Can anyone point out the probably stupid error????

Answer 1

var markers = locations.map this will run before you have any locations due to AJAX being asynchronous.

Also your lat and lng are being passed as strings and not numbers.

JSFiddle For Example

To fix it you could do something like this

function initMap() {
    var locations = [];
    $.ajax({
        type: "POST",
        url: "SecretSquirrel.aspx/GetLocations",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            data = $.parseJSON(data.d);
            $.each(data, function (i, item) {
                locations.push({
                    "lat": Number(item.lat),
                    "lng": Number(item.lng)
                });
            });
            createMarkers(map, locations);
        }
    });

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: {
            lat: 51.5074,
            lng: 0.1278
        }
    });
}

function createMarkers(map, locations) {
    // Create an array of alphabetical characters used to label the markers. 
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    // Add some markers to the map.
    // Note: The code uses the JavaScript Array.prototype.map() method to
    // create an array of markers based on a given "locations" array.
    // The map() method here has nothing to do with the Google Maps API.
    var markers = locations.map(function (location, i) {
        return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
        });
    });

    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
}

I'll leave removing the markers down to you and name things how you wish.