Создание карты на сайте с адресами магазинов, с использованием API Яндекс.Карт

В этой статье я расскажу, как можно реализовать карту с адресами магазинов в разных городах, используя API Яндекс.Карт.

В самом начале нам необходимо подготовить исходные данные и занести их в таблицу базы данных MySQL.

Для примера, это будут адреса магазинов М.Видео в нескольких городах России (Екатеринбург, Казань, Нижний Новгород, Пермь,
Самара и Санкт-Петербург).

 

Создадим в базе данных таблицу mvideo_shops и добавим в нее данные о магазинах.

Сделать это удобнее, используя файл mvideo_shops.sql и инструмент для администрирования базы данных MySQL – phpMyAdmin.

CREATE TABLE `mvideo_shops` (
`id` int(5) NOT NULL auto_increment,
`town` varchar(255) NOT NULL,
`address` varchar(255) NOT NULL,
`lat` varchar(50) NOT NULL,
`lon` varchar(50) NOT NULL,
`grafrab` varchar(255) NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=48 ;

--
-- Дамп данных таблицы `mvideo_shops`
--
INSERT INTO `mvideo_shops` (`id`, `town`, `address`, `lat`, `lon`, `grafrab`) VALUES
(1, 'Екатеринбург', 'Металлургов, 87 ТЦ «МеГа»', '60.5048217360862', '56.8234714252246', 'Ежедневно с 10:00 до 23:00'),
(2, 'Екатеринбург', 'Сибирский тракт дублер, 2 ТРЦ «КомсоМолл»', '60.6716237167975', '56.8295163134229', 'Ежедневно с 10:00 до 23:00'),
(3, 'Екатеринбург', 'Халтурина, 55 - цоколь ТРЦ «Карнавал»', '60.5502900177664', '56.8531158103851', 'Ежедневно с 10:00 до 22:00'),
(4, 'Екатеринбург', '8 Марта, 149 - 2 этаж ТРЦ «Мегаполис»', '60.6124651470383', '56.8068669582072', 'Ежедневно с 10:00 до 22:00'),
(5, 'Екатеринбург', 'Радищева, 55 - 1-2 этаж', '60.5814154330541', '56.8276672035226', 'Ежедневно с 10:00 до 23:00'),
(6, 'Екатеринбург', 'Вайнера, 10 - 5 этаж ТЦ «Успенский»', '60.5942434654987', '56.8363106943079', 'Понедельник-Суббота – с 9:00 до 23:00'),
(7, 'Казань', 'Ямашева проспект, 71а - 3 этаж ТЦ «Бахетле»', '49.1354134993401', '55.8261659934579', 'Ежедневно с 9:00 до 22:00'),
(8, 'Казань', 'Победы проспект, 141 СТЦ «Мега»', '49.2132807355924', '55.7809266576282', 'Будние дни с 10.00 до 24:00'),
(9, 'Казань', 'Победы проспект, 50б - 3 этаж ТЦ «Проспект»', '49.2067674216523', '55.7482207243935', 'Ежедневно с 9:00 до 22:00'),
(10, 'Казань', 'Сибирский тракт, 34 к13-13а ТОЦ «Грани»', '49.1860536431335', '55.8155380993378', 'Ежедневно с 9:00 до 23:00'),
(11, 'Казань', 'Декабристов, 79', '49.0934261835592', '55.8174622817804', 'Ежедневно с 9:00 до 23:00'),
(12, 'Казань', 'Петербургская, 1 - 5 этаж ТЦ «Кольцо»', '49.1253304068161', '55.7860148984205', 'Ежедневно с 10:00 до 22:00'),
(13, 'Нижний Новгород', 'Кстовский район, деревня Федяково, ТРЦ «МЕГА»', '44.0712821502089', '56.2254578163028', 'Ежедневно с 10:00 до 23:00'),
(14, 'Нижний Новгород', 'ул. Веденяпина, 2б, ТЦ «Парк Авеню»', '43.8640136334282', '56.2396057010225', 'Ежедневно с 9:00 до 23:00'),
(15, 'Нижний Новгород', 'ул. Родионова, 165 к13, ТЦ «Ганза»', '44.0698463087154', '56.3146008935357', 'Ежедневно с 10:00 до 22:00'),
(16, 'Нижний Новгород', 'пл. Революции, 9, ТЦ «Республика», 4 этаж', '43.9476577851007', '56.3203292649522', 'Ежедневно с 9:00 до 22:00'),
(17, 'Нижний Новгород', 'ул. Белинского, 61, ТЦ «ЭТАЖИ 2»', '44.0181848274614', '56.3163525867483', 'Ежедневно с 10:00 до 23:00'),
(18, 'Нижний Новгород', 'Сормовское ш., 15', '43.9273811083217', '56.3208795648619', 'Ежедневно с 9:00 до 23:00'),
(19, 'Пермь', 'Куйбышева, 16 - 3 этаж ТРК «Колизей Синема»', '56.2360534149514', '58.0089139873122', 'Ежедневно с 9:00 до 23:00'),
(20, 'Пермь', 'Революции, 13 к2 - 1 этаж ТРК «Семья»', '56.259885905869', '58.0070681599393', 'Ежедневно с 10:00 до 23:00'),
(21, 'Пермь', 'Мира, 41/1 - цоколь ТРК «Столица»', '56.1890203326263', '57.9775384496457', 'Ежедневно с 10:00 до 21:00'),
(22, 'Пермь', 'г. Березники, ул. Пятилетки, 150, ТЦ «Оранж Молл»', '56.79902', '59.419941', 'Ежедневно с 10:00 до 22:00'),
(23, 'Самара', 'Коммунистическая, 90/1', '50.1433782620573', '53.2027163807943', 'Ежедневно с 9:00 до 22:00'),
(24, 'Самара', 'Московское шоссе, 81а - 2 этаж ТРЦ «Парк Хаус»', '50.2000490107166', '53.2335103857267', 'Ежедневно с 10:00 до 22:00'),
(25, 'Самара', 'Московское шоссе 18 км, 25с - 1 этаж ТРК «Московский»', '50.2728531720955', '53.2762418901811', 'Ежедневно с 9:00 до 23:00'),
(26, 'Самара', 'Ново-Садовая, 160м - 2-01 офис 2 этаж ТРЦ «МегаСити»', '50.1678699284893', '53.2245278264478', 'Ежедневно с 10:00 до 22:00'),
(27, 'Санкт-Петербург', 'Энгельса проспект, 154, ТЦ «Гранд Каньон»', '30.333925617615', '60.0582557677624', 'Ежедневно с 10:00 до 23:00'),
(28, 'Санкт-Петербург', 'Лиговский проспект, 26-38 литер «А», ТРЦ «Галерея», 3 этаж', '30.3605767762969', '59.9274339126135', 'Ежедневно с 10:00 до 23:00'),
(29, 'Санкт-Петербург', 'Заневский проспект, , 67, к.2, ТК «Заневский каскад»', '30.4377089316302', '59.9330385270183', 'Ежедневно с 10:00 до 23:00'),
(30, 'Санкт-Петербург', 'Ленинградская обл., Всеволжский район, Бугровская волость, массив Корабсельки, ТРЦ «МЕГА-Парнас»', '30.3799338504277', '60.0914286110053', 'Ежедневно с 10:00 до 23:00'),
(31, 'Санкт-Петербург', 'Невский проспект, 114-116, ТЦ «Невский Центр» - 4 этаж', '30.3589877191229', '59.9323201646961', 'Ежедневно с 10:00 до 23:00'),
(32, 'Санкт-Петербург', 'Московский проспект, 44', '30.3197334694415', '59.9125693870999', 'Магазин открыт 24 часа'),
(33, 'Санкт-Петербург', 'Пролетарская (Колпино), 36 литер А, ТРК «Меркурий»', '30.5844468853642', '59.7406751223753', 'Ежедневно с 10:00 до 22:00'),
(34, 'Санкт-Петербург', 'Савушкина, 141, ТЦ «МЕРКУРИЙ»', '30.2067348154344', '59.9913454359748', 'Ежедневно с 10:00 до 23:00'),
(35, 'Санкт-Петербург', 'Академика Павлова, 5 - 2 этаж', '30.317544164066', '59.9774557458568', 'Ежедневно с 10:00 до 23:00'),
(36, 'Санкт-Петербург', 'Байконурская, 14А, ТРК «Континент», 2 этаж', '30.27260394691', '60.0022963902692', 'Ежедневно с 10:00 до 23:00'),
(37, 'Санкт-Петербург', 'Конституции площадь, 7, ТЦ «Лидер»', '30.308373039588', '59.8511547932662', 'Ежедневно с 10:00 до 23:00'),
(38, 'Санкт-Петербург', 'Коллонтай, 3, ТК «Феличита»', '30.4444312049523', '59.9108518116351', 'Ежедневно с 10:00 до 22:00'),
(39, 'Санкт-Петербург', 'Балканская площадь, 5 лит Ю - 2 этаж', '30.3791021888766', '59.8276831879754', 'Ежедневно с 10:00 до 23:00'),
(40, 'Санкт-Петербург', 'Гражданский проспект, 41 лит Б', '30.3986425839227', '60.0122372712758', 'На реконструкции'),
(41, 'Санкт-Петербург', 'Пражская, 48/50, ТРК «Южный полюс»', '30.4033709684658', '59.8638457664971', 'Ежедневно с 10:00 до 22:00'),
(42, 'Санкт-Петербург', 'Пулковское ш., 19, ТК «Карусель», 2 этаж', '30.3164482227108', '59.8258580172183', 'Ежедневно с 10:00 до 24:00'),
(43, 'Санкт-Петербург', 'Коломяжский проспект, 10', '30.2988363585168', '59.994661636738', 'Ежедневно с 11:00 до 23:00');

После этого создадим файл searcheshop.php, который будет извлекать данные о магазинах М.Видео для конкретного города.

 

Код файла searcheshop.php:

<?php

include("bd.php");

header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {

$town = $_GET['town'];

$query1= "SELECT * FROM mvideo_shops where  town='$town' ORDER BY address";
$result1 = mysql_query($query1);

if(mysql_num_rows($result1)>0)
{
while ($par1 = mysql_fetch_array($result1)){

$addressshop[] = array("id"=>$par1['id'],

"town" => $par1['town'],

"address" => $par1['address'],

"lat" => $par1['lat'],

"lon" => $par1['lon'],

"rrab" => $par1['grafrab']);

}

$json = json_encode($addressshop);

echo $json;

}

}
?>

В нем мы извлекаем информацию о магазинах из базы данных и формирует ответ в формате JSON.

Файл для соединения с базой данных bd.php.

Он имеет следующий код:

< ?php

$sdb_name = "localhost"; //адрес сервера базы данных, обычно  localhost
$user_name = "root"; //логин пользователя
$user_password = ""; //пароль пользователя
$db_name = "ymap_bd"; //имя базы данных MySQL

// соединение с сервером базы данных
if(!$link = mysql_connect($sdb_name, $user_name, $user_password))
{
  echo "<br>Не могу соединиться с сервером базы данных<br &gt;";
  exit();
}

// выбираем базу данных
if(!mysql_select_db($db_name, $link))
{
  echo "<br/>Не могу выбрать базу данных<br &gt;";
  exit();
}

mysql_query('SET NAMES utf8');
?/>

Файл map.html выводит карту с магазинами.

Посмотрим пример в работе

В начале на карту загружается информация о магазинах Екатеринбурга, но если из выпадающего списка выбрать другой город,
то на карте отобразятся магазины для этого города.

С лева от карты — список магазинов.

Щелкнув по какой-либо записи из списка, на карте отобразится местоположение этого магазина с информацией в большем масштабе.

Код файла map.html

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Магазины М.Видео на карте</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="http://api-maps.yandex.ru/1.1/index.xml?
key=AAJ4GE8BAAAAOkNOJwIArpFR_w2NjeymNZKd_pJ2y53XQEMAAAAAAAAAAABqMMktH6XqA6dQaHmVCbkMNlhYfw==" type="text/javascript"></script>

<style>
#shopconteyner{
width: 100%;
}

