Добавить карту СПб на сайт

12

Naigra

9 сентября 2009, 09:53

870

Здравствуйте.

Есть сайт с самописной cms, который я сейчас переделываю. Заказчик хочет, чтобы на сайте была карта. Карта Санкт-Петербурга, на которой можно отметить гостиницы из базы сайта, основные достопримечательности(может быть что-то с применением топплан, гуглмап – ничего оригинального не надо). Сколько бы взяли за такую работу и сколько по времени это займет. Нужно до конца недели. Жду ответа в личке или в аське 177-семь-78-625.

С уважением, Наталья.

66

4NT1P0V

9 сентября 2009, 11:46

#1

Наталья, в этом нет нечего сложного!

Берем карту от Яндекс, ставим ее на сайт, для этого нам необходимо:

зарегистрировать специальный ключ для сайта на этой странице http://api.yandex.ru/maps/form.xml (вписывайте домен без www)

После получения ключа можете ознакомится с документацией http://api.yandex.ru/maps/doc/

Сейчас я вам дам готовый код который нужно будет только разместить на сайта.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ТУТ_ВАШ_КЛЮЧ_ПОЛУЧЕННЫЙ_НА_САЙТЕ_ЯНДЕКС" type="text/javascript"></script>

    <script type="text/javascript">
        window.onload = function () {
            var map = new YMaps.Map(document.getElementById("YMapsID"));
            map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);  ##этот параметр отвечает за расположение карты, в данном случае это Москва. цифра 10 это так сказать зум, удаленность

            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.Zoom());
            map.addControl(new YMaps.MiniMap());
            map.addControl(new YMaps.ScaleLine());
            map.addControl(new YMaps.SearchControl());
           map.enableScrollZoom();

        





var s = new YMaps.Style(); ##Тут задается стиль для обозначения координаты
    s.iconStyle = new YMaps.IconStyle();
    s.iconStyle.offset = new YMaps.Point(-8,-20);
    s.iconStyle.href = "http://avto-c.com/forum/images/zapravki/luk.png";
    s.iconStyle.size = new YMaps.Point(18, 21);

var b = new YMaps.Style();  ##Тут задается стиль для обозначения координаты
    b.iconStyle = new YMaps.IconStyle();
    b.iconStyle.offset = new YMaps.Point(-8,-20);
    b.iconStyle.href = "http://avto-c.com/forum/images/zapravki/bp.png";
    b.iconStyle.size = new YMaps.Point(18, 21);

    var point = new YMaps.GeoPoint(37.604628,55.882742);  ##Тут задается координата местоположения нужного вам объекта
    var placemark1 = new YMaps.Placemark(point, {style: b}); ##Тут задается стиль для обозначения объекта
    placemark1.name = 'г. Москва';
    placemark1.description = 'ВР Бибирево, ул. Плещеева, вл. 2'; ##Описание, также можно вставить картинку, все должно быть в одну строчку
    map.addOverlay(placemark1);


    var point = new YMaps.GeoPoint(37.589967,55.897836);
    var placemark2 = new YMaps.Placemark(point, {style: s});
    placemark2.name = 'г. Москва';
    placemark2.description = 'ул. Московская, 1, подъезд 6.<br>+7 000 000-00-00 лукойл';
    map.addOverlay(placemark2);

document.getElementById('l1').onclick = function () {
    placemark1.openBalloon();
    return false;
} 
document.getElementById('l2').onclick = function () {
    placemark2.openBalloon();
    return false;
} 


  }</script>



   
  



</head>
<body>
<div style="float:left; width:600px">


    <div id="YMapsID" style="width:600px;height:500px"></div>
</div><div style="float:right">
<div id="YMapsID"></div>
    <div id="info">
        <div id="links">
            <h2>Карта заправок</h2>
<span id="l1" style="cursor: pointer; text-decoration:underline">г. Москва</span>
<span id="l2" style="cursor: pointer; text-decoration:underline">г. Москва</span>

        </div>
    </div>
</div>
</body>
</html>

Определить координаты на карте можно тут http://api.yandex.ru/maps/tools/getlonglat/

пример работы можете посмотреть тут Карта заправок и Карта заправок BP

=)

N

12

Naigra

9 сентября 2009, 15:27

#2

Это прекрасно. Но проблема, как раз в том, что я не знаю, где ( в каких файлах) разместить этот код. Если бы сайт был просто html-ным, я бы разобралась. Я даже с некоторыми моментами на .php разобралась. А с этим нет.

66

4NT1P0V

9 сентября 2009, 15:43

#3

Киньте сайт посмотреть в личку.

N

12

Naigra

9 сентября 2009, 16:26

#4

Все. Проблема решена. Тема закрыта.

Вышел новый Яндекс Браузер с YandexGPT и YandexART

Что делать, чтобы попасть в ответы Google Bard