GoogleMaps標記不起作用

Question

我試圖在網站上放置三個Google地圖標記，但它們不起作用。我無法弄清楚爲什麼。我再次檢查了幾次，但我是新手，我找不到問題。

這裏是我的JS代碼

<!-- Google Maps JS --> 
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> 

<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 

<script type="text/javascript"> 
    function initialize() { 

     //Locations Coordinates 
     var myLatlngBusto = new google.maps.LatLng(45.6084,8.850165); 
     var myLatlngMagnago = new google.maps.LatLng(45.5808394,8.850165); 
     var myLatlngBienate = new google.maps.LatLng(51.520614,-0.121825); 

     //Options List 
     var mapOptionsBusto = { 
      zoom: 15, 
      center: myLatlngOH, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeControl: 0 
     } 

     var mapOptionsMagnago = { 
      zoom: 15, 
      center: myLatlngCA, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeControl: 0 
     } 

     var mapOptionsBienate = { 
      zoom: 15, 
      center: myLatlngUK, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeControl: 0 
     } 

     //Maps Variables 
     var mapBusto = new google.maps.Map(document.getElementById('map-Busto'), mapOptionsBusto); 
     var mapMagnago = new google.maps.Map(document.getElementById('map-Magnago'), mapOptionsMagnago); 
     var mapBienate = new google.maps.Map(document.getElementById('map-Bienate'), mapOptionsBienate); 

     //Markers List 
     var markerBusto = new google.maps.Marker({ 
      position: myLatlngBusto, 
      map: mapBusto, 
      title: 'Busto Arsizio, via Dante Alighieri, 5' 
     }); 

     var markerMagnago = new google.maps.Marker({ 
      position: myLatlngMagnago, 
      map: mapMagnago, 
      title: 'Magnago, via Goffredo Mameli, 9' 
     });  

     var markerBienate = new google.maps.Marker({ 
      position: myLatlngBienate, 
      map: mapBienate, 
      title: 'Bienate (fraz. Magnago), Piazzale del Tricolore' 
     }); 

    } 
</script> 

而且我的html代碼：

<div class="col-md-5"> 
       <p class="dark-section"><i><strong>Busto Arsizio</strong></i>, via Dante Alighieri 5<br/>Palestra scuola media G.A.Bossi</p><br/> 
       <p class="dark-section"><span>ADULTI:</span><br/>lunedì e giovedì<br/>Inizio ore 20.30, fine ore 22.00</p><br/> 
       <p class="dark-section"><span>BAMBINI:</span><br/>mercoledì e venerdì<br/>Inizio ore 17.00, fine ore 18.30</p> 
      </div> 

      <div class="col-md-7"> 
       <a href="https://www.google.it/maps/place/Via+Dante+Alighieri,+5,+21052+Busto+Arsizio+VA/@45.6084,8.850165,17z/data=!3m1!4b1!4m2!3m1!1s0x47868b8f5fcdbda1:0xc536e6f9f778dea" target="_blank"><div id="map-Busto"></div></a> 
      </div> 

      <!-- Divider --> 
      <div class="col-md-12"> 
       <div class="hr5" style="margin-top:20px;margin-bottom:20px;"></div> 
      </div> 

      <div class="col-md-5"> 
       <br/> 
       <p class="dark-section"><i><strong>Magnago</strong></i>, via Goffredo Mameli 9<br/>Palestra scuola elementare Ada Negri</p><br/> 
       <p class="dark-section"><span>ADULTI:</span><br/>martedì e venerdì<br/>inizio ore 21.00, fine ore 23.00</p><br/> 
      </div> 

      <div class="col-md-7"> 
       <a href="https://www.google.it/maps/place/Via+Goffredo+Mameli,+9,+20020+Magnago+MI/@45.5808394,8.8014125,17z/data=!3m1!4b1!4m2!3m1!1s0x47868adf70308f8d:0x9373e8e46d562c9f" target="_blank"><div id="map-Magnago"></div></a> 
      </div> 

      <!-- Divider --> 
      <div class="col-md-12"> 
       <div class="hr5" style="margin-top:20px;margin-bottom:20px;"></div> 
      </div> 

      <div class="col-md-5"> 
       <br/> 
       <p class="dark-section"><i><strong>Bienate (fraz. Magnago)</strong></i>, Piazzale del Tricolore<br/>Palestra scuola elementare Giacomo Leopardi</p><br/> 
       <p class="dark-section"><span>BAMBINI:</span><br/>lunedì e giovedì<br/>Inizio ore 18.30, fine ore 20.00</p><br/> 
      </div> 

      <div class="col-md-7"> 
       <a href="https://www.google.it/maps/place/Piazza+Tricolore,+20020+Magnago+MI/@45.5778806,8.8173467,17z/data=!3m1!4b1!4m2!3m1!1s0x47868b3c7573abc9:0xd99dc1eade985c9c" target="_blank"><div id="map-Bienate"></div></a> 
      </div> 

