jQWidgets Forums

Tagged: Google Maps, jqxTabs, map, maps, tab, Tabs

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

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

Author

Google Maps Posts

June 14, 2015 at 5:37 am Google Maps #72442

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

June 15, 2015 at 4:46 am 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/

June 17, 2015 at 7:29 am Google Maps #72619

cdeslatte

Participant

Thanks for the response.

Author

Posts

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

You must be logged in to reply to this topic.