無法使用jQuery加載谷歌地圖

Question

我想用jQuery加載谷歌地圖。 我要加載的地圖位於kontakt.html文件中，該文件要從div內的index.html加載，我加載文本內容，但該地圖不會初始化。 我嘗試了一切，將initialize函數放在了幾個不同的地方，但仍然沒有結果。 我究竟做錯了什么？ 請幫忙！

這是頁面的鏈接：頁面

這是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: viva@du.t-com.hr<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>

Answer 1

我所做的描述：

我從index.html（第1頁）中刪除了用於地圖處理的代碼，並進行了移動

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

我不得不注釋掉loadScript()函數，因為有消息說Google 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;
}

之后，地圖上的線條變得怪異。

希望這可以幫助。

無法使用jQuery加載谷歌地圖

問題描述

1 個解決方案

解決方案1
1 已采納 2014-02-08 15:58:50

無法使用jQuery加載谷歌地圖

問題描述

1 個解決方案

解決方案1 1 已采納 2014-02-08 15:58:50

解決方案1
1 已采納 2014-02-08 15:58:50