jqueryjquery-mobilemobilegoogle-maps-api-3jquery-mobile-popup

Maps marker link to JQueryMobile dialog

Here's my question: i would like that when you click on the marker you dont see the infowindow (i know how to do it) but you see another page shown as a dialog (http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/page-dialogs.html) or a popup (http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/index.html#&ui-state=dialog)in jquery mobile, i tried a lot of solutions but it is not working.

Here's the sample code:

<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Info windows</title>
        <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>
            function initialize() {
                var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
                var mapOptions = {
                    zoom: 4,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }

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

                var contentString = 'something html code';

                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'Uluru (Ayers Rock)'
                });
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map, marker);
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>

    <body>
        <div id="map-canvas"></div>
    </body>

</html>
Solution

  • I have added a sample example. When you click on the marker, then the dialog page appears. The workaround is to use an invisible anchor which opens the dialog and click it through JavaScript.

    <!DOCTYPE html>
<html>

    <head>
        <title>Google Map Dialog</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script>
            function initialize() {
                var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278),
                    myOptions = {
                        zoom: 10,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        center: mapCenter
                    },
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                var marker = new google.maps.Marker({
                    position: mapCenter,
                    map: map,
                    title: 'Stockholm'
                });

                google.maps.event.addListener(marker, 'click', function () {
                    $('#dialog-anchor').click();
                });
            }

            $(document).on("pageinit", "#home-page", function () {
                initialize();
            });
        </script>
    </head>

    <body>
        <!-- /page -->
        <div data-role="page" id="home-page">
            <!-- /header -->
            <div data-role="header" data-theme="c">
                 <h1>Google Map Dialog</h1>
            </div>
            <!-- /content -->
            <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <div id="map_canvas" style="height:300px;"></div>   
                <a href="#generic-dialog" id="dialog-anchor" style="display:none" data-rel="dialog">Open dialog</a>
            </div>
        </div>
        <!-- /page -->
        <div data-role="page" id="generic-dialog">
            <!-- /header -->
            <div data-role="header" data-theme="d">
                 <h1>Generic Dialog</h1>
            </div>
            <!-- /content -->
            <div data-role="content" data-theme="c">
                 <h1>Dialog</h1>
                 <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
            </div>
        </div>
    </body>

</html>

    I hope this helps.