无法用jquery加载谷歌地图

我想用jquery加载谷歌地图。我想要加载的地图是在我想从我的index.html div中加载的kontakt.html文件中，我加载了文本内容，但地图不会初始化。我尝试了一切，我已经将初始化函数放在了几个不同的点上，但仍然没有结果。我究竟做错了什么？请帮忙！无法用jquery加载谷歌地图

这里是链接到页面：The page

这里是index.html的

<!DOCTYPE html> 
    <html> 
    <head> 
    <link rel="apple-touch-icon" href="images/appleicon.jpg"/>  
    <link rel="stylesheet" href="css/bjqs.css"> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="js/bjqs-1.3.min.js"></script> 

     <meta charset="UTF-8"> 
     <title>Viva d.o.o.</title> 
     <link rel="stylesheet" href="css/style.css" type="text/css"> 
     <link rel="stylesheet" href="css/button.css" type="text/css"> 

    <script> 

    $(document).ready(function(){ 

     $("#tajna button").click(function(){ 
     $("#tekst").load("tajnavode.html", function() { 
     $(this).hide().fadeIn('slow'); 
     }); 
     }); 
     $("#onama button").click(function(){ 
     $("#tekst").load("onama.html", function() { 
     $(this).hide().fadeIn('slow'); 
     }); 
     }); 
     $("#proizvodi button").click(function(){ 
     $("#tekst").load("proizvodi.html", function() { 
     $(this).hide().fadeIn('slow'); 
     }); 
     }); 

//here I call the page containing the map 
     $("#kontakt button").click(function(){ 
     $("#tekst").load("kontakt.html", function() { 
     $(this).hide().fadeIn('slow'); 
     }); 
     }); 

    }); 


    $(document).ready(function() { 

    function initialize() 
    { 

    var myCenter=new google.maps.LatLng(42.519306,18.362231); 
    var mapProp = { 
     center:myCenter, 
     zoom:18, 
     mapTypeId:google.maps.MapTypeId.HYBRID 
     }; 

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

    var marker=new google.maps.Marker({ 
     position:myCenter, 
     icon:'images/marker.png', 
     animation: google.maps.Animation.BOUNCE 
     }); 

    marker.setMap(map); 
    } 

    function loadScript() 
    { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; 
     document.body.appendChild(script); 
    } 

    window.onload = loadScript; 

    google.maps.event.addDomListener(window, 'load', initialize); 

    }); 
    </script> 

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> 
    </script> 




    </head> 
    <body> 

    <div class="body"> 
     <div class="home"> 


      <div class="screen" style="text-align: center; margin: 0 auto;"><div style="width:850px; height:300px; 
      background-position:left; background-repeat:no-repeat; margin:0 auto;"> 

      <div id="banner-fade"> 

      <ul class="bjqs"> 
       <li><img src="images/header.png"></li> 
       <li><img src="images/header1.png"></li> 
       <li><img src="images/header2.png"></li> 
      </ul> 
      </div> 

        <script class="secret-source"> 
      jQuery(document).ready(function($) { 

       $('#banner-fade').bjqs({ 

       height  : 300, 
       width  : 850, 
       responsive : true, 
       showcontrols : false, // show next and prev controls 
       centercontrols : false, // center controls verically 
       showmarkers : false, // Show individual slide markers 
       centermarkers : false, // Center markers horizontally 

       // interaction values 
       keyboardnav : false, // enable keyboard navigation 
       hoverpause : false, // pause the slider on hover 

       // presentational options 
       usecaptions : false, // show captions for images using the image title tag 
       randomstart : false, // start slider at random slide 

       }); 

      }); 
      </script> 
      </div> 
      </div> 
      <div class="nav" style="width:700px; height:50px; padding-left:150px; margin:0 auto;"> 

       <div id="onama"><button>O nama</button></div> 
       <div id="tajna"><button>Tajna vode</button></div> 
       <div id="proizvodi"><button>Proizvodi</button></div> 
       <div id="kontakt"><button>Kontakt</button></div> 

      </div> 



