This topic contains 2 replies, has 2 voices, and was last updated by  cdeslatte 8 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Google Maps Posts
  • Google Maps #72442

    cdeslatte
    Participant

    First let me say that your existing widgets are amazing and I have found them and the included examples to be very helpful in learning jquery. Are there any plans to implement a Google Maps widgets for use with jquery? If I missed a similar post I apologize in advance. Thanks for your time.

    CDeslatte

    Google Maps #72450

    Dimitar
    Participant

    Hello CDeslatte,

    It is easy to implement a Google Maps instance inside a jQWidgets control (such as jqxTabs). Here is an example we hope will be helpful to you:

    <!DOCTYPE html>
    <html>
    <head>
        <title id="Description">This demo shows how to add a Google Map in jqxTabs.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <style type="text/css">
            #map-canvas
            {
                width: 100%;
                height: 100%;
            }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                function initialize() {
                    var mapCanvas = document.getElementById('map-canvas');
                    var mapOptions = {
                        center: new google.maps.LatLng(29.979234, 31.134202),
                        zoom: 17,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    var map = new google.maps.Map(mapCanvas, mapOptions)
                }
    
                $('#jqxtabs').jqxTabs({ width: 600, height: 400,
                    initTabContent: function (tab) {
                        if (tab === 0) {
                            google.maps.event.addDomListener(window, 'load', initialize);
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <p style="font-family: Verdana;">
            Great Pyramid of Giza</p>
        <div id='jqxtabs'>
            <ul style='margin-left: 20px;'>
                <li>Map</li>
                <li>Information</li>
            </ul>
            <div>
                <div id="map-canvas">
                </div>
            </div>
            <div>
                The Great Pyramid of Giza (also known as the Pyramid of Khufu or the Pyramid of
                Cheops) is the oldest and largest of the three pyramids in the Giza Necropolis bordering
                what is now El Giza, Egypt. It is the oldest of the Seven Wonders of the Ancient
                World, and the only one to remain largely intact.</div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Google Maps #72619

    cdeslatte
    Participant

    Thanks for the response.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.