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


				<script src="" type="text/javascript"></script> 
				<script type="text/javascript" charset="utf-8"> 
					google.load("jquery", "1.4.2");
				<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"
				<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"),

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