I am looking for a geolocation API that I can plug into my PhpStorm project.
I need a dropdown that will firstly load all countries in the world, upon selection of a country another drop down will populate provinces/states based on country selected above. There after a dropdown that will populates cities based on the province or state above and lastly another dropdown that will populate surburbs of the city listed above.
here is your complete solution
use map api
https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js
use this css
http://vikku.info/programming/js/geodata-jsr-class.js
<div class='main'>
<h1></h1>
<form id="myform">
<div class="contents">
<b>*Select area</b>
<p><span>Continent:</span>
<select name="continent" id="continent" onchange="getplaces(this.value,'country');">
<option value=""></option>
</select>
</p>
<p><span>Country:</span>
<select name="country" id="country" onchange="getplaces(this.value,'province');">
<option value=""></option>
</select>
</p>
<p><span>State / Provice:</span>
<select name="province" id="province" onchange="getplaces(this.value,'region')">
<option value=""></option>
</select>
</p>
<p><span>County / Region:</span>
<select name="region" id="region" onchange="getplaces(this.value,'city')">
<option value=""></option>
</select>
</p>
<p><span>City:</span>
<select name="city" id="city" onchange="zoomto(this.value);codeAddress(placedata[this.value].name)">
<option value=""></option>
</select>
</p>
</div>
</form>
<div id="map_canvas"></div>
javascript
var whos = null;
var placedata = [];
var map;
var geocoder = new google.maps.Geocoder();
function getplaces(gid, src) {
if ( !! placedata[gid]) {
map.setCenter({
lat: parseFloat(placedata[gid].lat),
lng: parseFloat(placedata[gid].lng)
});
switch (src) {
case "continent":
map.setZoom(3);
break;
case "country":
map.setZoom(5);
break;
case "province":
map.setZoom(6);
break;
case "region":
map.setZoom(7);
break;
case "city":
map.setZoom(8);
break;
}
codeAddress(placedata[gid].name);
}
whos = src;
// var request = "http://ws.geonames.org/childrenJSON?geonameId="+gid+"&callback=getLocation&style=long";
var request = "http://www.geonames.org/childrenJSON?geonameId=" + gid + "&callback=listPlaces&style=long";
aObj = new JSONscriptRequest(request);
aObj.buildScriptTag();
aObj.addScriptTag();
}
function listPlaces(jData) {
counts = jData.geonames.length < jData.totalResultsCount ? jData.geonames.length : jData.totalResultsCount;
who = document.getElementById(whos);
who.options.length = 0;
if (counts) who.options[who.options.length] = new Option('Select', '');
else who.options[who.options.length] = new Option('No Data Available', 'NULL');
for (var i = 0; i < counts; i++) {
who.options[who.options.length] = new Option(jData.geonames[i].name, jData.geonames[i].geonameId);
placedata[jData.geonames[i].geonameId] = jData.geonames[i];
}
delete jData;
jData = null;
}
function zoomto(gid) {
if ( !! placedata[gid]) {
map.setCenter({
lat: parseFloat(placedata[gid].lat),
lng: parseFloat(placedata[gid].lng)
});
map.setZoom(14);
}
}
function codeAddress(address) {
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (!!results && !!results[0] && !!results[0].geometry && !!results[0].geometry.viewport) {
map.fitBounds(results[0].geometry.viewport);
} else if (!!results && !!results[0] && !!results[0].geometry && !!results.geometry.bounds) {
map.fitBounds(results[0].geometry.bounds);
} else {
map.setCenter(results[0].geometry.location);
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
window.onload = function () {
getplaces(6295630, 'continent');
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 3,
center: {
lat: 0,
lng: 0
}
});
};
here is a fiddle :
http://jsfiddle.net/geocodezip/xq4h95ux/3/
if you simply want ip address and region of a user then you do it like so
$.getJSON("http://ip-api.com/json/?callback=?", function (data) {
console.log(data);
$('#IP_Address').append("Your IP: " + data.query);
$('#Country').append("Your Country: " + data.country);
$('#City').append("Your City: " + data.city);
$('#region').append("Your Region : " + data.region);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="IP_Address"></div>
<div id="Country"></div>
<div id="City"></div>
<div id="region"></div>if you want to get these information in php then you could use
http://www.geoplugin.net/php.gp
if you have ip address then you can pass it like so
http://www.geoplugin.net/php.gp?ip=$youIpAddress
(for this case 49.200.208.108)
it will dump
a:18:{s:17:"geoplugin_request";s:14:"49.200.208.108";s:16:"geoplugin_status";i:200;s:16:"geoplugin_credit";s:145:"Some of the returned data includes GeoLite data created by MaxMind, available from <a href=\'http://www.maxmind.com\'>http://www.maxmind.com</a>.";s:14:"geoplugin_city";s:6:"Mumbai";s:16:"geoplugin_region";s:13:"Mahārāshtra";s:18:"geoplugin_areaCode";s:1:"0";s:17:"geoplugin_dmaCode";s:1:"0";s:21:"geoplugin_countryCode";s:2:"IN";s:21:"geoplugin_countryName";s:5:"India";s:23:"geoplugin_continentCode";s:2:"AS";s:18:"geoplugin_latitude";s:6:"18.975";s:19:"geoplugin_longitude";s:7:"72.8258";s:20:"geoplugin_regionCode";s:2:"16";s:20:"geoplugin_regionName";s:13:"Mahārāshtra";s:22:"geoplugin_currencyCode";s:3:"INR";s:24:"geoplugin_currencySymbol";s:7:"₨";s:29:"geoplugin_currencySymbol_UTF8";s:3:"₨";s:27:"geoplugin_currencyConverter";s:6:"66.695";}
unserialize the obtained data(or json_decode) and get all information
</div>