Загрузка карты методом 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 комментариев

Авторизуйтесь, чтобы оставить комментарий

thekashey

28 января 2016, 05:48

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

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

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

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

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

Александр Новиков

28 января 2016, 05:48

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

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

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

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

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

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

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

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

nalezhitiy

28 января 2016, 05:48

Спасибо за мысль 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, или я вообще не там ее вставил?

Александр Новиков

28 января 2016, 05:48

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

nalezhitiy

28 января 2016, 05:48

Мх((((

Я не понял, а как будет создаватся карта? нужен метот 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()

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

thekashey

28 января 2016, 05:48

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

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

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

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

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

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

nalezhitiy

28 января 2016, 05:48

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

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

thekashey

28 января 2016, 05:48

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

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

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

nalezhitiy

28 января 2016, 05:48

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

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

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

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

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