Google Maps JavaScript API inside of jQuery Dialog Window

Question

I use Google Maps JavaScript API to display maps - https://developers.google.com/maps/documentation/javascript/

There are certain features in that API that I need that the static maps does not have.

So this page works fine as a stand alone page:

<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<script>


    function initialize() {

        // Set map coordinates with lat and lng
        var cord = new google.maps.LatLng(28.545078,-81.377196);

        // Set map options
        var mapOptions = {
            zoom: 15,
            center: cord,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Set map
        var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);


        // Set map marker
        var marker = new google.maps.Marker({
            position: cord,
            map: map,
            title: 'Test'
        });

    }


    // Load Map
    google.maps.event.addDomListener(window, 'load', initialize);



</script>

</head>

<body>
<div id="map-canvas"style="width:600px; height:500px"></div>
</body>

</html>

I need to get that page working inside of a jQuery Dialog Window.

I call the dialog and load the external page like this:

<script type="text/javascript">

    $(document).ready(function() {


        $("#cc").click(function(){

            $("#detailWin").dialog({
                autoOpen: false,
                modal: true,
                width:700,
                height:600,
                show: "fade",
                close: "fade",
                open: function ()
                {
                    $(this).load('p2.php');

                }
            });

            $('#detailWin').dialog("open");


        });

    });

</script>

So when I include the first set of code into the maps.php page it does not work. I realize that I do not want to include all the and tags on the included page. I've been trying it many different ways I cannot get the maps to load in the dialog window.

I've tried loading the maps API URL with jQuery $.getScript() but it's not helping.

If anyone can help me figure out the best way to get this working it would be greatly appreciated because I am stuck.

Thanks!

UPDATE:

I ended up getting it to work like this (this the second page maps.php):

<script type="text/javascript">

$(document).ready(function() {

    function initialize() {

        // Set map coordinates with lat and lng
        var cord = new google.maps.LatLng(28.545078,-81.377196);

        // Set map options
        var mapOptions = {
            zoom: 15,
            center: cord,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Set map
        var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

        // Set map marker
        var marker = new google.maps.Marker({
            position: cord,
            map: map,
            title: 'Test'
        });

    }

    // Load Map
    google.maps.event.addDomListener(window, 'load', initialize);


    initialize();

    });


 </script>


<div>

    <div id="map-canvas"style="width:600px; height:500px"></div>

</div>

No, pretty much every way I try it I just get a blank page and Firebug shows no errors. Thanks — Sequenzia, May 14 '13 at 16:24

score 2 · Answer 1 · answered May 14 '13 at 19:49

There are two important considerations here :-

Ensure that all the javascript/jQuery is included on the parent page. Don't try to deliver the js via AJAX.
Ensure that the map is initialized only when the canvas is visible. Initializing an invisible canvas is only ever partially successful.

Depending on exactly what you are trying to do, your code could be something like this :

$(document).ready(function() {
    var $detailWin,
        dialogInitialized,
        map;

    function getDialogContent() {
        if(dialogInitialized) return;
        dialogInitialized = true;//Well, at least initializing.
        $.get('p2.php').done(function(html) {
            $detailWin.html(html);
            var cord = new google.maps.LatLng(28.545078, -81.377196);
            var mapOptions = {
                zoom: 15,
                center: cord,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            var marker = new google.maps.Marker({
                position: cord,
                map: map,
                title: 'Test'
            });
        }).error(function(jqXHR, textStatus, errorThrown) {
            $detailWin.text(textStatus);
        });
    }

    $detailWin = $("#detailWin").dialog({
        autoOpen: false,
        modal: true,
        width: 700,
        height: 600,
        show: "fade",
        close: "fade",
        open: getDialogContent
    });

    $("#cc").on('click', function() {
        $detailWin.dialog("open");
    });
});

Notes :

Ensure that p2.php, delivers an HTML fragment including the map-canvas, but no <head> or <body> tags and definitely no javascript.
The code above performs a one-off initialization of the dialog (including the map). It will be slightly different if you want to reload the dialog (or some aspect of it such as a new set of markers) every time the dialog is opened.

score 1 · Answer 2 · edited May 23 '17 at 12:01

1

Check out this blog post from Nemikor, which should do what you want.

http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

Basically, before calling 'open', you 'load' the content from the other page first.

jQuery('#dialog').load('path to my page').dialog('open');

Source

edited May 23 '17 at 12:01

Community

1
1

answered May 14 '13 at 16:07

MikeB

2,402
1
15
24

I tried loading it like that but it's doing the same thing. Just a blank page in the dialog windows. Thanks! – Sequenzia May 14 '13 at 16:29

score 0 · Answer 3 · answered May 14 '13 at 16:07

0

If your page is as simple as that, consider generating it using pure JS. If not, if you have to use the load function, put your JS scripts in the body of your page2 and using $.load("page2.php body")

P.S: consider using JS to generate the map rather than using load. This will also allow you to wrap your code in a neat plug-in for your codebase rather than having duplicated code.

answered May 14 '13 at 16:07

Sébastien Renauld

19,203
2
46
66

The page ultamitly is not that simple. There's a lot more going on but I was trying to keep it simple for the question. So I don't think I can do it all in pure JS. I also tried moving the JS Scripts to the body and loading it like this - `$.load("page2.php body")' but it's not doing anything. Just a blank page in the dialog also. Thanks! – Sequenzia May 14 '13 at 16:28
How blank is the page? Remember, you need to move **ALL** the script tags in the body. This includes the google maps API loader. – Sébastien Renauld May 14 '13 at 16:31
Inside the dialog box it's just a completely blank page. I can use firebug to see that page2 is loading and when I look at the response I see all the JS code. I am not sure how to make this work. Thanks for the help. – Sequenzia May 14 '13 at 16:35
"completely blank page" - is your div and your two script tags somewhere in your dialog box? – Sébastien Renauld May 14 '13 at 16:37
Also, in what order, if they are. Are you getting any JS errors on the console? – Sébastien Renauld May 14 '13 at 16:37
The page in the dialog is completely blank. If I look at the source with firebug I do see the JS Scripts and the div tag. – Sequenzia May 14 '13 at 16:40
I have first, then the script with the function initialize() next. Then the div tag. No JS console errors at all – Sequenzia May 14 '13 at 16:42
@Sequenzia: in the actual dialog? IF so, in what order and are you getting a JS TypeError in your console? Remember, the JS tags must be in the same order as on your former page. – Sébastien Renauld May 14 '13 at 16:43
Okay. Next step: do you have **one and only one** #cc element for the click event? Get rid of the document.ready event registration, you don't need it anymore. Check all your IDs and make sure everything fits. – Sébastien Renauld May 14 '13 at 16:45
Yes, I only have #cc element and the rest of the page checks out fine – Sequenzia May 14 '13 at 17:01
I know what the problem is, actually. It's a Google maps issue. You need to load the Google Maps API **Before** the DOM ready event. The simple option is to load the google maps API on every page. The other option is more complicated - read up on how people bypassed that issue for AMD loaders. I'm on a tablet at the moment, so I cannot check my production code for this specific issue. – Sébastien Renauld May 14 '13 at 17:04
You are right about it being a timing issue. As a test I loaded the Google API from page1 then on page2 I created a new click() function that runs the initialize() function. It works that way when I click it. I still need to figure out a good way to load it without the click. Thanks – Sequenzia May 14 '13 at 19:29
what is wrong with using `setInterval` instead of a double click? You can then unset the setInterval with `clearInterval` whenever your map is done rendering. – Sébastien Renauld May 14 '13 at 19:31

Google Maps JavaScript API inside of jQuery Dialog Window

3 Answers3