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

jQuery для начинающих
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

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

Сообщение Александр »

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

В этом уроке показано как открыть всплывающее окно с картой Google.
Пример работы скрипта http://flapps.ru/example/jquery/prettyp ... e-map.html


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

2. Код html файла

Код: Выделить всё

<html><head><title>Карта Google во всплывающем окне http://flapps.ru</title><link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" /><script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script type="text/javascript" charset="utf-8" src="js/jquery.prettyPhoto.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><script type="text/javascript">$(document).ready(function(){               $("a[rel^='prettyPhoto']").prettyPhoto({        show_title: false,        deeplinking: false,        social_tools: '',        gallery_markup: '',        custom_markup: '<div id="map_canvas" style="width:485px; height:390px"></div>',        changepicturecallback: function(){ initialize(); }    });}); function initialize() {    var latlng = new google.maps.LatLng(59.967384,30.319519);    var myOptions = {        zoom: 14,        center: latlng,        mapTypeId: google.maps.MapTypeId.ROADMAP    };    var map = new google.maps.Map(document.getElementById("map_canvas"),    myOptions);} </script> </head><body><p><a href="#?custom=true&width=485&height=390" rel="prettyPhoto" title="Карта Google">Открыть карту Google</a></p><p><a href="http://flapps.ru">http://flapps.ru</a></p></body></html>
drac0Sha
Сообщения: 88
Зарегистрирован: 20 июл 2011, 15:41

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

Сообщение drac0Sha »

извините, за возможно глупый вопрос, но интересно
вот эти координаты
59.967384,30.319519
можно как-нибудь передавать!?
ну другие места..не вбивать чтоб !
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

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

Сообщение Александр »

drac0Sha
Куда передавать?
Вот документация по api гугл карт http://code.google.com/apis/maps/docume ... avascript/
drac0Sha
Сообщения: 88
Зарегистрирован: 20 июл 2011, 15:41

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

Сообщение drac0Sha »

спасибо )
ну чисто проконсультироваться,
используя ваш пример
могу ли я допольнить так чтобы, допустим вбивая адрес
г.Москва, ул.такая-то
этот адрес сам вбивался в программу, и при нажатии выдавал именно это расположение ) !
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

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

Сообщение Александр »

drac0Sha
Можно найти координаты по адресу. В документации описано. google.maps.Geocoder()
drac0Sha
Сообщения: 88
Зарегистрирован: 20 июл 2011, 15:41

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

Сообщение drac0Sha »

спасибо )
drac0Sha
Сообщения: 88
Зарегистрирован: 20 июл 2011, 15:41

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

Сообщение drac0Sha »

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

Код: Выделить всё

 <html><head><title>Карта Yandex во всплывающем окне</title><link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" /><script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script type="text/javascript" charset="utf-8" src="js/jquery.prettyPhoto.js"></script> <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ключ" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){              $("a[rel^='prettyPhoto']").prettyPhoto({        show_title: false,        deeplinking: false,        social_tools: '',        gallery_markup: '',        custom_markup: '<div id="#YMapsID" style="width:485px; height:390px"></div>',        changepicturecallback: function(){ initialize(); }    });});function initialize() { var map, geoResult;           // Создание обработчика для события window.onLoad         YMaps.jQuery(function () {             // Создание экземпляра карты и его привязка к созданному контейнеру             map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);               // Установка для карты ее центра и масштаба             map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);               // Добавление элементов управления             map.addControl(new YMaps.TypeControl());         });           // Функция для отображения результата геокодирования         // Параметр value - адрес объекта для поиска         function showAddress (value) {             // Удаление предыдущего результата поиска             map.removeOverlay(geoResult);               // Запуск процесса геокодирования             var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()});               // Создание обработчика для успешного завершения геокодирования             YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {                 // Если объект был найден, то добавляем его на карту                 // и центрируем карту по области обзора найденного объекта                 if (this.length()) {                     geoResult = this.get(0);                     map.addOverlay(geoResult);                     map.setBounds(geoResult.getBounds());                 }else {                     alert("Ничего не найдено")                 }             });               // Процесс геокодирования завершен неудачно             YMaps.Events.observe(geocoder, geocoder.Events.Fault, function (geocoder, error) {                 alert("Произошла ошибка: " + error);             })         }        }</script> </head><body><p><a href="#?custom=true&width=485&height=390" rel="prettyPhoto" title="Карта Yandex">Отметить на карте</a></p><p><a href=""></a></p></body></html> 

Код: Выделить всё

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

Код: Выделить всё

map = new YMaps.Map(document.YMaps.jQuery("#YMapsID")[0]);
поидеи ) но всё равно ничего ) не получается !
drac0Sha
Сообщения: 88
Зарегистрирован: 20 июл 2011, 15:41

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

Сообщение drac0Sha »

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

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

поидеи ) но всё равно ничего ) не получается !
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

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

Сообщение Александр »

drac0Sha

Код: Выделить всё

custom_markup: '<div id="YMapsID" style="width:485px; height:390px"></div>',
drac0Sha
Сообщения: 88
Зарегистрирован: 20 июл 2011, 15:41

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

Сообщение drac0Sha »

спасибо большое )
Ответить