Как вставить карту местности, зависящую от IP?

Question

[Глеб]

Нужно сделать карту местности на сайт, пример есть по этой ссылке (почти в самом низу страницы): jazz-shop.ru

Сделать нужно так, чтобы карта менялась в зависимости от того, где находится посетитель, будь то практически любой город России (за пределами ее нет надобности).

Еще желательно, чтобы карта менялась, если изменить город вручную. На сайте установлен плагин, который сам определяет город, а если вдруг определил неправильно, то можно выбрать самостоятельно (стандартный плагин в общем). Так вот, желательно, чтобы карта эта менялась не только от IP, но и от того, какой город указал посетитель.

Надеюсь, описал проблему подробно. Если что, уточню все, что смогу.

Answer 1

[dummyman]

Очень легко, расширенная информация GeoIP дает координаты, которые можно использовать в качестве центра карты. Саму карту на страницу размещаешь leaflet

$ geoiplookup 68.180.228.159
GeoIP Country Edition: US, United States
GeoIP City Edition, Rev 1: US, CA, California, Sunnyvale, 94089, 37.424900, -122.007401, 807, 408
GeoIP ASNum Edition: AS36647 Yahoo

var map = L.map('map').setView([ 37.424900, -122.007401], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
console.log('Job finished');

Comments

[Глеб]

Спасибо, но не совсем то, что нужно. Нужны карты Яндекс или Гугл, чтобы человек мог видеть, например, пункты выдачи своего города.

[dummyman]

Глеб Лесков:

var googleLayer = new L.Google('ROADMAP');
      map.addLayer(googleLayer);

var map = new L.Map('map', {center: new L.LatLng(67.6755, 33.936), zoom: 10, zoomAnimation: false });
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var yndx = new L.Yandex();
var ytraffic = new L.Yandex("null", {traffic:true, opacity:0.8, overlay:true});
map.addLayer(osm);
map.addLayer(ytraffic);
map.addControl(new L.Control.Layers({'OSM':osm, "Yandex":yndx},
				    {"Traffic":ytraffic}));

Если есть список пунктов выдачи, опять же, с главной leaflet:

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('Vydacha zdes, yopt!')
    .openPopup();

[Глеб]

А как это все теперь вставить на сайт?

[dummyman]

Глеб: Ну смотрите. Яндекс, Гугл как провайдеры годны только в качестве отображения пробок.
Сами тайлы у openstreetmap гораздо более информативны.
Скачайте Leaflet.
Сделайте пустую страничку с одной лишь картой. Сначала используйте координаты вашего города/местоположения. - Так будет понятнее что где как отображается.
Потом заходите на старницу плагинов leafletjs.com/plugins.html
И прикручиваете все необходимые.

Далее список маркеров. - Не бойтесь количества, добавляйте весь список сразу, пусть их там будет хоть десятки тысяч. Пока они не должны отобразиться, грузить процессор/память они не будут.

[dummyman]

Глеб:
Как определить местоположение по ip? Тут зависит от хостинга. Так или иначе, geoip в списке зависимостей apache. Так, что можно утверждать что geoip стоит на всех серверах хостингов.
получить информацию можно например так:

$info = shell_exec('geoiplookup '+$_SERVER['REMOTE_ADDR']);
// или
$info = shell_exec('geoiplookup '+$_SERVER['HTTP_X_FORWARDED_FOR']);

[dummyman]

Глеб: Если что не получается, напишите.

[Глеб]

dummyman: Спасибо большое за помощь, но ничего не получается. Делаю по инструкции, но бесполезно. Не получается вставить карту

[dummyman]

Бро, ну ты хоть бы вставил код, который не работает или на jsfiddle.
Вот тебе хороший пример osmbuildings.org
Найди на этой карте свой город.
Сверху на черной плашке есть меню из 5 пунктов -
Examples, Documentation, Code твои.

[Глеб]

Спасибо!)

Answer 2

[Глеб]

Забыл уточнить - важно, чтобы карты были Яндекс или Гугл, потому что нужно так же вставить и пункты выдачи того города, где находится посетитель. Опять же, точно так же, как здесь: jazz-shop.ru