Клуб API Карт

Загрузка карты методом ajax

Пост в архиве.
nalezhitiy
11 августа 2011, 15:38

Здравствуйте  любители api yandex,

Хочу сделать загрузку карты на страницу при клике на адрес отделения.

делаю посредствам jquery, php, mysql

в мускуле храню данные контакта и координаты

с помощью jquery получаю id контакта и передаю рнр скрипту посредством ajax.

где заполняю javascript который формирует экземпляр карты, то есть заполняю
вот этот код

 

echo '<script type="text/javascript">

// Создает обработчик события window.onLoad

YMaps.jQuery(function () {

// Создает экземпляр карты и привязывает его к созданному контейнеру

var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]
map.setCenter(new YMaps.GeoPoint('.$row['cordinat'].'), 16);
map.addControl(new YMaps.TypeControl()
map.addControl(new YMaps.Zoom()


var placemark = new YMaps.Placemark(new
YMaps.GeoPoint('.$row['cordinat'].')
placemark.setIconContent("name");

placemark.name = "'.$row['name'].'";

placemark.description = "'.$row['city'].', '.$row['address'].'<br>Телефон:'.$row['number_phone'].'<br>'.$row['worktime'].'";

map.addOverlay(placemark);
})
  </script>';

но когда вывожу  response на страничку, ничего не происходит((((

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

ЧТО Я ДЕЛАЮ НЕ ТАК?

Помогите советом, примером или ссылкой.

Заранее благодарен

14 комментариев

Можно пример?

Ошибки могут быть совершенно разной природы.

1. подключили ли вы АПИ

2. если ли на странице YMapsID

3. и тд и тп, вообще какие либо ошибки в консоль приходят?

Не обижайтесь конечно...

Но вы всё делаете не так.

AJAX люди обычно используют для того чтобы передавать данные, а не куски HTML кода.

Но при выводе через JavaScript у вас никогда не сработает обработчик загрузки документа.

Обычно логика для вашего случая должна быть следующая:

1. С клиента через AJAX уходит запрос на данные

2. Сервер отвечает и возвращает координаты и описание объекта. Как лучше это сделать решайте сами - вариантов куча: XML, JSON, plain text

3. На клиенте по получению данных создается карта и на нее ставится точка по результатам полученных данных.

Спасибо за мысль NeWMaN.

Еще один момент хочу уточнить, если вам не сложно ответить.

Когда я получить свои данные в json то для использования мне нужно их перенести в код карты, как? )))

Правильно ли я делаю:

 $("div").click(function(){
             var iddiv = $(this).attr("alt");
                $.ajax({
                    url:    'map.php',
                    type:    'POST',
                    dataType : "json",
                    contentType: 'application/x-www-form-urlencoded',
                 data:    'id=' + iddiv,
                    success: function (data, textStatus) {

            YMaps.jQuery(function (data) {
               
               var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
                        map.setCenter(new YMaps.GeoPoint(data.map), 16);
                        map.addControl(new YMaps.TypeControl());
                        map.addControl(new YMaps.Zoom());

data - массив с данными

data.map
 - координаты.

 Но я не уверен правильно ли я передаю эти данные функции  
YMaps.jQuery, или я вообще не там ее вставил?

В вашем коде не нужна "обертка" YMaps.jQuery(function (data) { и соответствующие ей закрывающие скобки.

Мх((((

Я не понял, а как будет создаватся карта? нужен метот Ymaps.load?

Тоесть в ответе ajax  вписывать

  success: function (data, textStatus) {

               var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]
                        map.setCenter(new YMaps.GeoPoint(data.map), 16);
                        map.addControl(new YMaps.TypeControl()
                        map.addControl(new YMaps.Zoom()

 

Но у меня так не работает. и даже когда я данные получил и подставил, все равно не работает(

после собития дом-реди конструкции типа $(function()), которые должны срабатывать на дом реди будут срабатывать мгновенно.

Тоже самое работает на различные .load и другие персистентные ивенты.

Так что тут не немного не угадал.

Но тут есть другой вопрос - jquery вообще не любит исполнять скрипты которые приходят ему через ajax.

Для начала надо пришедший код переправить в какой-то существующий элемент(и это, как не странно, не кросбраузерно).

А еще лучше - убрать начальный и конечный

У меня там была ошибка в коде и не сробатывало)))

Зато сейчас работает но не правильно, подставляю данные, на метке есть данные и метку ставить в океане))) координаты правильные, сверял с яндекс мап. почему так получилось?

Точка в океане рядом с арфикой( координаты 0,0) ?

быть может не правильно GeoPoint создали?

Можно посмотреть какой map.setCenter(new YMaps.GeoPoint('.$row['cordinat'].'), 16); генерит ваш скрипт?

$row['cordinat'] = 30.425921,50.446374 и без пробелов.

Но сейчас я беру эти данные в формате json, и получаю вот такое:

data {"map":"30.425921,50.446374", "name":"Название точки", "city":"Город", "address":"улица, дом"}

и обращаюсь к координатам

data.map - координаты

map.setCenter(new YMaps.GeoPoint(data.map), 16)

при alert(data.map) выводит мне координаты, а когда они в карте то я нахожусь в океане, под африкой)))

В чем трабла?

 

вы в GeoPoint заместо двух чисел передаете одну строку :)

Угу, я предпологал конечно что тип данных не тот(

Как можно в javascript переделать строку на два числовых значения? не подскажите?

data {"map":[30.425921,50.446374].....

либо на клиенте data.map = data.map.split(',');

map.setCenter(new YMaps.GeoPoint(data.map[0],data.map[1]), 16)

thekashey - большое спасибо (B)

А для не программистов можно готовый примерчик плииз!