Question

我正在使用HTML中的一些自定义标记加载Google Map。但是，加载页面时，地图会变灰。除了灰色的盒子，它工作得很好，因为我可以在窗口框内移动，当我最大化地图并再次最小化时，地图就像它应该的那样。

我在网上看到它可能是由于bootstrap 3而且以下代码将有助于解决问题。但我一直在谷歌地图脚本周围添加此代码，但它确实解决了这个问题。这是解决方案吗？我应该在哪里添加这个？

$(window).resize(function () { 
google.maps.event.trigger(map, 'resize');   
});

我的HTML代码如下，加载地图的脚本位于底部。

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title>Tagora.travel</title>

<!-- Fonts -->
<!-- Default stylesheets-->
<link href="assets/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Template specific stylesheets-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Volkhov:400i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">

<link href="assets/lib/components-font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/lib/et-line-font/et-line-font.css" rel="stylesheet">

<!-- Main stylesheet and color file-->
<link href="assets/css/style.css" rel="stylesheet">
<link id="color-scheme" href="assets/css/colors/default.css" rel="stylesheet">
 </head>

 <body data-spy="scroll" data-target=".onpage-navigation" data-offset="60">
<main>
  <!-- Loading Gif-->
  <div class="page-loader">
    <div class="loader">Loading...</div>
  </div>

  <!-- navbar-->
  <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">

      <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#custom-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="Tagora.travel.html"><img src="assets/images/tagoralogo.png" alt="Tagora Logo"></a>

        <div id="search-form" >
            <form method="get" action="#">
              <input type="text" name="Search" value="Search" onFocus="if (this.value == 'Search') this.value = '';" onBlur="if (this.value == '') this.value = 'Search';" />
            </form>
          </div>
      </div>

      <div class="collapse navbar-collapse" id="custom-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="Tagora.travel.html">Home</a></li>
          <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Cities</a>
            <ul class="dropdown-menu">
              <li><a href="bali.html">Bali</a></li>
              <li><a href="#" >Bandung</a></li>
              <li><a href="#" >Komodo Islands</a></li>
              <li><a href="#" >Gili Islands</a></li>
              <li><a href="#" >Yogyakarta</a></li>
              <li><a href="#" >Nusa Tenggara</a></li>
            </ul>
          </li>
          <li><a href="aboutus.html" >About Us</a></li>
          <li><a href="contact.html" >Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>


