无法使用jQuery加载谷歌地图

Question

I want to load google maps with jquery. 我想用jQuery加载谷歌地图。 The map i want to load is in the kontakt.html file which i want to load from my index.html inside a div, i load the text content, but the map wont initialize. 我要加载的地图位于kontakt.html文件中，该文件要从div内的index.html加载，我加载文本内容，但该地图不会初始化。 I tried everything, I've put the initialize function on several different spots, but still no result. 我尝试了一切，将initialize函数放在了几个不同的地方，但仍然没有结果。 What am I doing wrong? 我究竟做错了什么？ Please help! 请帮忙！

Here is the link to the page: The page 这是页面的链接：页面

Here is the index.html 这是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>

And here is the kontakt.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

Description of what I did: 我所做的描述：

I deleted the code for map handling from index.html (the 1st page) and moved 我从index.html（第1页）中删除了用于地图处理的代码，并进行了移动

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

I had to comment out function loadScript() because there was message that google apis were included two times. 我不得不注释掉loadScript()函数，因为有消息说Google API被包含两次。 Code from kontakt.html was not started, so I changed that file to: 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>

Now map appears but there are some strange lines over it. 现在出现了地图，但是上面有一些奇怪的线条。 It seems that some styling from css/style.css file influence that. 似乎css/style.css文件中的某些样式对此产生了影响。 You can see that if you comment out that css link. 您可以看到，如果您注释掉该CSS链接。

Update: header and footer section seems ok. 更新：页眉和页脚部分似乎还可以。 Body part seems ok until 身体部位似乎还可以，直到

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

After that becomes weird with lines over map. 之后，地图上的线条变得怪异。

Hope this helps. 希望这可以帮助。

无法使用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