Клуб API Карт

Как добавить поисковую строку на карту

ukrpresent
7 февраля 2009, 12:54

Подскажите, пожалуйста, как модернизировать свою карту. Хочу добавить поисковую строку на саму карту, над ней или под ней. Чтобы пользователь мог путем ввода своего адреса быстро найти эту точку на карте. Понравился пример пользователя dj на карте. 

 Только размер поисковой строки маловат. Спрашиваю, так как не силен в программировании. Свою карту сделал "методом втыка". Куда именно добавить необходимый код, чтобы все работало. И чтобы по умолчанию в поисковой строке была надпись "Презент Мариуполь". карта для модернизации находится здесь.

Код (его часть) моего примера

 html {height:100%;width:100%}
  body {height:100%;width:100%;margin:0;padding:0}
  #YMapsID {height:100%;width:100%}
   
  .YMaps-b-balloon-content ul {
  padding:0 0 5px 15px;
  }
  .YMaps-b-balloon-content p img, .YMaps-b-balloon-content p img {
  float:left;
  padding:0 5px 5px 0;
  }
   
  .YMaps-b-balloon-content p {
  padding:5px 0;
  }
   
  .clear {
  clear:both;
  }
  </style>
  <script type="text/javascript">
  var map, placemark, pl;
  window.onload = function init () {
  map = new YMaps.Map(document.getElementById("YMapsID"));
  map.setCenter(new YMaps.GeoPoint(37.524175,47.099322),15);
  map.addControl(new YMaps.SmallZoom());
  map.addControl(new YMaps.ToolBar());
  map.addControl(new YMaps.TypeControl());

  placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.524175,47.099322), {balloonOptions :{maxWidth:230, maxHeight:180}});
  placemark.setIconContent('Магазин "Презент" Мариуполь');
  map.addOverlay(placemark);

  pl = new YMaps.Polyline([ new YMaps.GeoPoint(37.524175,47.099322),
  new YMaps.GeoPoint(37.523941,47.099341),
  new YMaps.GeoPoint(37.523761,47.099347),
  new YMaps.GeoPoint(37.523698,47.099015),
  new YMaps.GeoPoint(37.523689,47.098746),
  new YMaps.GeoPoint(37.524246,47.098684),
  new YMaps.GeoPoint(37.524561,47.098653),
  new YMaps.GeoPoint(37.524606,47.09896),
  new YMaps.GeoPoint(37.524731,47.099273),
  new YMaps.GeoPoint(37.524192,47.099322)
  ]);
  pl.setStyle( 'example#customStyle' );

  map.addOverlay(pl);
   
  YMaps.Events.observe(pl, pl.Events.Click, function (mEvent) {
  map.openBalloon(new YMaps.GeoPoint(37.524175,47.099322), '<p>Пересечение проспекта Строителей и проспекта Ленина. ТЦ "Обжора", цокольный этаж магазин (отдел "Презент")</p><p><a href="#" onclick="example_6();return false;">Подробнее</a></p>');
  })

  var s = new YMaps.Style();
  s.iconStyle = new YMaps.IconStyle();
  s.iconStyle.offset = new YMaps.Point(-9, -33);
  s.iconStyle.href = "http://www.ukrpresent.com.ua/editorfiles/DANCE.GIF";
  s.iconStyle.size = new YMaps.Point(18, 29);
  s.iconStyle.shadow = new YMaps.IconShadowStyle();
  s.iconStyle.shadow.offset = new YMaps.Point(-8, -16);
  s.iconStyle.shadow.href = "/images/maps/icon_shadow.png";
  s.iconStyle.shadow.size = new YMaps.Point(26, 19);
  s.lineStyle = new YMaps.LineStyle();
  s.lineStyle.strokeColor = 'FF000055';
  s.lineStyle.strokeWidth = '5';
  YMaps.Styles.add("example#customStyle", s);

  example_1();
  };

  function example_1 () {
  placemark.closeBalloon();
  map.setCenter(new YMaps.GeoPoint(37.524175,47.099322), 15);
  placemark.setOptions({hideIcon:true, style:'default#greenPoint'});
  placemark.setGeoPoint(new YMaps.GeoPoint(37.524175,47.099322));
  placemark.setBalloonContent('<p> К нам можно проехать на 117, 123, 118, 124, 153, 146, 211 и другими маршрутными такси.Остановка "1000 мелочей". Наш адрес: Мариуполь, проспект Строителей, 125, ТЦ "Обжора", цокольный этаж, МАГАЗИН "ПРЕЗЕНТ".</p><p><a href="#" onclick="example_2();return false;">Далее</a></p>');
  }

  function example_2 () {
  map.setCenter(new YMaps.GeoPoint(37.524175,47.099322), 11);
  placemark.setGeoPoint(new YMaps.GeoPoint(37.524175,47.099322));
  map.setType(YMaps.MapType.SATELLITE);
  placemark.setBalloonContent('<p>Можно посмотреть на нас из космоса :)Нажимайте + и - для увеличения или уменьшения карты.</p><ul><li><a href="#" onclick="map.setType(YMaps.MapType.MAP);return false">схема</a></li><li><a href="#" onclick="map.setType(YMaps.MapType.SATELLITE);return false;">спутник</a></li><li><a href="#" onclick="map.setType(YMaps.MapType.HYBRID);return false">гибрид</a></li></ul></p><p><a href="#" onclick="example_3();return false;">Далее, подробнее</a></p>');
  }

  function example_3 () {
  map.setType(YMaps.MapType.MAP);
  map.setCenter(new YMaps.GeoPoint(37.524175,47.099322), 17);
  placemark.setGeoPoint(new YMaps.GeoPoint(37.524175,47.099322));
  placemark.setOptions({style:'example#customStyle', hideIcon:false});
  placemark.setBalloonContent('<p>Телефон для справок 8 (0629) 537 937</p> e-mail: ukrpresent@mail.ru<p><a href="#" onclick="example_4();return false;">Далее</a></p>');
  placemark.closeBalloon();
  placemark.openBalloon();
  }

  function example_4 () {
  map.setCenter(new YMaps.GeoPoint(37.524175,47.099322));
  placemark.setGeoPoint(new YMaps.GeoPoint(37.524175,47.099322));
  placemark.setBalloonContent('<p><img src="http://dev3.cloudkill.yandex.ru/images/maps/citadel.jpg" alt="" /> <a href="http://www.ukrpresent.com.ua/" target="_blank"><IMG SRC="http://www.ukrpresent.com.ua/editorfiles/Present_gift1(1)"ALT="Презент- супермаркет подарков и приятных вещей" Title="Презент- супермаркет подарков и приятных вещей. Классические и необычные подарки, трикотаж, нижнее белье, парфюмерия, мебель на заказ и многое, многое другое.">Добро пожаловать!</a></p><p class="clear"><a href="#" onclick="example_5();return false;">Далее</a></p>');
  }
   
  function example_5 () {
  map.setZoom(14);
  map.setCenter(new YMaps.GeoPoint(37.524175,47.099322), 16);
  YMaps.Events.notify(pl, pl.Events.Click);
  }
   
  function example_6 () {
  map.setCenter(new YMaps.GeoPoint(37.524175,47.099322));
  placemark.setGeoPoint(new YMaps.GeoPoint(37.524175,47.099322), 16);
  placemark.setOptions({hideIcon:true, style:'default#bluePoint'});
  placemark.setBalloonContent('<p>А чтобы узнать больше: <ul><li>Ознакомьтесь с графиком работы магазина</a></li><li>Мы работаем для Вас без выходных и перерыва с 09-00 до 19-00. Интернет магазин работает круглосуточно без перерыва и выходных. </a></li></ul></p><p><a href="#" onclick="example_1();return false;">Вернуться к схеме</a></p>');
  placemark.openBalloon();

Благодарю за понимание. И за помощь.


24 комментария
Подписаться на комментарии к посту
Ммм... скопировать из этого примера? Там есть форма поиска)
Спасибо за ответ. :) Я до этого писал, что не очень разбираюсь в программировании. Куда именно его вставить? Этот пример я знаю, но как его (а именно верхнюю строку поиска, этот код) вставить в указанный мною код, и чтобы все работало. Пишу, потому что уже пытался... (работает либо он, либо мой. Но как сделать , чтобы работало все вместе?) Если не поможете, конкретно, возможно, и сам разберусь, как всегда (методом "втыка", а это долго). Обращаюсь к профессионалам. А профессионал отличается от любителя своим пониманием!!! Профессионал сможет "разжевать" так, чтобы понял даже ребенок... Спасибо за понимание. Очень надеюсь и заранее благодарен. :) Еще раз благодарю за ответ hevil.
Вам необходимо две вещи: 1) Добавить после функции init еще одну функцию: function showAddress (value) { geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()}); YMaps.Events.observe(geocoder, geocoder.Events.Load, function () { if (this.length()) { map.setCenter( this.get(0).getGeoPoint()); map.addOverlay(this.get(0),9,17); this.get(0).setBalloonContent(this.get(0).text); this.get(0).openBalloon(); }else { alert("Ничего не найдено") } }); YMaps.Events.observe(geocoder, geocoder.Events.Fault, function (error) {alert("Произошла ошибка: " + error.message)}); } 2) Вам необходима сама строка поиска (textbox и кнопка). Вот код. Вставьте куда угодно. Например перед картой.

