2014-02-12 52 views
1

目前,我有一個腳本,當您點擊「查看地圖」鏈接時打開Goog​​le地圖。這一切都在JQuery中完成。Javascript/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/

正如你可以在我的代碼中看到的,我試着撥打。點擊事件,並用我的代碼模擬,但幾個小時的工作後仍然不成功。

在此先感謝。

+2

您是否在等待DOM準備好?看起來'actuateLink'正在運行。 – reergymerej

回答

0

嘗試以編程方式單擊鏈接以打開地圖時,您所需要做的只是運行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);