Где я могу получить API геолокации

вот ваше полное решение

использовать карту API

https://maps.googleapis.com/maps/api/js?sensor=false&библиотеки = геометрия, место&внутр = .js

использовать эту 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>

javascriptvar 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
}
});
};

вот скрипка :

http://jsfiddle.net/geocodezip/xq4h95ux/3/

если вы просто хотите IP-адрес и регион пользователя, то вы делаете это так

$.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>