<div class="main">
    <!-- About Us Picture with Quote-->

      <section id="modpictureitinerary" class="module-small bg-dark-60 shop-page-header" data-background="assets/images/bali.jpg">
        <div class="container">
          <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
              <h1 class="module-title font-alt">Bali</h1>
              <div class="module-subtitle font-serif">Bali is a living postcard, an Indonesian paradise that feels like a fantasy. Soak up the sun on a stretch of fine white sand, or commune with 
                the tropical creatures as you dive along coral ridges or the colorful wreck of a WWII war ship. On shore, the lush jungle shelters stone temples 
                and mischievous monkeys.</div>
            </div>
          </div>
        </div>
      </section>

     <!-- Specially Crafted Quote--> 

      <section class="module-itinerary">
        <div class="container">
          <div class="col-sm-3 col-md-2 col-lg-2">

            <div class="font-serif operator-name">
              Crafted by <br>
              <b><span class="large-text">Di Bali Tour</span></b><br>
              Est. Since 2008
            </div>

          </div>

          <div class="col-sm-3 col-md-2 col-lg-2">

            <div id="TA_cdsratingsonlynarrow572" class="TA_cdsratingsonlynarrow">
              <ul id="gUjYoJi" class="TA_links mnhoDbKF8">
              <li id="ps2SrlKHA" class="nLHVd5g">
              <a target="_blank" href="https://www.tripadvisor.com.sg/"><img src="https://www.tripadvisor.com.sg/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a>
              </li>
              </ul>

            </div>
          </div>
        </div>
      </section>

      <section class="module-itinerary">
        <div class="container">
          <div class="row mt-70">
            <div class="col-sm-12">
              <ul class="nav nav-tabs font-alt font-nav-tabs" role="tablist">
                <li class="active"><a href="#itinerary" data-toggle="tab">Itinerary</a></li>
                <li><a href="#data-sheet" data-toggle="tab">Inclusions & Exclusions</a></li>
                <li><a href="#reviews" data-toggle="tab">Reviews</a></li>
                <li><a href="#Location" data-toggle="tab">Locations</a></li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active" id="itinerary">
                  <h3><b>Best of Bali (Private Tour)</b></h3>
                  <h4>Want to see the best bits of Bali in just one day? This private full-day tour includes a visit to Batuan temple, the UNESCO-listed Tegalalang rice terraces and the Ubud Art Villages. 
                    That’s not all: you’ll also get chance to learn about Luwak coffee and other Balinese coffee and tea, jump into the Tegenungan waterfall and shop for hand-made Balinese arts and crafts. All that, plus hotel pick-up and private transportation!
                  </h4>

                  <h3><b>Highlights</b></h3>
                    <ul>
                      <li><h4>Full-day private ‘Best of Bali’ tour from Ubud</h4></li>
                      <li><h4>Visit Batuan temple and the Tegalalang rice terraces</h4></li>
                      <li><h4>Cool off with a swim at Tegenungan waterfall</h4></li>
                      <li><h4>Tour a coffee plantation</h4></li>
                      <li><h4>Discover Balinese art and handicrafts in the Ubud Art Villages</h4></li>
                      <li><h4>Great value tour includes hotel pick-up and round-trip transport</h4></li>
                      <li><h4>This private tour can be customized to your interests</h4></li>
                    </ul> 

                  <h3><b>What You Can Expect</b></h3>
                  <h4>Meet your driver at your Bali hotel and begin your Best of Bali tour with a visit to Batuan Temple. Marvel at the beautiful Hindu temple as you learn its spiritual significance and points out the magnificent architecture and unique black palm roof. Next, visit Tegenungan Waterfall, where you can cool off with a swim beneath the falls or even brave a jump from the top of the 49-foot (15-meter) high falls. Continue north to Tegalalang to marvel at the UNESCO-listed rice terraces, one of Bali’s most photographed sights. Learn about the pioneering ‘subak’ system – the Balinese cooperative irrigation system – for which the terraces are known, as you admire the views over the rice paddies. After lunch (own expense), discover Indonesia’s world famous Luwak coffee at a local coffee plantation. Learn about the unusual method of producing the coffee, which involves the coffee berries being eaten and defecated by Asian palm civets, then collecting the part-digested beans from the forest floor. After sampling the other coffees and teas made at the plantation, perhaps opt to taste a Luwak coffee too (extra cost). In the afternoon, indulge your creative side with a visit to the Ubud Art Villages and discover the vibrant traditions of Balinese arts and handicrafts. Visit the woodcarving village of Mas, admire the fine Silver Filigree jewelry made in Celuk and watch a Batik painting demonstration in Tohpati Village. Finally, after an action-packed full-day itinerary, finish your tour with drop-off at your hotel.
                  </h4>

                </div>
                <div class="tab-pane" id="data-sheet">
                    <h3><b>Inclusions</b></h3>
                    <ul>
                      <li><h4>Hotel pickup and drop-off in Ubud, Canggu, Seminyak, Legian, Kuta, Tuban, Jimbaran, Sanur, Denpasar, Tanjung Benoa, or Nusa Dua area</h4></li>
                      <li><h4>Transport by private air-conditioned vehicle</h4></li>
                      <li><h4>English speaking driver (who will accompany you all day)</h4></li>
                      <li><h4>All entrance fees as per itinerary</h4></li>
                      <li><h4>Fuel fees</h4></li>
                      <li><h4>Taxes</h4></li>
                    </ul> 

                    <h3><b>Exclusions</b></h3>
                    <ul>
                      <li><h4>Food and drinks (available to purchase)</h4></li>
                      <li><h4>Gratuities (optional)</h4></li>
                      <li><h4>Personal expenses</h4></li>
                    </ul> 

                </div>
                <div class="tab-pane" id="reviews">
                    <div id="TA_selfserveprop109" class="TA_selfserveprop">
                        <ul id="SCyvxMFVI8X" class="TA_links HMIUYNM8Hl">
                        <li id="HH0xKeUSG" class="sXdLmWPfG">
                        <a target="_blank" href="https://www.tripadvisor.com.sg/"><img src="https://www.tripadvisor.com.sg/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a>
                        </li>
                        </ul>
                    </div>
                </div>

                <div class="tab-pane" id="Location">
                    <section id="map-section">
                        <div id="map" ></div>
                    </section>
                </div>
              </div>
            </div>
          </div>
    </div>
  </section>