Внутри
Вот код для пункта 2

value="Москва" замените на value="Презент Мариуполь"
Все сделал, но все равно ничего не получилось. Либо вообще ничего нет, либо строка не дает никакой пользы, т.е. ничего не находится. Можете для особо одаренных объяснить куда именно после функции init вставить код? На счет самой строки все понятно, но надо ведь чтобы она работала, т.е. искала улицы, дома. Если можно по-подробнее с примером 1. Извините за мою тупость. :) Иными словами, как пример http://api.yandex.ru/maps/jsapi/examples/geocoding.html объединить с моим, и чтобы корректно все работало? Спасибо.
Спасибо. Все получилось. Только при вводе в поисковой строке выдает : Код введен некорректно. Пожалуйста, введите защитный код заново. Ваш E-Mail адрес указан неправильно, попробуйте ещё раз. Дело в том, что у меня на этой странице форма запроса. Как теперь сделать, чтобы форма запроса не реагировала на форму поиска карты? Спасибо.
Дайте ссылку на страницу, где Вы экспериментируете.
http://www.ukrpresent.com.ua/contact_us.php . Если поможете, буду очень благодарен.
На любой другой странице работает, а здесь не хочет. Может как-то этот код разделить:

Но как?
Хе, в таком случае вам форма не нужна. Видимо она делает Submit вашей форме для комментов. Сделайте так: эти строки:

