Creating Javascript array from ajax results from database

Question

I have a map, I am trying to pull in marker points from my data base, and create an array and then use that array to plot each latitude and longitude point on the map. Now I have tried a few things here but, but whenever I test it, I just get one point on the map and its like in asia, when in reality the longitude and latitude points to pennsylvania. I think it just packing all of the information into the array and trying to plot, but I am not sure. Really stuck here any help would be appreciated.

 <script type="text/javascript">
    $(function () {
        var arraddress = new Array();
        $.ajax({
            url: 'http://example.com/22/www/ba.php',
            data: '',
            dataType: 'json',
            success: function (data) {
                $.each(data, function (key, val) {

                    var lng = val['lng'];
                    var lat = val['lat'];
                    var id = val['id'];
                    var state = val['state'];

                    arraddress[key] = lat + ":" + lng + ":" + state + ":" + id;

                    //Set up the map
                    var APIKEY = "ed24c9065bb55c1090d3d76e7ab8577e";
                    var cloudmade = new CM.Tiles.CloudMade.Web({
                        key: APIKEY
                    });
                    var map = new CM.Map('mapdiv', cloudmade);
                    map.setCenter(new CM.LatLng(39.9, -98.5), 4);

                    //Add the markers from the array
                    var arLen = arraddress.length;
                    for (var i = 0, len = arLen; i < len; ++i) {
                        var onMarker = arraddress[i];
                        var dat = arraddress[i].split(":");
                        var mlat = dat[0];
                        var mlon = dat[1];
                        var mName = dat[2];

                        var thisMarker = new CM.Marker(new CM.LatLng(mlon, mlat), {
                            title: state
                        })
                        map.addOverlay(thisMarker);
                    }
                })

            }
        });
    });

    } 
</script>

Community · Accepted Answer · 2020-06-20 09:12:55Z

From the Cloud Made documentation

Constructor
CM.LatLng( latitude, longtitude, unbounded?)

Description

Creates an CM.LatLng object (notice that latitude comes first). By default, longtitude is wrapped to lie between -180 and 180, and latitude is clamped to lie between ~-85 and 85. If unbounded set to true, it leaves lat./long. as i

Latitude comes first in the constructor but you have coded:

new CM.LatLng(mlon, mlat)

Which is probably the wrong way round.

Also you are doing lots of setup code on the each call, which is going to fire for every element in your array. It makes sense to do your "Set up the map" code after

success: function (data) {

but before

 $.each(data, function (key, val) {

EDIT

Looking at your code again, if I am reading it right you could strip it your success function to

          success: function (data) {
        
               var APIKEY = "ANONYMISED_KEY";
               var cloudmade = new CM.Tiles.CloudMade.Web({
                      key: APIKEY
               });
               var map = new CM.Map('mapdiv', cloudmade);
               map.setCenter(new CM.LatLng(39.9, -98.5), 4);
               
                $.each(data, function (key, val) {

                    map.addOverlay( 
                            new CM.Marker(new CM.LatLng(val['lng'], val['lat']), {
                            title: val['state']
                        }));

                })

            }

And you may want to anonymise your API key when posting code.

Zeus · Accepted Answer · 2012-03-28 18:10:03Z

0

I think you swapped the lat and lon params in:

var thisMarker = new CM.Marker(new CM.LatLng(mlon, mlat)

https://developers.google.com/maps/documentation/javascript/reference?hl=de#LatLng

answered Mar 28, 2012 at 18:10

Zeus

8745 silver badges18 bronze badges

Collectives™ on Stack Overflow

Creating Javascript array from ajax results from database

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related