How to display city name using coordinates with google map API using Jquery and Json API?

Question

I want to display user info containing (name, username, city name, etc), if u click the username I want to display user info eg name, username, last name, CITY(using coordinates) using google API, when u click the username the window should pop up and display that info with static map together,

is it possible to achieve that? if so can you provide some tutorial or script to do that?

Note: I am a newbie I dont know even where to start with this problem,

Here is what I have done so far :

var data = [{ "id": 987, "username": "jstephensre", "active": false, "password": "8de90ec658d72b54ef0b270611ef9eb6241fa59b77b5c98b9bffb4fd631a4b10", "first_name": "Johnny", "last_name": "Stephens", "last_login": "6/7/2016", "email": "jstephensre@opensource.org", "avatar": "https://robohash.org/nihilpariaturrepudiandae.jpg?size=50x50&set=set1", "gender": [], "favorites": { "book-isbn": "117187617-3", "color": "#6adf06", "drugs": ["Zicam Cold Remedy Ultra Rapidmelts", "BUTALBITAL, ACETAMINOPHEN AND CAFFEINE"] }, "coordinates": { "lat": "8.65972", "lng": "-75.12809" } },
{ "id": 988, "username": "dtorresrf", "active": true, "password": "443f2261332613a2da952d05a25ceec2d8eb9ed177ce830b3b4d6fbbe536e2c0", "first_name": null, "last_name": "Torres", "last_login": null, "email": "atorresrf@facebook.com", "avatar": "https://robohash.org/idnihilut.bmp?size=50x50&set=set1", "gender": ["Female", "Female"], "favorites": { "book-isbn": null, "color": "#a04fce", "drugs": ["Cockroach, American", "Lisinopril and Hydrochlorothiazide"] }, "coordinates": { "lat": "9.86667", "lng": "6.71667" } },
{ "id": 989, "username": "jsmithrg", "active": false, "password": "4e9750746ad03f82717ebd702c03c92749de1cbc820798ab409fb5e6760101ad", "first_name": null, "last_name": "Smith", "last_login": null, "email": "tsmithrg@creativecommons.org", "avatar": null, "gender": ["Male"], "favorites": { "book-isbn": null, "color": "#3bff1e", "drugs": ["Yellow Pine", "Meprobamate", "GenRx Daily Defense Antifungal"] }, "coordinates": { "lat": "-16.00528", "lng": "-41.29722" } },
{ "id": 990, "username": "sroserh", "active": false, "password": "ab83a77062c8ee868f3b966d50a8ee39f63e3cec81349b83b81adcd3c6fa5da3", "first_name": "Sarah", "last_name": null, "last_login": "12/19/2015", "email": "sromerorh@about.me", "avatar": null, "gender": [], "favorites": { "book-isbn": "117541910-9", "color": "#ac8603", "drugs": ["MORUS ALBA POLLEN", "enema", "Altipres-B"] }, "coordinates": { "lat": "32.26616", "lng": "35.00893" } },
{ "id": 991, "username": "sholmesri", "active": false, "password": "11802fc53531079cdf8033e6772ffc5ac47c8ea8a453b66e8ac8df9ae29d9543", "first_name": "Susan", "last_name": "Holmes", "last_login": "1/28/2016", "email": "sholmesri@mozilla.com", "avatar": "https://robohash.org/doloreshicqui.png?size=50x50&set=set1", "gender": ["Male", "Male"], "favorites": { "book-isbn": "658583882-3", "color": "#04da21", "drugs": ["Tempra", "Estradiol Transdermal System"] }, "coordinates": { "lat": "-39.23686", "lng": "-70.9197" } },
{ "id": 992, "username": "rhayesrj", "active": true, "password": "beae358b1eb873bac4fa640410520157f26738ee4d2de1144f30101c6af8e259", "first_name": "Rachel", "last_name": "Hayes", "last_login": "12/7/2015", "email": null, "avatar": "https://robohash.org/teneturautest.jpg?size=50x50&set=set1", "gender": ["Male"], "favorites": { "book-isbn": "291847889-X", "color": null, "drugs": ["BUDESONIDE", "Doxorubicin Hydrochloride", "Hydrocodone Bitartrate and Acetaminophen"] }, "coordinates": { "lat": "-20.58333", "lng": "48.53333" } },
{ "id": 993, "username": "jcampbellrk", "active": false, "password": "9602ccbe7599aefea9a25eb05ab2ede44302f57fd153bad07aa0f5a2f46be537", "first_name": "Joan", "last_name": "Campbell", "last_login": "8/29/2016", "email": "jcampbellrk@bravesites.com", "avatar": "https://robohash.org/numquamutquae.png?size=50x50&set=set1", "gender": ["Male"], "favorites": { "book-isbn": "588841638-X", "color": "#7c5963", "drugs": [] }, "coordinates": { "lat": "57.6531", "lng": "14.6968" } },
{ "id": 994, "username": "ejamesrl", "active": false, "password": "55b1d2418621cda82225bf569f5f30c5b5fcfe5ae7aef6b1e3418a97335b47ab", "first_name": "Elizabeth", "last_name": "James", "last_login": "1/14/2016", "email": "ejamesrl@geocities.jp", "avatar": null, "gender": ["Female"], "favorites": { "book-isbn": "026417147-0", "color": "#ba1d5c", "drugs": ["Losartan Potassium and Hydrochlorothiazide", "Ramipril"] }, "coordinates": { "lat": "54.64043", "lng": "32.87811" } },
{ "id": 995, "username": "krogersrm", "active": true, "password": "c5a8921245a345fb133193f8ceb14021469b4f42a7d945e835b9497081fb7130", "first_name": "Kathleen", "last_name": null, "last_login": "6/13/2016", "email": "khansenrm@nationalgeographic.com", "avatar": "https://robohash.org/mollitiasuscipitmagnam.jpg?size=50x50&set=set1", "gender": ["Male"], "favorites": { "book-isbn": "636138809-3", "color": "#1c858e", "drugs": ["Tramadol Hydrochloride", "iBlanc Restora-Bright"] }, "coordinates": { "lat": "12.71402", "lng": "121.51242" } },
{ "id": 996, "username": "sperkinsrn", "active": false, "password": "c0f48289a4145ffd34374f7236ea4e650df57cff11f4f77b865a44dde410cfb8", "first_name": "Sarah", "last_name": "Perkins", "last_login": "8/31/2016", "email": null, "avatar": "https://robohash.org/consequaturculpavelit.png?size=50x50&set=set1", "gender": ["Male", "Male"], "favorites": { "book-isbn": "561211079-0", "color": null, "drugs": ["Caduet"] }, "coordinates": { "lat": "43.30472", "lng": "124.32778" } },
{ "id": 997, "username": "jlanero", "active": false, "password": "0430117ff30143b0f3727527f62346351582a396cc60a5bf599e674cc34c07c5", "first_name": "Jack", "last_name": "Lane", "last_login": "3/20/2016", "email": null, "avatar": null, "gender": [], "favorites": { "book-isbn": "819102101-3", "color": null, "drugs": ["RIFAMPIN"] }, "coordinates": { "lat": "51.8796", "lng": "4.5059" } },
{ "id": 998, "username": "wroserp", "active": true, "password": "626e6d1a1a92ff6e741ae21e3bbbae265000ca0f87306590c2344d4130dd57a9", "first_name": "Willie", "last_name": "Rose", "last_login": "10/16/2016", "email": null, "avatar": null, "gender": ["Male"], "favorites": { "book-isbn": "108540866-3", "color": null, "drugs": ["OXYGEN", "Garnier Fructis Antidandruff"] }, "coordinates": { "lat": "57.58167", "lng": "83.76917" } },
{ "id": 999, "username": "sphillipsrq", "active": false, "password": "de0a87749bb04b2630ac6dbeb7259947383189afb6c2b458d80a15f6881b0439", "first_name": "Stephanie", "last_name": "Phillips", "last_login": "11/24/2016", "email": "sphillipsrq@wikia.com", "avatar": "https://robohash.org/laborerepellendustemporibus.jpg?size=50x50&set=set1", "gender": [], "favorites": { "book-isbn": "721916787-3", "color": "#9eee74", "drugs": [] }, "coordinates": { "lat": "51.0016", "lng": "21.71474" } },
{ "id": 1000, "username": "phicksrr", "active": false, "password": "2a27d007956e55da298aa3fb427a5a8ed7a8d661f4d4a2e340a98026996521eb", "first_name": "Phyllis", "last_name": "Hicks", "last_login": "2/14/2016", "email": null, "avatar": "https://robohash.org/sedsednon.bmp?size=50x50&set=set1", "gender": ["Female", "Female"], "favorites": { "book-isbn": "268196481-4", "color": null, "drugs": ["Ibuprofen"] }, "coordinates": { "lat": "-6.22625", "lng": "106.0253" } }];



        var output = '';


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

            //check the user if is active then display the active users
              if(val['active'] == true)
              {
            output += ''
';





        }


                });

How to display city name using coordinates with google map API using Jquery and Json API?

Answers (1)

Related Questions