#shops{ float:left;
width: 30%;
}

#YMapsID{
margin-left: 40%;
width: 60%;
height: 600px;
}

</style>

	<script type="text/javascript">

	var map;

        // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(44.0075,56.326944), 15);

			//Добавляем элементы управления.
			map.addControl(new YMaps.TypeControl());//Тип карты, кнопочки Схема, Гибрид, Спутник
			map.addControl(new YMaps.ToolBar());//Тулбар, кнопки Рука, Лупа, Линейка
			map.addControl(new YMaps.Zoom());//Увеличение

			YMaps.jQuery("select").change(function () {
			var town = YMaps.jQuery("#selecttown :selected").val();
			do_search(town);

			})
        .change();

        });

function do_search(town){
map.removeAllOverlays();
YMaps.jQuery('#shops').html('');

YMaps.jQuery.getJSON("searcheshop-2.php", {town: town}, function(json){ 

var src_res="<p><strong>результаты поиска: </strong></p>";
gCollection = new YMaps.GeoObjectCollection("default#nightPoint");
bounds = new YMaps.GeoCollectionBounds();

src_res=src_res+'<p><strong>Найдено объектов: '+json.length+'</strong></p>';

for (i = 0; i < json.length; i++) {
var sch = i+1;
var placemark=new YMaps.Placemark(new YMaps.GeoPoint(json[i].lat,json[i].lon));
bounds.add(new YMaps.GeoPoint(json[i].lat,json[i].lon));
placemark.setIconContent(sch);
placemark.description= '<div style="color:#ff0303;font-weight:bold">'+json[i].address+'';
placemark.description = placemark.description+'<strong>Адрес:</strong> '+json[i].address;
gCollection.add(placemark);
src_res=src_res+'<p>'+sch+'. '+'<a href="#" onClick="return go_to('+json[i].lat+', '+
json[i].lon+",'"+json[i].address+"','"+json[i].rrab+"','"+json[i].id+"');"+'\">'+json[i].address+'</a></p>';
}
map.setBounds(bounds);
map.addOverlay(gCollection);

YMaps.jQuery('#shops').html(src_res);

});
}	

