Клуб 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)

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