使用jQuery在iframe中顯示多個地圖

我想創建一個聯繫我們頁面的引導框架，我有一行分爲兩列。在左側，我有一個包含加載谷歌地圖的iframe的列。在右側，我有一個包含4個辦公室地址的列。默認情況下，iframe默認加載總部地圖。使用jQuery在iframe中顯示多個地圖

我希望能夠點擊其中一個辦公室和iframe內容更改以顯示相關的映射信息。

在頁面上的HTML如下： -

<section id="contact-info"> 
    <div class="center">     
     <h2>How to Reach Us?</h2> 
     <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> 
    </div> 
    <div class="gmap-area"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-5 text-center"> 
        <div class="gmap"> 
         <iframe id="gmaps" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=JoomShaper,+Dhaka,+Dhaka+Division,+Bangladesh&amp;aq=0&amp;oq=joomshaper&amp;sll=37.0625,-95.677068&amp;sspn=42.766543,80.332031&amp;ie=UTF8&amp;hq=JoomShaper,&amp;hnear=Dhaka,+Dhaka+Division,+Bangladesh&amp;ll=23.73854,90.385504&amp;spn=0.001515,0.002452&amp;t=m&amp;z=14&amp;iwloc=A&amp;cid=1073661719450182870&amp;output=embed"></iframe> 
        </div> 
       </div> 

       <div class="col-sm-7 map-content"> 
        <ul class="row"> 
         <li class="col-sm-6"> 
          <address> 
           <h5 id="office_01">Head Office</h5> 
          </address> 

          <address> 
           <h5 id="office_02">Office 2</h5> 
          </address> 
         </li> 


         <li class="col-sm-6"> 
          <address> 
           <h5 id="office_03">Office 3</h5> 
          </address> 

          <address> 
           <h5 id="office_04">Office 4</h5> 
          </address> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> <!--/gmap_area --> 


<script src="js/mapmover.js"></script>

jQuery的如下： -

$(document).ready(function(){ 
    $("#office02").click(function(){ 
     $("#gmaps").attr("src","https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=JoomShaper,+Dhaka,+Dhaka+Division,+Bangladesh&amp;aq=0&amp;oq=joomshaper&amp;sll=37.0625,-95.677068&amp;sspn=42.766543,80.332031&amp;ie=UTF8&amp;hq=JoomShaper,&amp;hnear=Dhaka,+Dhaka+Division,+Bangladesh&amp;ll=23.73854,90.385504&amp;spn=0.001515,0.002452&amp;t=m&amp;z=14&amp;iwloc=A&amp;cid=1073661719450182870&amp;output=embed"); 
    }); 
});

理想我想活躍的地圖，而不是靜態的圖像，但我得到的是一個空白的框。如果我將iframe的「src」替換爲正常的網頁，它就可以工作。我猜這是與谷歌地圖加載到頁面的方式有關，但這超出了我的正常範圍，因爲我對jQuery知之甚少。

我最初使用的html的，而不是在jQuery的.attr嘗試，但它似乎不喜歡「的源，這是有道理的......

任何人有任何意見或例子我可以看？

來源

2015-05-15 Nemtex

到目前爲止，這是不可能實現你試圖只需使用的iframe嵌入谷歌地圖。你要找的是google maps javascript api v3做的。從那裏的功能setCenter()可能是你在找什麼，如果你試圖通過設置點擊監聽器來與地圖進行交互。希望這有助於您！

來源

2015-05-15 16:20:58

我會研究這個。實際上，這聽起來像是一個更好的處理問題的方法。感謝您指點我正確的方向 – Nemtex

使用jQuery在iframe中顯示多個地圖

回答

相關問題