Open custom content in prettyPhoto

This is the demo page for the following post: Tutorial: Opening custom content in prettyPhoto

Open a Google Map in prettyPhoto

Click on the link to open a Google Map in prettyPhoto. The code related to this example is right underneath.

Open a Google Map

Code

		<html>
			<head>
				<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
				<script type="text/javascript" charset="utf-8"> 
					google.load("jquery", "1.4.2");
				</script>
				<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
				<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
	
				<!-- Google Maps Code -->
				<script type="text/javascript"
				    src="http://maps.google.com/maps/api/js?sensor=true">
				</script>
				<script type="text/javascript">
				  function initialize() {
				    var latlng = new google.maps.LatLng(-34.397, 150.644);
				    var myOptions = {
				      zoom: 8,
				      center: latlng,
				      mapTypeId: google.maps.MapTypeId.ROADMAP
				    };
				    var map = new google.maps.Map(document.getElementById("map_canvas"),
				        myOptions);
				  }

				</script>
				<!-- END Google Maps Code -->
			</head>
			<body>
				<p><a href="#?custom=true&width=260&height=270" rel="prettyPhoto">Open a Google Map</a></p>
		
				<script type="text/javascript" charset="utf-8">
				$(document).ready(function(){			
					$("a[rel^='prettyPhoto']").prettyPhoto({
						custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
						changepicturecallback: function(){ initialize(); }
					});
				});
				</script>
			</body>
		</html>