В этом уроке показано как открыть всплывающее окно с картой 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>