在這裏，您可以登錄網站頁面上的結果：http://westexperiments.altervista.org/index.html

那麼，如何解決這些谷歌地圖標記？

Answer 1

你有幾個問題：

• 功能initialize沒有被調用，所以地圖不會生成。他們不存在，將停止生成的地圖 - 這可以在窗口負荷使用google.maps.event.addDomListener(window, 'load', initialize);
• 您正在使用的變量myLatlngOH，myLatlngCA和myLatlngUK到中心的地圖調用。我認爲這應該是myLatlngBusto，myLatlngMagnago和myLatlngBienate代替

function initialize() { 
 
    //Locations Coordinates 
 
    var myLatlngBusto = new google.maps.LatLng(45.6084, 8.850165); 
 
    var myLatlngMagnago = new google.maps.LatLng(45.5808394, 8.850165); 
 
    var myLatlngBienate = new google.maps.LatLng(51.520614, -0.121825); 
 

 
    //Options List 
 
    var mapOptionsBusto = { 
 
     zoom: 15, 
 
     center: myLatlngBusto, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     mapTypeControl: 0 
 
    } 
 

 
    var mapOptionsMagnago = { 
 
     zoom: 15, 
 
     center: myLatlngMagnago, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     mapTypeControl: 0 
 
    } 
 

 
    var mapOptionsBienate = { 
 
     zoom: 15, 
 
     center: myLatlngBienate, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     mapTypeControl: 0 
 
    } 
 

 
    //Maps Variables 
 
    var mapBusto = new google.maps.Map(document.getElementById('map-Busto'), mapOptionsBusto); 
 
    var mapMagnago = new google.maps.Map(document.getElementById('map-Magnago'), mapOptionsMagnago); 
 
    var mapBienate = new google.maps.Map(document.getElementById('map-Bienate'), mapOptionsBienate); 
 

 
    //Markers List 
 
    var markerBusto = new google.maps.Marker({ 
 
     position: myLatlngBusto, 
 
     map: mapBusto, 
 
     title: 'Busto Arsizio, via Dante Alighieri, 5' 
 
    }); 
 

 
    var markerMagnago = new google.maps.Marker({ 
 
     position: myLatlngMagnago, 
 
     map: mapMagnago, 
 
     title: 'Magnago, via Goffredo Mameli, 9' 
 
    }); 
 

 
    var markerBienate = new google.maps.Marker({ 
 
     position: myLatlngBienate, 
 
     map: mapBienate, 
 
     title: 'Bienate (fraz. Magnago), Piazzale del Tricolore' 
 
    }); 
 

 
} 
 

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

div { 
 
    height: 200px; 
 
    width: 200px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&.js"></script> 
 
<div id="map-Busto"></div> 
 
<div id="map-Magnago"></div> 
 
<div id="map-Bienate"></div>

Answer 2

它看起來像你不觸發initialize（）。

添加這一點，在你的腳本（在線例子線121）的底部：

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