Далее следует код скрипта, работу которого возможно протестировать на страничке блога, интригующе озаглавленной
. Скрипт построен на Maplace.Js (Google Maps Javascript plugin for jQuery), также используются API Sypex Geo / MaxMind, и выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Compare Maxmind & Sypex Geo</title>
<style>
.gmap {
height: 400px;
width: auto;
}
</style>
</head>
<body>
<?php
require 'geoip2.phar';
use GeoIp2\Database\Reader;
$reader = new Reader('GeoLite2-City.mmdb');
$ip = $_SERVER['REMOTE_ADDR'];
$record = $reader->city($ip);
include("SxGeo.php");
$SxGeo = new SxGeo('SxGeoCity.dat');
$city = $SxGeo->get($ip);
?>
<div id="gmap-dropdown"></div>
<div id="gmap-list" class="gmap"></div>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=VASH_API_KEY&libraries=geometry"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="maplace.min.js"></script>
<script type="text/javascript">
var Locs = [{
lat: <?= $city['city']['lat']?>,
lon: <?= $city['city']['lon'] ?>,
title: 'Sypex Geo',
html: '<? echo $city['city']['name_en'] . ', ' . $city['country']['iso'] . '<br/>' . $city['city']['lat'] . ', ' . $city['city']['lon']; ?>',
zoom: 12,
animation: google.maps.Animation.DROP
}, {
lat: <? echo $record->location->latitude; ?>,
lon: <? echo $record->location->longitude; ?>,
title: 'MaxMind',
html: '<? echo $record->city->name . ', ' . $record->country->isoCode . '<br/>' . $record->location->latitude . ', ' . $record->location->longitude; ?>',
zoom: 12,
animation: google.maps.Animation.DROP
}];
new Maplace({
locations: Locs,
map_div: '#gmap-list',
controls_type: 'dropdown',
controls_title: 'Select:',
start: 1
}).Load();
</script>
</body>
</html>