function go_to(lat,lon,address,rejim,id){
map.setCenter(new YMaps.GeoPoint(lat,lon),16);
map.removeAllOverlays();
var placemark=new YMaps.Placemark(new YMaps.GeoPoint(lat,lon));
placemark.name='<div style="color:#ff0303;font-weight:bold">'+address+'</div>';
placemark.description = '<div style="font-size:13px;">';
placemark.description = placemark.description+'<div>';
placemark.description = placemark.description+'<strong>Адрес:</strong> '+address+'<br />';
placemark.description = placemark.description+'<strong>Режим работы:</strong> '+rejim+'<br />';
placemark.description = placemark.description+'</div></div>';
map.addOverlay(placemark);
placemark.openBalloon();
return false;
}	

    </script>

</head>
<body>
<div id="searchform">
<select id="selecttown">
<option value="Екатеринбург">Екатеринбург</option>
<option value="Казань">Казань</option>
<option value="Нижний Новгород">Нижний Новгород</option>
<option value="Пермь">Пермь</option>
<option value="Самара">Самара</option>
<option value="Санкт-Петербург">Санкт-Петербург</option>
</select>
</div>
<div id="shopconteyner">
<div id="shops"></div>
<div id="YMapsID"></div>
</div>
</body>
</html>

В начале мы определяем параметры нашей карты.

Функция do_search служит для отправки параметра о выбранном городе скрипту searcheshop.php, а ответные данные добавляются на карту и в список слева от нее.

Функция go_to служит показа информации об отдельном магазине на более крупном масштабе.

Источник http://webmap-blog.ru/