在本文中，将探讨如何使用Google Maps API和IPInfo API来获取用户的地理位置信息，并在网页上显示地图。这是一个基础的应用程序，用于展示如何结合使用这些API来创建自己的内容。
代码的起点是在W3 Schools上看到了一个教程。IPInfo是在之前的项目中发现的一个网站。想要使用IPInfo提供的地理位置坐标来制作一个至少显示ISP路由互联网连接的地图！
IPINFO.IO是一个API，用于获取IP地址的位置信息，或者至少是ISP提供的API。访问IPinfo.io网站，它会提供IP地址以及一些关于位置的额外信息。
使用Google Maps所需的信息是纬度和经度。API提供了包含上述信息的JSON。这个示例有点不足，因为它缺少了城市和区域的数据，这是因为ISP定位IP地址的位置。API通过JQuery、Ruby、NodeJS、Python和curl提供一些信息。
在应用程序中，获取JSON并将其放入一个名为place的变量中。Object Grid将包含API提供的所有信息。以下是从控制台复制的示例。
Object { ip: "69.34.118.3", hostname: "mo-69-34-118-3.sta.embarqhsd.net", city: "", region: "", country: "US", loc: "37.7510,-97.8220", org: "AS18494 Embarq Corporation" }
以下代码将生成此代码。可以通过调用grid.loc来提取位置。然后需要分割坐标，因为映射代码在读取组合坐标时有一些问题。所以将它们分割以用作坐标。
// 调用API
var place = $.getJSON(
'http://ipinfo.io', function(grid){
console.log(grid.ip)
// 检查IP
console.log(grid.loc)
var loc = grid.loc;
// 检查Grid
//分割坐标
var str_array = loc.split(
','
);
});
如上所述，坐标是正值，然后是负值。第二个坐标的负值表示西半球，正值表示东半球。因此，德国或希腊的位置将有两个正值。美国大陆和加拿大将有一个正值然后是负值。澳大利亚将有一个负值用于N/S，然后是正值用于E/W，而南美洲将有两个负值。
首先需要添加对API的引用以及其JS：
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
然后，只需要两个JS片段；一个是想映射坐标的地方，然后是地图美学。在下面的例子中，地图的缩放设置为10，坐标位置被居中到地图上。第二部分的代码采用一个HTML元素，然后这个元素被填充了地图。
var firstMap = {
center: new google.maps.LatLng(30.8225, 28.9543), zoom: 10
}
var map = new google.maps.Map(document.getElementById("map"), firstMap);
var secondMap = {
center: new google.maps.LatLng(str_array[0], str_array[1]), zoom: 10
}
var map2 = new google.maps.Map(document.getElementById("map1"), secondMap);
// 其他地图初始化代码...
<div class="row">
<div class="col-md-4">
<h4>El Alamein</h4>
<div id="map"></div>
</div>
<div class="col-md-4">
<h4>可能是位置或ISP服务器位置</h4>
<div id="map1"></div>
</div>
<div class="col-md-4">
<h4>Stalingrad</h4>
<div id="map2"></div>
</div>
</div>
// 其他地图HTML代码...