</div> 
    <!-- Footer-->

    <hr class="divider-d">
    <footer class="footer bg-dark">
      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <p class="copyright font-alt">&copy; 2017&nbsp;<a href="index.html">Tagora.travel</a>, All Rights Reserved</p>
          </div>
          <div class="col-sm-6">
            <div class="footer-social-links"><a href="#"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-dribbble"></i></a><a href="#"><i class="fa fa-skype"></i></a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <div class="scroll-up"><a href="#totop"><i class="fa fa-angle-double-up"></i></a></div>
</main>

<!--  JavaScripts   -->
<script src="assets/lib/jquery/dist/jquery.js"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/lib/wow/dist/wow.js"></script>
<script src="assets/lib/isotope/dist/isotope.pkgd.js"></script>
<script src="assets/lib/imagesloaded/imagesloaded.pkgd.js"></script>
<script src="assets/lib/smoothscroll.js"></script>
<script src="assets/lib/magnific-popup/dist/jquery.magnific-popup.js"></script>
<script src="assets/lib/simple-text-rotator/jquery.simple-text-rotator.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
<script src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=572&amp;locationId=6894357&amp;lang=en_SG&amp;border=true&amp;display_version=2"></script>
<script src="https://www.jscache.com/wejs?wtype=selfserveprop&amp;uniq=109&amp;locationId=6894357&amp;lang=en_SG&amp;rating=false&amp;nreviews=4&amp;writereviewlink=true&amp;popIdx=false&amp;iswide=true
&amp;border=false&amp;display_version=2"></script>
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyAweoP_TE8ov0X6TsaozZdfWQLAvpJIQZQ"></script>
<script type="text/javascript">
  google.maps.event.trigger(map, 'resize');
  var locations = [
    ['Bali Coffee Plantation', -8.703186, 115.212971, 4],
    ['Ubud Art Market', -8.507060, 115.262597, 5],
    ['Tegenungan Waterfall', -8.575291, 115.288575, 3],
    ['Tegalalang Rice Terrace', -8.434040, 115.279257, 2],
    ['Batuan Temple', -8.581871, 115.276005, 1]
  ];

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng( -8.409518, 115.188916),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][1]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }

</script>


</html>

相关的CSS属性如下

#map-section {
position: relative;
height: 450px;
width: 100%;

}

#map {
height: 400px;
width: 450px;
overflow:visible;
}

Answer 1

以下小片段建议使用jQuery，但由于在与此问题相关的标签中没有引用jQuery，因此我在下面使用了vanilla javascript。

$(window).resize(function () { 
google.maps.event.trigger(map, 'resize');   
});

