CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Sequenzia
Sequenzia

Reputation: 2381

Google Maps JavaScript API inside of jQuery Dialog Window

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>

Upvotes: 2

Views: 5883

Answers (3)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

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.

Upvotes: 2

MikeB
MikeB

Reputation: 2452

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

Upvotes: 1

S&#233;bastien Renauld
S&#233;bastien Renauld

Reputation: 19672

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.

Upvotes: 0

Related Questions