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
– Sequenzia, Commented May 14, 2013 at 16:24

Beetroot-Beetroot · Accepted Answer · 2013-05-14 19:49:24Z

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.

Community · Accepted Answer · 2017-05-23 12:01:31Z

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, 2017 at 12:01

CommunityBot

11 silver badge

answered May 14, 2013 at 16:07

MikeB

2,4721 gold badge16 silver badges24 bronze badges

1 Comment

Sequenzia Over a year ago

I tried loading it like that but it's doing the same thing. Just a blank page in the dialog windows. Thanks!

Sébastien Renauld · Accepted Answer · 2013-05-14 16:07:16Z

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, 2013 at 16:07

Sébastien Renauld

19.8k2 gold badges51 silver badges69 bronze badges

13 Comments

Sequenzia Over a year ago

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!

Sébastien Renauld Over a year ago

How blank is the page? Remember, you need to move ALL the script tags in the body. This includes the google maps API loader.

Sequenzia Over a year ago

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.

Sébastien Renauld Over a year ago

"completely blank page" - is your div and your two script tags somewhere in your dialog box?

Sébastien Renauld Over a year ago

Also, in what order, if they are. Are you getting any JS errors on the console?

|

Collectives™ on Stack Overflow

Google Maps JavaScript API inside of jQuery Dialog Window

3 Answers 3

Comments

1 Comment

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related