//here is the div where the map sould be loaded 

     <div id="tekst" class="section" > 
       <h1>O nama</h1> 
        <p>Viva d.o.o. nalazi se na jugu Republike Hrvatske u blizini Dubrovnika, točnije u srcu Konavala. Ime Konavala potječe od latinske riječi canalis, što znači kanal (kanali za navodnjavanje). I danas se vide ostaci tih kanala (vodovoda) iz Rimskog doba koji su vodu iz istočnog dijela Konavala vodili do povijesnog Epidaurusa.</p> 
        <p>Kako svoju plodnost konavosko polje zahvaljuje bogatsvu vode, nije čudo da Viva d.o.o. nastavje upravo ovdje, pogotovo ako se zna da je ovdašnja voda po kvaliteti visoko rangirana.</p> 
        <p>Viva d.o.o. nastaje polako. Nakon dugotrajnog čekanja potrebne dokumentacije za izgradnju punionice, prvi bageri i prve mine krenule su u rasčišćavanje terena na proljeće 2001. godine, da bi se gradnja objekta završila 2003., proizvodnja započinje 2004. godine. Prve boce vode Viva svoj put do krajnjeg konzumenta započele su krajem proljeća 2004. godine. U početku su to bile samo PET boce od 1,5L i 0,5L, a danas, tu su i PET bidoni od 5L, galoni od 18,9L, te staklene boce od 0,25L i 0,75L.</p> 
        <p>Daljnji tijek razvoja Viva-e teško je sa sigurnošću prognozirati, no s razlogom se s puno optimizma gleda na budućnost jer se konstantno bilježi zavidan rast prodaje.</p> 
     </div> 
     </div> 
    </div> 
     <div class="footer1" style="color: white; font-family: Verdana, Geneva, sans-serif; font-size: 14px;"> 
     <div class="footer" style="width: 850px; margin: 0 auto; text-align: center;"> 
      <div style="float:left;margin-top:15px; width:220px"> 
     <a href="http://www.vivawater.hr"> <img src="images/logotrans.png" alt="Viva d.o.o." width="111" height="39" style="border:0px;" /></a> 
      <br /> 
      Viva d.o.o.<br /> 
      20215 Gruda<br /> 
    Dubrovnik - Croatia<br /><br /> 
      </div> 
      <div style="float: left; width: 190px; margin-top: 15px;"> Gruda bb 
    <br /> 
    20215 Gruda<br /> 
    <br /> 

    Tel: + 385 20 791 044<br /> 
    Tel: + 385 20 791 043<br /> 
    Fax: +385 20 791 043<br /> 
    E-Mail: [email protected]<br /> 
    <br /> 
      </div> 

      <div style="float: left; margin-top: 15px; width: 220px;"> 


    Trgovački sud u Dubrovniku<br /> 
    OIB: 98746761193<br />IBAN: HR7223600001101654846<br /> MBS: 090002886<br /> 
    Temeljni kapital: 22.200,00kn<br /><br /> 
    <br /> 

      </div> 


      <div style="float: left; width: 70px; margin-top: 15px; text-align: center;"> 



    <a target="_blank" href="https://www.facebook.com/vivawater"><img style="border:0px;" src="images/face.png" alt="Viva facebook page" /></a> &nbsp;&nbsp;&nbsp; </div> 


      </div> 

    </div> 

    </body> 
    </html>

这里是kontakt.html

//this page works if you open it separately, but if called through the jquery load the map does not show 
    <!doctype html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Kontakt</title> 


    <script> 




    function initialize() 
    { 

    var myCenter=new google.maps.LatLng(42.519306,18.362231); 
    var mapProp = { 
     center:myCenter, 
     zoom:18, 
     mapTypeId:google.maps.MapTypeId.HYBRID 
     }; 

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

    var marker=new google.maps.Marker({ 
     position:myCenter, 
     icon:'images/marker.png', 
     animation: google.maps.Animation.BOUNCE 
     }); 

    marker.setMap(map); 
    } 

    function loadScript() 
    { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; 
     document.body.appendChild(script); 
    } 

    window.onload = loadScript; 

    google.maps.event.addDomListener(window, 'load', initialize); 


    </script> 


    </head> 

    <body> 
    <h1>Kontakt</h1> 
        <p>Gruda bb</p> 
        <div id="googleMap" style="width:500px;height:380px;"></div> 

    </body> 
    </html>

来源

2014-02-08 digitale

你应该在你的代码中加入一些断点来找出哪些部分不工作。 – Andy

@Andy我已在代码中添加了有关应该进行的操作的地方的注释 – digitale

您在两个地方有地图处理代码。一个在索引文件中，另一个在kontakt.html –

我所做的说明：

我从index.html中删除了地图处理的代码（第1页）和移动

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> 
</script>

我不得不注释掉功能loadScript()因为当时，谷歌的API被列入两次消息。从kontakt.html代码没有启动，所以我改变了文件：显示

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Kontakt</title> 

</head> 

<body> 
<h1>Kontakt</h1> 
<p>Gruda bb</p> 
<div id="googleMap" style="width:500px;height:380px;"></div> 

<script> 

function initialize() { 
    console.log('init...'); 
    //loadScript(); 

    var myCenter = new google.maps.LatLng(42.519306,18.362231); 
    var mapProp = { 
     center:myCenter, 
     zoom:18, 
     mapTypeId:google.maps.MapTypeId.HYBRID 
    }; 

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

    var marker=new google.maps.Marker({ 
     position:myCenter, 
     icon:'images/marker.png', 
     animation: google.maps.Animation.BOUNCE 
    }); 

    marker.setMap(map); 
} 

function loadScript() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; 
    document.body.appendChild(script); 
} 

initialize(); 
//window.onload = loadScript; 

//google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

</body> 
</html>

现在的地图，但也有一些奇怪的线条在它。似乎css/style.css文件影响了一些造型。你可以看到，如果你注释掉那个CSS链接。

更新：页眉和页脚部分似乎没问题。身体的一部分似乎确定，直到

.body .home .section div { 
    float:right; 
    width:460px; 
}

之后变得怪异超过地图的线。

希望这会有所帮助。

来源

2014-02-08 15:58:50

非常感谢！这让我困扰了几天！有什么办法可以从css中排除地图吗？ – digitale

我不知道。我对css和造型的认识不太好。但注释掉那个css文件的某些部分，似乎''.body .home .section div'开始产生问题。最有可能的是其他一些线。 –

无法用jquery加载谷歌地图

回答

相关问题