замените на такое:

Думаю тогда будет вам счастье )
Радостно видеть, что пользователи нашего клуба опережают модераторов, давая ценные советы. =)
Теги не могут быть вложенными. По этой причине при нажатии кнопки "Искать", у Вас срабатывала другая форма. Вам вынести код:

за пределы формы http://www.ukrpresent.com.ua/contact_us.php?action=send" name="contact_us"> Например, разместить одну форму над другой.
Угу, проблема именно во вложении форм. Вопрос не по теме - при просмотре темы, когда прокручиваю страницу вниз - она автоматически возвращается в самый верх.. странно. Наблюдаю это в браузере Chrome уже второй день ) Попробую в других.
Спасибо. Буду выводить. Или вообще создам отдельную страницу для этого дела. Спасибо за помощь. :)
Эта проблема в самом клубе? В какой момент возвращается вверх? При прокручивании страницы? Или после каких-либо действий? Со всеми вопросами по работе (или ошибки в работе сервиса) "ярушки" можно написать в Клуб сервиса Я.ру.
Просто при прокручивании вниз. Но не всегда. Может вернуться а может и нет. Я пока не увидел зависимости от чего либо. Узнаю - сообщу.
Хорошо.
Аналогичная проблема, при протаскиваний или прокручиваний страници вниз, после движения мышкой она снова прыгает вверх. правда не всегда но частенько случается приходится браузер перезагружать.
Спасибо большое всем участникам, все получилось. Есть и прежняя карта и строка поиска. :) И форма запроса осталась. Особая благодарность yolf. Кстати, вопрос не по теме. У меня ничего не прокручивается. Пользуюсь Оперой. :)
ВСЕ!!! Готово! По совету yolf сделал новым окном плюс просмотр на всю страницу. Результат здесь http://www.ukrpresent.com.ua/contact_us.php . Спасибо. :)
Только не во всех браузерах корректно отображается. В Опере и Хроме лучше всего. :)
В фаерфоксе карта не грузится, помоему вот по этому: ... window.onload = function init () { .. Сделайте без названия функции: .. window.onload = function () { .. Просто на сколько я знаю - у фаерфокса init подо что то зарезервировано, хотя я могу и ошибаться. К тому же по моему это само по себе ошибка - присваивать функцию с названием. Да и просто - зачем вам название если вы больше ни от куда не вызываете эту функцию?
Убрал. Все равно не идет. Не знаю, что может быть еще. Вообще, браузер такой специфический...