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

Автор: | 12.02.2012
15 комментариев

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

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

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

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

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

После этого создадим файл 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>";
  exit();
}
 
// выбираем базу данных
if(!mysql_select_db($db_name, $link))
{
  echo "<br>Не могу выбрать базу данных<br>";
  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+'</div>';
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 служит показа информации об отдельном магазине на более крупном масштабе.

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

  1. Алексей Беляев

    доброго времени суток

    Уделитепару минут

    У меня есть предложение я могу обговорить цену ?

    Ответить ↓
    1. admin Автор записи

      Пока я не занимаюсь выполнением заказов. Вы можете написать о своем предложении на ugolsergey@gmail.com.

      Ответить ↓
  2. Евгений

    Это опечатка или умышленная ошибка?

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

    Ответить ↓
    1. admin Автор записи

      Ни какой ошибки нет, просто у меня используется другой вариант файла для формирования данных в формате JSON с помощью функции json_encode.

      Ответить ↓
  3. Fen-x

    Доброго времени суток!

    Подскажыте пожалуйста: как изменит код чтоб вместо selected были ccылки a href»» ?
    Спасибо!

    Ответить ↓
    1. admin Автор записи

      Все просто. Заменяем код формы выбора select на следующий:

      <div id="searchform">
<a href="#" onclick="do_search('Екатеринбург')" rel="nofollow">Екатеринбург</a><br>
<a href="#" onclick="do_search('Казань')" rel="nofollow">Казань</a><br>
<a href="#" onclick="do_search('Нижний Новгород')" rel="nofollow">Нижний Новгород</a><br>
<a href="#" onclick="do_search('Пермь')" rel="nofollow">Пермь</a><br>
<a href="#" onclick="do_search('Самара')" rel="nofollow">Самара</a><br>
<a href="#" onclick="do_search('Санкт-Петербург')" rel="nofollow">Санкт-Петербург</a>
</div>

      И еще в главной функции заменяем код:

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

      на строку кода

      do_search('Екатеринбург');

      Посмотрите новый пример

      Ответить ↓
  4. Sergey

    Подскажите, пожалуйста, можно ли задавать координаты центра карты не вручную, а из MySQL?

    Ответить ↓
  5. Анрей

    Подскажите как сделать на сайте возможность увеличения карты на весь экран?

    Ответить ↓
  6. Alexthe

    Скажите пожалуйста, немного запутался:
    в файле searcheshop.php если поле town в базе данных задано под другим именем(например gorod) — то как надо поправить этот файл, чтобы все заработало? уже пробовал и так и сяк 🙁 не выводит данные 🙁

    Ответить ↓
    1. admin Автор записи

      Поправить строку с запросом к таблице в бд $query1= «SELECT * FROM mvideo_shops where gorod =’$town’ ORDER BY address»;

      И еще строку «town» => $par1[‘gorod’],

      Ответить ↓
  8. xxx

    подскажите не пашет и в базе каракули
    скопировал sql запрос вставил
    коды вставил от страницы с базы не берутся данные
    можно исходники так легче плиз если не затруднит

    Ответить ↓

Добавить комментарий для xxx Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *