[Solved] Get prettyPhoto to display google map in Grid

[M M]

I'm trying to incorporate prettyPhoto into an Telerik MVC radgrid but I'm having trouble. I've incorporated it into a hardcoded HTML file with no problem but when I port it over to the radgrid I can't get it to work. The link just clicks through to the google maps page rather than activates the jquery plugin.

I'm basically trying to replicate the example on this page - having a link that activates prettyphoto in my radgrid. http://www.no-margin-for-errors.com/demos/prettyphoto-custom-content/index.html

Here is the relevant info from the _Layout.cshtml header section

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
        @(Html.Telerik().StyleSheetRegistrar()
                .DefaultGroup(group => group
                    .Add("telerik.common.min.css")
                    .Add("telerik.rtl.min.css")
                    .Combined(true)
                    .Add("telerik.windows7.min.css")
                    .Compress(true))
              )
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/Scripts/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet"/>
<script src="/Scripts/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>

And my Telerik ScriptRegistrar from the bottom of my _Layout view:

@(Html.Telerik().ScriptRegistrar().jQuery(false)
         .DefaultGroup(group => group
             .Add("telerik.all.min.js")
             .Compress(true))
         .OnDocumentReady(
         @<text>
             prettyPrint();
         </text>)
)

My radgrid is a little complex, it's master/detail implementation. I considered removing the detail portion but I think it's best to present exactly what I'm working with:

@(Html.Telerik().Grid<ContactView>()
    .Name("Employees")
    .Columns(columns =>
    {
        columns.Bound<int>(c => c.Id).Width(65).ReadOnly();
        columns.Bound<string>(c => c.FirstName).Width(100);
        columns.Bound<string>(c => c.LastName).Width(100);
        columns.Bound<string>(c => c.Street).Width(200);
        columns.Bound<string>(c => c.City).Width(100);
        columns.Bound<string>(c => c.Province).Width(50).Title("Prov");
        columns.Bound<string>(c => c.PostalCode).Width(80).Title("PC");
        columns.Bound(c => c.Latitude).Width(100).Title("Map").ReadOnly().ClientTemplate("<a href=\"https://maps.google.com/maps?q=<;#=Latitude#>,<#=Longitude#>&hl=en&ll=<#=Latitude#>,<#=Longitude#>&z=14&output=embed?iframe=true&width=640&height=480\" title=\"<#=FirstName#> <#=LastName#>\" rel=\"prettyPhoto\">Map</a>");
        columns.Command(commands =>
        {
            commands.Delete();
        }).Width(200);
    })
    /*.ClientEvents(events => events.OnLoad("initialize"))*/
    .DetailView(details => details.ClientTemplate(
            Html.Telerik().Grid<DonationView>()
                .Name("Donations_<#= Id #>")
                .Resizable(resizing => resizing.Columns(true))
            .Editable(editing => editing.Mode(GridEditMode.InCell))
                .DataKeys(d => d.Add<int>(a => a.Id).RouteKey("Id"))
                .Columns(columns =>
                {
                    columns.Bound(o => o.Id).Width(65).ReadOnly();
                    columns.Bound(o => o.Description).Width(400);
                    columns.Bound(o => o.Amount).Width(80);
                    columns.Bound(o => o.Date).Format("{0:d}");
                })
                /*.ClientEvents(events => events.OnRowDataBound("cause_onRowDataBound"))*/
                .DataBinding(dataBinding => dataBinding.Ajax()
                    .Select("_SelectDonationsHierarchyBatchEditing", "Home", new { ContactID = "<#= Id #>" })
                    .Update("_SaveDonationsHierarchyBatchEditing", "Home", new {ContactID = "<#= Id #>"})
                )
                .Pageable(paging => paging.PageSize(25))
                .Sortable()
                .ToolBar(commands => {
                    commands.Insert();
                    commands.SubmitChanges();
                })
                /*.Filterable()*/
                .ToHtmlString()
    ))
    .DataBinding(dataBinding => dataBinding.Ajax()
        .Select("_SelectContactsBatchEditing", "Home", new {FirstName = @ViewData["FirstName"], LastName = @ViewData["LastName"]})
        .Update("_SaveContactsBatchEditing", "Home", new {FirstName = @ViewData["FirstName"], LastName = @ViewData["LastName"]})
    )
    .Resizable(resizing => resizing.Columns(true))
    .Pageable(paging => paging.PageSize(25))
    .Editable(editing => editing.Mode(GridEditMode.InCell))
    .DataKeys(d => d.Add<int>(a => a.Id).RouteKey("Id"))
    .Scrollable(scrolling => scrolling.Height(580))
    .ToolBar(commands => {
        commands.Insert();
        commands.SubmitChanges();
    })
    .Sortable()

And the scripts section, located below the grid on my view.

@section scripts{

    <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>

    <!-- 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>

}

I can't for the life of me get it to work.

I also tried to implement a basic hardcoded link in the page to see if that would work, but alas it does not.

<a href="https://maps.google.com/maps?q=-34.397,150.644&hl=en&ll=-34.397,150.644&z=14&output=embed?iframe=true&width=640&height=480" title="Peter Pan" rel="prettyPhoto">Map</a>

also just clicks through to the google maps webpage.

When I load up Firebug console, I'm getting this error: prettyPrint is not defined. (see image)

http://i.stack.imgur.com/A6i7T.png

It seems to correspond with the OnDocumentReady() method call in my script registrar above. When I take that out, the error disappears but I still do not get the desired results.

I've loaded all of the external resources in the same order as on the hardcoded html page that works.
Please, can someone point me in the right direction on this? Thank you.

[M M]

Nobody has any idea?