I've been looking for a way to display a route from - to with prettyPhoto, or something else if someone knows, it doesnt matter.
So in prettyPhoto you are limited only to inserting Lat, Lng of place you want to show up, but in my case I have a route from one place to another, how can modify it?
<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>
A bit late to reply, but I had a similar request, and found this solution:
http://mysitemyway.com/support/topic/possible-to-use-built-in-prettyphoto-to-call-up-google-maps
Basically, just add the full google maps URL to your link and don't forget to add (at the end of the URL) &output=embed?iframe=true&width=640&height=480
Works great and no other hacks needed, just place the preetyPhoto code as usual.
Just to be clear, this solution doesn't need to specify the lat/lng, you just need to place the link with the full URL that you see in google maps + the extra code (that tells preetyPhoto to display it as an iframe), that's it.