要使用Google resize方法，您需要通过window.onresize或window.addEventListener('resize'...来监听窗口调整大小事件

<script type="text/javascript">

  var locations = [
    ['Bali Coffee Plantation', -8.703186, 115.212971, 4],
    ['Ubud Art Market', -8.507060, 115.262597, 5],
    ['Tegenungan Waterfall', -8.575291, 115.288575, 3],
    ['Tegalalang Rice Terrace', -8.434040, 115.279257, 2],
    ['Batuan Temple', -8.581871, 115.276005, 1]
  ];

  var map = new google.maps.Map( document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng( -8.409518, 115.188916),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({
      position: new google.maps.LatLng( locations[i][1], locations[i][2] ),
      title:locations[i][0],/* assign the title - will be shown in infowindow onclick */
      map: map
    });

    google.maps.event.addListener( marker, 'click', function(event){
        infowindow.setContent( this.title );
        infowindow.open(map, this);
    }.bind( marker ) );/* bind event listener to this marker*/
  }

  /* bind an event listener to window resize to then trigger the google map resize method */
  window.addEventListener('resize',function(){
    google.maps.event.trigger( map, 'resize' );
  },false);

</script>

在评论出我无法提供的资产后，提供以下内容：

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title>Tagora.travel</title>

<!-- Fonts -->
<!-- Default stylesheets-->
<!--
<link href="assets/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-->


<!-- Template specific stylesheets-->
<link href="//fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Volkhov:400i" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">

<!--
<link href="assets/lib/components-font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/lib/et-line-font/et-line-font.css" rel="stylesheet">
-->


<!-- Main stylesheet and color file-->
<!--
<link href="assets/css/style.css" rel="stylesheet">
<link id="color-scheme" href="assets/css/colors/default.css" rel="stylesheet">
-->


 </head>

 <body data-spy="scroll" data-target=".onpage-navigation" data-offset="60">
<main>
  <!-- Loading Gif-->
  <div class="page-loader">
    <div class="loader">Loading...</div>
  </div>

  <!-- navbar-->
  <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">

      <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#custom-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="Tagora.travel.html"><img src="assets/images/tagoralogo.png" alt="Tagora Logo"></a>

        <div id="search-form" >
            <form method="get" action="#">
              <input type="text" name="Search" value="Search" onFocus="if (this.value == 'Search') this.value = '';" onBlur="if (this.value == '') this.value = 'Search';" />
            </form>
          </div>
      </div>

      <div class="collapse navbar-collapse" id="custom-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="Tagora.travel.html">Home</a></li>
          <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Cities</a>
            <ul class="dropdown-menu">
              <li><a href="bali.html">Bali</a></li>
              <li><a href="#" >Bandung</a></li>
              <li><a href="#" >Komodo Islands</a></li>
              <li><a href="#" >Gili Islands</a></li>
              <li><a href="#" >Yogyakarta</a></li>
              <li><a href="#" >Nusa Tenggara</a></li>
            </ul>
          </li>
          <li><a href="aboutus.html" >About Us</a></li>
          <li><a href="contact.html" >Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>


<div class="main">
    <!-- About Us Picture with Quote-->

      <section id="modpictureitinerary" class="module-small bg-dark-60 shop-page-header" data-background="assets/images/bali.jpg">
        <div class="container">
          <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
              <h1 class="module-title font-alt">Bali</h1>
              <div class="module-subtitle font-serif">Bali is a living postcard, an Indonesian paradise that feels like a fantasy. Soak up the sun on a stretch of fine white sand, or commune with 
                the tropical creatures as you dive along coral ridges or the colorful wreck of a WWII war ship. On shore, the lush jungle shelters stone temples 
                and mischievous monkeys.</div>
            </div>
          </div>
        </div>
      </section>

     <!-- Specially Crafted Quote--> 

      <section class="module-itinerary">
        <div class="container">
          <div class="col-sm-3 col-md-2 col-lg-2">

            <div class="font-serif operator-name">
              Crafted by <br>
              <b><span class="large-text">Di Bali Tour</span></b><br>
              Est. Since 2008
            </div>

          </div>

          <div class="col-sm-3 col-md-2 col-lg-2">

            <div id="TA_cdsratingsonlynarrow572" class="TA_cdsratingsonlynarrow">
              <ul id="gUjYoJi" class="TA_links mnhoDbKF8">
              <li id="ps2SrlKHA" class="nLHVd5g">
              <a target="_blank" href="https://www.tripadvisor.com.sg/"><img src="https://www.tripadvisor.com.sg/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a>
              </li>
              </ul>

            </div>
          </div>
        </div>
      </section>

      <section class="module-itinerary">
        <div class="container">
          <div class="row mt-70">
            <div class="col-sm-12">
              <ul class="nav nav-tabs font-alt font-nav-tabs" role="tablist">
                <li class="active"><a href="#itinerary" data-toggle="tab">Itinerary</a></li>
                <li><a href="#data-sheet" data-toggle="tab">Inclusions & Exclusions</a></li>
                <li><a href="#reviews" data-toggle="tab">Reviews</a></li>
                <li><a href="#Location" data-toggle="tab">Locations</a></li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active" id="itinerary">
                  <h3><b>Best of Bali (Private Tour)</b></h3>
                  <h4>Want to see the best bits of Bali in just one day? This private full-day tour includes a visit to Batuan temple, the UNESCO-listed Tegalalang rice terraces and the Ubud Art Villages. 
                    That’s not all: you’ll also get chance to learn about Luwak coffee and other Balinese coffee and tea, jump into the Tegenungan waterfall and shop for hand-made Balinese arts and crafts. All that, plus hotel pick-up and private transportation!
                  </h4>

                  <h3><b>Highlights</b></h3>
                    <ul>
                      <li><h4>Full-day private ‘Best of Bali’ tour from Ubud</h4></li>
                      <li><h4>Visit Batuan temple and the Tegalalang rice terraces</h4></li>
                      <li><h4>Cool off with a swim at Tegenungan waterfall</h4></li>
                      <li><h4>Tour a coffee plantation</h4></li>
                      <li><h4>Discover Balinese art and handicrafts in the Ubud Art Villages</h4></li>
                      <li><h4>Great value tour includes hotel pick-up and round-trip transport</h4></li>
                      <li><h4>This private tour can be customized to your interests</h4></li>
                    </ul> 

                  <h3><b>What You Can Expect</b></h3>
                  <h4>Meet your driver at your Bali hotel and begin your Best of Bali tour with a visit to Batuan Temple. Marvel at the beautiful Hindu temple as you learn its spiritual significance and points out the magnificent architecture and unique black palm roof. Next, visit Tegenungan Waterfall, where you can cool off with a swim beneath the falls or even brave a jump from the top of the 49-foot (15-meter) high falls. Continue north to Tegalalang to marvel at the UNESCO-listed rice terraces, one of Bali’s most photographed sights. Learn about the pioneering ‘subak’ system – the Balinese cooperative irrigation system – for which the terraces are known, as you admire the views over the rice paddies. After lunch (own expense), discover Indonesia’s world famous Luwak coffee at a local coffee plantation. Learn about the unusual method of producing the coffee, which involves the coffee berries being eaten and defecated by Asian palm civets, then collecting the part-digested beans from the forest floor. After sampling the other coffees and teas made at the plantation, perhaps opt to taste a Luwak coffee too (extra cost). In the afternoon, indulge your creative side with a visit to the Ubud Art Villages and discover the vibrant traditions of Balinese arts and handicrafts. Visit the woodcarving village of Mas, admire the fine Silver Filigree jewelry made in Celuk and watch a Batik painting demonstration in Tohpati Village. Finally, after an action-packed full-day itinerary, finish your tour with drop-off at your hotel.
                  </h4>

                </div>
                <div class="tab-pane" id="data-sheet">
                    <h3><b>Inclusions</b></h3>
                    <ul>
                      <li><h4>Hotel pickup and drop-off in Ubud, Canggu, Seminyak, Legian, Kuta, Tuban, Jimbaran, Sanur, Denpasar, Tanjung Benoa, or Nusa Dua area</h4></li>
                      <li><h4>Transport by private air-conditioned vehicle</h4></li>
                      <li><h4>English speaking driver (who will accompany you all day)</h4></li>
                      <li><h4>All entrance fees as per itinerary</h4></li>
                      <li><h4>Fuel fees</h4></li>
                      <li><h4>Taxes</h4></li>
                    </ul> 

                    <h3><b>Exclusions</b></h3>
                    <ul>
                      <li><h4>Food and drinks (available to purchase)</h4></li>
                      <li><h4>Gratuities (optional)</h4></li>
                      <li><h4>Personal expenses</h4></li>
                    </ul> 

                </div>
                <div class="tab-pane" id="reviews">
                    <div id="TA_selfserveprop109" class="TA_selfserveprop">
                        <ul id="SCyvxMFVI8X" class="TA_links HMIUYNM8Hl">
                        <li id="HH0xKeUSG" class="sXdLmWPfG">
                        <a target="_blank" href="https://www.tripadvisor.com.sg/"><img src="https://www.tripadvisor.com.sg/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a>
                        </li>
                        </ul>
                    </div>
                </div>

                <div class="tab-pane" id="Location">
                    <section id="map-section">
                        <div id="map" ></div>
                    </section>
                </div>
              </div>
            </div>
          </div>
    </div>
  </section>


</div> 
    <!-- Footer-->

    <hr class="divider-d">
    <footer class="footer bg-dark">
      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <p class="copyright font-alt">&copy; 2017&nbsp;<a href="index.html">Tagora.travel</a>, All Rights Reserved</p>
          </div>
          <div class="col-sm-6">
            <div class="footer-social-links"><a href="#"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-dribbble"></i></a><a href="#"><i class="fa fa-skype"></i></a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <div class="scroll-up"><a href="#totop"><i class="fa fa-angle-double-up"></i></a></div>
</main>

<!--  JavaScripts   -->
<!--
<script src="assets/lib/jquery/dist/jquery.js"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/lib/wow/dist/wow.js"></script>
<script src="assets/lib/isotope/dist/isotope.pkgd.js"></script>
<script src="assets/lib/imagesloaded/imagesloaded.pkgd.js"></script>
<script src="assets/lib/smoothscroll.js"></script>
<script src="assets/lib/magnific-popup/dist/jquery.magnific-popup.js"></script>
<script src="assets/lib/simple-text-rotator/jquery.simple-text-rotator.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
-->
<script src="//www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=572&amp;locationId=6894357&amp;lang=en_SG&amp;border=true&amp;display_version=2"></script>
<script src="//www.jscache.com/wejs?wtype=selfserveprop&amp;uniq=109&amp;locationId=6894357&amp;lang=en_SG&amp;rating=false&amp;nreviews=4&amp;writereviewlink=true&amp;popIdx=false&amp;iswide=true&amp;border=false&amp;display_version=2"></script>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAweoP_TE8ov0X6TsaozZdfWQLAvpJIQZQ"></script>


<style>
    #map{
    width:800px;
    height:600px;
    }
</style>
<script type="text/javascript">

  var locations = [
    ['Bali Coffee Plantation', -8.703186, 115.212971, 4],
    ['Ubud Art Market', -8.507060, 115.262597, 5],
    ['Tegenungan Waterfall', -8.575291, 115.288575, 3],
    ['Tegalalang Rice Terrace', -8.434040, 115.279257, 2],
    ['Batuan Temple', -8.581871, 115.276005, 1]
  ];

  var map = new google.maps.Map( document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng( -8.409518, 115.188916),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({
      position: new google.maps.LatLng( locations[i][1], locations[i][2] ),
      title:locations[i][0],/* assign the title - will be shown in infowindow onclick */
      map: map
    });

    google.maps.event.addListener( marker, 'click', function(event){
        infowindow.setContent( this.title );
        infowindow.open(map, this);
    }.bind( marker ) );/* bind event listener to this marker*/
  }

  /* bind an event listener to window resize to then trigger the google map resize method */
  window.addEventListener('resize',function(){
    google.maps.event.trigger( map, 'resize' );
  },false);

</script>
</html>

需要注意的一点是缺少关闭</body>标签！

谷歌地图的问题 - 灰色

1 个答案: