无法使用 jquery 加载谷歌地图答案

【问题标题】：Can not load google map with jquery无法使用 jquery 加载谷歌地图
【发布时间】：2014-02-08 13:32:48
【问题描述】：

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

这里是页面的链接：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: 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>

【问题讨论】：

你应该在你的代码中放置一些断点来找出哪些部分没有工作。
@Andy 我已经在代码中应该进行操作的地方添加了 cmets
你有两个地方的地图处理代码。一个在索引文件中，另一个在 kontakt.html

标签： javascript jquery html google-maps

【解决方案1】：

我所做的描述：

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

<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;
}

之后，地图上的线条变得很奇怪。

希望这会有所帮助。

【讨论】：

非常感谢！困扰了我好几天！有什么方法可以从 css 中排除地图？
我不知道。我对 css 和样式的了解不太好。但是注释掉该css文件的某些部分似乎.body .home .section div行开始产生问题。很可能还有其他几行。