2014-06-13 46 views
0

我正試圖在Google Maps地圖上放置一些標記。我寫了下面的代碼。在Google Maps地圖上看不到標記

問題是我沒有看到任何這些標記。

我檢查了控制檯,沒有看到任何錯誤。

我在做什麼錯?

非常感謝。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
     <meta charset="utf-8"> 
     <title>Directions service</title> 
     <style> 
      html, body, #map-canvas { 
       height: 100%; 
       margin: 0px; 
       padding: 0px 
      } 
      #panel { 
       position: absolute; 
       top: 5px; 
       left: 50%; 
       margin-left: -180px; 
       z-index: 5; 
       background-color: #fff; 
       padding: 5px; 
       border: 1px solid #999; 
      } 
     </style> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
     <script>    
      var map; 
      var styles = [ 
       { 
        stylers: [ 
         {hue: "#00ffe6"}, 
         {saturation: -20} 
        ] 
       }, { 
        featureType: "road", 
        elementType: "geometry", 
        stylers: [ 
         {lightness: 100}, 
         {visibility: "simplified"} 
        ] 
       }, { 
        featureType: "poi", 
        elementType: "labels", 
        stylers: [ 
         {visibility: "off"} 
        ] 
       }, { 
        featureType: "transit", 
        elementType: "labels", 
        stylers: [ 
         {visibility: "off"} 
        ] 
       }, 
      ]; 


      function initialize() {     
       var home = new google.maps.LatLng(45.666396, 25.611569); 
       var mapOptions = { 
        zoom: 15, 
        center: home 
       } 
       map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
       map.setOptions({styles: styles}); 

      } 

      var json = [ 
           { 
        "title": "Triaj", 
        "lat": 45.67573, 
        "lng": 25.647464, 
        "description": "Test"     
       },        { 
        "title": "Baza MTTC", 
        "lat": 45.671123, 
        "lng": 25.640974, 
        "description": "Test"     
       },        { 
        "title": "RAT Brasov", 
        "lat": 45.669687, 
        "lng": 25.638461, 
        "description": "Test"     
       }       ]; 

      for (var i = 0, length = json.length; i < length; i++) { 
       var data = json[i], latLng = new google.maps.LatLng(data.lat, data.lng); 

       // Creating a marker and putting it on the map 
       var marker = new google.maps.Marker({ 
        position: latLng, 
        map: map, 
        title: data.title 
       });         
      } 

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

     </script> 
    </head> 
    <body>   
     <div id="map-canvas"></div> 
    </body> 
</html> 

回答

3

你應該把json和marker代碼放在initialize函數裏面來觸發它嗎?

現在,沒有什麼是觸發for循環,因此標記不會顯示。把var json =和一切都放到initialize-函數內for循環的末尾,你應該很好:)

+0

是的,現在就開始工作,謝謝! – Cosmin

+1

*沒有什麼是觸發for循環*:這是不正確的。 for循環執行後,您可以使用控制檯日誌查看它,但未定義'map'變量。 'map'是在調用'initialize()'後定義的。否則你是對的。 –

+1

是的,你是對的:)我正在考慮像jQuery(缺少'$(document).ready()')在發佈時。 – hansmei

相關問題