Карта Google во всплывающем окне (prettyPhoto)

jQuery для начинающих

Карта Google во всплывающем окне (prettyPhoto)

Сообщение Александр » 18 сен 2011, 20:40

Карта Google во всплывающем окне (prettyPhoto)

В этом уроке показано как открыть всплывающее окно с картой Google.
Пример работы скрипта Чтобы увидеть ссылку - зарегистрируйтесь


1. Скачиваем библиотеку prettyPhoto
http://www.no-margin-for-errors.com/pro ... box-clone/

2. Код html файла
  1. <html>
  2. <head>
  3. <title>Карта Google во всплывающем окне http://flapps.ru</title>
  4. <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
  5. <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  6. <script type="text/javascript" charset="utf-8" src="js/jquery.prettyPhoto.js"></script>
  7.  
  8. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  9. <script type="text/javascript">
  10. $(document).ready(function(){          
  11.     $("a[rel^='prettyPhoto']").prettyPhoto({
  12.         show_title: false,
  13.         deeplinking: false,
  14.         social_tools: '',
  15.         gallery_markup: '',
  16.         custom_markup: '<div id="map_canvas" style="width:485px; height:390px"></div>',
  17.         changepicturecallback: function(){ initialize(); }
  18.     });
  19. });
  20.  
  21. function initialize() {
  22.     var latlng = new google.maps.LatLng(59.967384,30.319519);
  23.     var myOptions = {
  24.         zoom: 14,
  25.         center: latlng,
  26.         mapTypeId: google.maps.MapTypeId.ROADMAP
  27.     };
  28.     var map = new google.maps.Map(document.getElementById("map_canvas"),
  29.     myOptions);
  30. }
  31.  
  32. </script>
  33.  
  34. </head>
  35. <body>
  36. <p><a href="#?custom=true&width=485&height=390" rel="prettyPhoto" title="Карта Google">Открыть карту Google</a></p>
  37. <p><a href="http://flapps.ru">http://flapps.ru</a></p>
  38. </body>
  39. </html>
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: Карта Google во всплывающем окне (prettyPhoto)

Сообщение drac0Sha » 28 сен 2011, 14:36

извините, за возможно глупый вопрос, но интересно
вот эти координаты
59.967384,30.319519
можно как-нибудь передавать!?
ну другие места..не вбивать чтоб !
drac0Sha

 
Сообщения: 88
Зарегистрирован: 20 июл 2011, 15:41
Благодарил (а): 9 раз.
Поблагодарили: 0 раз.

Re: Карта Google во всплывающем окне (prettyPhoto)

Сообщение Александр » 28 сен 2011, 21:23

drac0Sha
Куда передавать?
Вот документация по api гугл карт http://code.google.com/apis/maps/docume ... avascript/
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: Карта Google во всплывающем окне (prettyPhoto)

Сообщение drac0Sha » 30 сен 2011, 10:37

спасибо )
ну чисто проконсультироваться,
используя ваш пример
могу ли я допольнить так чтобы, допустим вбивая адрес
г.Москва, ул.такая-то
этот адрес сам вбивался в программу, и при нажатии выдавал именно это расположение ) !
drac0Sha

 
Сообщения: 88
Зарегистрирован: 20 июл 2011, 15:41
Благодарил (а): 9 раз.
Поблагодарили: 0 раз.

Re: Карта Google во всплывающем окне (prettyPhoto)

Сообщение Александр » 30 сен 2011, 19:16

drac0Sha
Можно найти координаты по адресу. В документации описано. google.maps.Geocoder()
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: Карта Google во всплывающем окне (prettyPhoto)

Сообщение drac0Sha » 03 окт 2011, 16:48

спасибо )
drac0Sha

 
Сообщения: 88
Зарегистрирован: 20 июл 2011, 15:41
Благодарил (а): 9 раз.
Поблагодарили: 0 раз.

Re: Карта Google во всплывающем окне (prettyPhoto)

Сообщение drac0Sha » 14 окт 2011, 17:42

