CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-fusion-tables
Nizar B.
Nizar B.

Reputation: 3118

Retrieve position of cities Google Map API

I want to retrieve the latitude and longitude of every city in the world with Google map. I use a Google Fusion table:

function requestCities()
{
    var script = document.createElement('script');
    var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
    url.push('sql=');
    //var query = 'SELECT CITY_NAME, geometry, POP_RANK, STATUS FROM ' + '1jmboG7oPaWTAUKubEl__YMVvkIkmhKTxxfD3wNo' + " WHERE 'CNTRY_NAME' = '"+ focusedCountry +"'";
    var query = 'SELECT CITY_NAME, geometry, POP_RANK, STATUS, FIPS_CNTRY, GMI_ADMIN FROM ' + '1ld4KaHF-E6UbFoN_VdCUp_s0_liEE7poZ7v4OmU' + " WHERE 'POP_RANK' \< 5";
    //var query = 'SELECT CITY_NAME, geometry, POP_RANK, STATUS FROM ' + '1jmboG7oPaWTAUKubEl__YMVvkIkmhKTxxfD3wNo';

    var encodedQuery = encodeURIComponent(query);
    url.push(encodedQuery);
    url.push('&callback=setCities');
    url.push('&key=AIzaSyACrx-nlt1KZ8cDNpsvW_FW8JPEKfbpF8g');
    script.src = url.join('');
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(script);
}

And inside my callback function I try to add a marker on each city:

function setCities(data)
{
    var rows = data['rows'];
    console.log(rows[0]);

    var nbInfobox = document.getElementById("infobox-wrapper").getElementsByTagName("div").length;

    for (var i in rows)
    {
        var name = rows[i][0];
        var pop_rank = rows[i][2];
        var status = rows[i][3];
        //var countryCode = rows[i][4];
        var cityCode = rows[i][5];
        var countryCode = cityCode.substring(0,2);
        var capital = eval(status[0] == "N");

        var myLatlng = new google.maps.LatLng(rows[i][1]['geometry']['coordinates'][1], rows[i][1]['geometry']['coordinates'][0]);

        var image = 'img/marker_'+ pop_rank+ '.png';
        if (capital)
        {
            var image = 'img/marker_capital.png';
            pop_rank = 0;
        }

        var marker = new google.maps.Marker(
            {
                position: myLatlng,
                title: name,
                zIndex: 7 - pop_rank,
                icon: image
            });


        //Create infobox for selected cities
        $("#infobox-wrapper").append("<div id=\"infobox" + nbInfobox + "\" class=\"infoboxcountry\" />");

        var info = new InfoBox({
            content: document.getElementById("infobox" + nbInfobox),
            position: marker.getPosition(),
            disableAutoPan: true,
            pixelOffset: new google.maps.Size(0, 0),
            zIndex: 0,
            closeBoxURL: ""
        });

        $("#infobox" + nbInfobox).html(marker.getTitle());

        var city = new City(i, marker, info, pop_rank, countryCode, cityCode);

        overlays.cities.push(city);

        google.maps.event.addListener(marker, 'click', function() {
            cityClick(this);
        });

        ++nbInfobox;
    }

}

The result from my query is an array with the all cities in the world like this:

 ["Lima", "<Point><coordinates>", "1", "National and provincial capital", "PE", "PER-LIM"]

But I always get this error:

 Uncaught TypeError: Cannot read property 'coordinates' of undefined

I have no clue about how to get the coordinate from my array var row. If someone knows, thanks for your help.

Upvotes: 2

Views: 315

Answers (2)

p e p
p e p

Reputation: 6674

There is a problem with your data source. Looking at your script, you are doing a select ... from 1ld4KaHF-E6UbFoN_VdCUp_s0_liEE7poZ7v4OmU. So I searched for that and found the fusion table, Copy of World Cities.csv. Looking at the info, I found it was copied from this table (1TJk4Fh8AU5IIhMDmvJOhcAOu9I5EB6xu9uKxI30). I made a JSFiddle and put a debugger in the callback function. When the script was selecting from the table that you have in your question, the geometry property is undefined because rows[i][1] is not JSON, but rather is always the malformed XML "<Point><coordinates>" no matter what the city is. However, if you switch your script to select from 1TJk4Fh8AU5IIhMDmvJOhcAOu9I5EB6xu9uKxI30 (the original fusion table, not the copy you are using) instead, the following code gives you the coordinates just fine: rows[i][1]['geometry']['coordinates'][1]. So, in requestCities, use the following query instead of what you have:

var query = 'SELECT CITY_NAME, geometry, POP_RANK, STATUS, FIPS_CNTRY, GMI_ADMIN FROM ' + '1TJk4Fh8AU5IIhMDmvJOhcAOu9I5EB6xu9uKxI30' + " WHERE 'POP_RANK' \< 5";

Upvotes: 2

Dr.Molle
Dr.Molle

Reputation: 117354

As it seems there is something wrong with the data in this table.

When I take a look at https://www.google.com/fusiontables/DataSource?docid=1ld4KaHF-E6UbFoN_VdCUp_s0_liEE7poZ7v4OmU&pli=1#map:id=3 there are no markers on the map, somehow the geometry has not been recognized correctly.

e.g. the particular row should look like this:

["Lima",{"geometry":{"type":"Point","coordinates":[-77.0450036007242,-12.0819959357647]}},"1","National and provincial capital","PE","PER-LIM"]

as you see the 2nd column differs from your response <Point><coordinates>

I can't tell you why this happens, maybe because of the NaN that is used in the KML of geometry for the altitude: 

<Point><coordinates>-77.0450036007242,-12.0819959357647,NaN</coordinates></Point>

However, for testing I made a copy of the table, and by magic the copy seems to work correctly:

https://www.google.com/fusiontables/data?docid=1re5M5ZjS7oUTux3ng538gQZMP3ralKTxPtfZJplB#map:id=3

So you may try the same...create a copy of the table(don't use my copy, I will delete the table some day)

Upvotes: 2

Related Questions