載入事件中的Javascript / JQuery

Question

當前，我有一個腳本，當您單擊“查看地圖”鏈接時會打開一個Google Map。 這些都是在JQuery中完成的。

我正在嘗試對其進行重做，以便在頁面加載時立即打開地圖。 這並不一定是無縫的或完美的像素，但是我們需要的是無需單擊“查看地圖”鏈接即可彈出地圖。

下面是相關代碼：

<script type="text/javascript">
/* <![CDATA[ */
    jQuery.noConflict();
    (function($) {

        $(function() {

            // Map global vars
            var map;
            var marker;
            var center;

            // initialize Google Maps API
            function initMap() {

                // Define Map center
                center = new google.maps.LatLng('<?php echo $lat; ?>','<?php echo $long; ?>');

                // Define Map options
                var myOptions = {
                  'zoom': 10,
                  'center': center,
                  'mapTypeId': google.maps.MapTypeId.ROADMAP
                };

                // Load Map
                map = new google.maps.Map(document.getElementById('job_map'), myOptions);

                // Marker
                marker = new google.maps.Marker({ position: center, map: map, title: "<?php echo $title; ?>" });

            }

            // Slide Toggle
            $('a.toggle_map').click(function(){
                $('#share_form').slideUp();
                $('#apply_form').slideUp();
                if (!map) initMap();
                $('#job_map').slideToggle(function(){
                    google.maps.event.trigger(map, 'resize');
                    map.setCenter(center);
                });
                $('a.apply_online').removeClass('active');
                $(this).toggleClass('active');
                return false;
            });

        });
    })(jQuery);
/* ]]> */

function actuateLink(link)
    {
       var allowDefaultAction = true;

       if (link.click)
       {
          link.click();
          return;
       }
       else if (document.createEvent)
       {
          var e = document.createEvent('MouseEvents');
          e.initEvent(
             'click'     // event type
             ,true      // can bubble?
             ,true      // cancelable?
          );
          allowDefaultAction = link.dispatchEvent(e);           
       }

       if (allowDefaultAction)       
       {
          var f = document.createElement('form');
          f.action = link.href;
          document.body.appendChild(f);
          f.submit();
       }
}
actuateLink(document.querySelectorAll('.toggle_map'));
</script>

您可以在這里看到我在說什么的示例： http : //www.psychiatryjobs.io/jobs/seattle-attending-psychiatrist/

正如您在我的代碼中看到的那樣，我嘗試調用.click事件並用我的代碼進行模擬，但是經過幾個小時的工作仍然沒有成功。

提前致謝。

Answer 1

當您需要執行的所有操作都是運行initMap函數時，嘗試以編程方式單擊鏈接以打開地圖是很長的路要走。 在單擊偵聽器注冊之前或之后，您可以添加對initMap的調用嗎？

jQuery.noConflict();
(function($) {

    $(function() {

        // Map global vars
        var map;
        var marker;
        var center;

        // initialize Google Maps API
        function initMap() {

            // Define Map center
            center = new google.maps.LatLng('<?php echo $lat; ?>','<?php echo $long; ?>');

            // Define Map options
            var myOptions = {
              'zoom': 10,
              'center': center,
              'mapTypeId': google.maps.MapTypeId.ROADMAP
            };

            // Load Map
            map = new google.maps.Map(document.getElementById('job_map'), myOptions);

            // Marker
            marker = new google.maps.Marker({ position: center, map: map, title: "<?php echo $title; ?>" });

        }

        // Slide Toggle
        $('a.toggle_map').click(function(){
            $('#share_form').slideUp();
            $('#apply_form').slideUp();
            if (!map) initMap();
            $('#job_map').slideToggle(function(){
                google.maps.event.trigger(map, 'resize');
                map.setCenter(center);
            });
            $('a.apply_online').removeClass('active');
            $(this).toggleClass('active');
            return false;
        });

        //
        //show the map at start by default
        //
        if (!map) initMap();

    });
})(jQuery);