подскажите пожалуйста в чём может быть ошибка!?
у меня используется PrettyPhoto
но во всплывающем окошке нет самой карты

  1.  
  2. <html>
  3. <head>
  4. <title>Карта Yandex во всплывающем окне</title>
  5. <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
  6. <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  7. <script type="text/javascript" charset="utf-8" src="js/jquery.prettyPhoto.js"></script>
  8.  <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ключ" type="text/javascript"></script>
  9. <script type="text/javascript">
  10. $(document).ready(function(){          
  11.     $("a[rel^='prettyPhoto']").prettyPhoto({
  12.         show_title: false,
  13.         deeplinking: false,
  14.         social_tools: '',
  15.         gallery_markup: '',
  16.         custom_markup: '<div id="#YMapsID" style="width:485px; height:390px"></div>',
  17.         changepicturecallback: function(){ initialize(); }
  18.     });
  19. });
  20. function initialize() {
  21.  var map, geoResult;
  22.  
  23.  
  24.  
  25.         // Создание обработчика для события window.onLoad
  26.  
  27.         YMaps.jQuery(function () {
  28.  
  29.             // Создание экземпляра карты и его привязка к созданному контейнеру
  30.  
  31.             map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
  32.  
  33.  
  34.  
  35.             // Установка для карты ее центра и масштаба
  36.  
  37.             map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
  38.  
  39.  
  40.  
  41.             // Добавление элементов управления
  42.  
  43.             map.addControl(new YMaps.TypeControl());
  44.  
  45.         });
  46.  
  47.  
  48.  
  49.         // Функция для отображения результата геокодирования
  50.  
  51.         // Параметр value - адрес объекта для поиска
  52.  
  53.         function showAddress (value) {
  54.  
  55.             // Удаление предыдущего результата поиска
  56.  
  57.             map.removeOverlay(geoResult);
  58.  
  59.  
  60.  
  61.             // Запуск процесса геокодирования
  62.  
  63.             var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()});
  64.  
  65.  
  66.  
  67.             // Создание обработчика для успешного завершения геокодирования
  68.  
  69.             YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
  70.  
  71.                 // Если объект был найден, то добавляем его на карту
  72.  
  73.                 // и центрируем карту по области обзора найденного объекта
  74.  
  75.                 if (this.length()) {
  76.  
  77.                     geoResult = this.get(0);
  78.  
  79.                     map.addOverlay(geoResult);
  80.  
  81.                     map.setBounds(geoResult.getBounds());
  82.  
  83.                 }else {
  84.  
  85.                     alert("Ничего не найдено")
  86.  
  87.                 }
  88.  
  89.             });
  90.  
  91.  
  92.  
  93.             // Процесс геокодирования завершен неудачно
  94.  
  95.             YMaps.Events.observe(geocoder, geocoder.Events.Fault, function (geocoder, error) {
  96.  
  97.                 alert("Произошла ошибка: " + error);
  98.  
  99.             })
  100.  
  101.         }
  102.         }
  103. </script>
  104.  
  105. </head>
  106. <body>
  107. <p><a href="#?custom=true&width=485&height=390" rel="prettyPhoto" title="Карта Yandex">Отметить на карте</a></p>
  108. <p><a href=""></a></p>
  109. </body>
  110. </html>
  111.  



должно быть
  1. map = new YMaps.Map(document.YMaps.jQuery("#YMapsID")[0]);

поидеи ) но всё равно ничего ) не получается !
drac0Sha

 
Сообщения: 88
Зарегистрирован: 20 июл 2011, 15:41
Благодарил (а): 9 раз.
Поблагодарили: 0 раз.

Re: Карта Google во всплывающем окне (prettyPhoto)

Сообщение drac0Sha » 14 окт 2011, 17:54

map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

должно быть
map = new YMaps.Map(document.YMaps.jQuery("#YMapsID")[0]);

поидеи ) но всё равно ничего ) не получается !
drac0Sha

 
Сообщения: 88
Зарегистрирован: 20 июл 2011, 15:41
Благодарил (а): 9 раз.
Поблагодарили: 0 раз.

Re: Карта Google во всплывающем окне (prettyPhoto)

Сообщение Александр » 14 окт 2011, 20:04

drac0Sha
  1. custom_markup: '<div id="YMapsID" style="width:485px; height:390px"></div>',

За это сообщение автора Александр поблагодарил:
drac0Sha
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: Карта Google во всплывающем окне (prettyPhoto)

Сообщение drac0Sha » 17 окт 2011, 14:32

спасибо большое )
drac0Sha

 
Сообщения: 88
Зарегистрирован: 20 июл 2011, 15:41
Благодарил (а): 9 раз.
Поблагодарили: 0 раз.

След.

Вернуться в Уроки jQuery



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron