2017-01-19 15 views
-1

これは私には分かっています。以前の質問で私の目はすでにうまくいっていませんでした。ありがたいことに、構文エラーが間違っていると私に修正点が指摘されましたが、現在はエラーは表示されません。マップは作成されていますが、マーカーは配置されていません。Googleマップでカスタムラベルのマーカーが表示されない

xml generated fileのように、xmlファイルが正しく生成されていますが、何も表示されません。誰かが2番目の目としてこのコードを見てもらえますか?

<!DOCTYPE html > 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>L3 CARDS</title> 
    <style> 
    /* Always set the map height explicitly to define the size of the div 
    * element that contains the map. */ 
    #map { 
     height: 50%; 
     width: 50%; 
    } 
    /* Optional: Makes the sample page fill the window. */ 
    html, body { 
     height: 100%; 
     width: 100%; 
     margin: 0; 
     padding: 0; 
    } 
    </style> 
</head> 

<body> 
    <div id="map"></div> 

    <script> 
    var customLabel = { 
     1: { 
      label: 'A' 
     }, 
     2: { 
      label: 'I' 
     }, 
     3: { 
      label: 'L' 
     }, 
     4: { 
      label: 'R' 
     }, 
     5: { 
      label: 'G' 
     } 
    }; 

    function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: new google.maps.LatLng(45.3791021, -122.7613788), 
      zoom: 15 
     }); 
     var infoWindow = new google.maps.InfoWindow; 

     // Change this depending on the name of your PHP or XML file 
     downloadUrl('maptest2.php', function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName('marker'); 
      Array.prototype.forEach.call(markers, function(markerElem) { 
       var id = markerElem.getAttribute('id'); 
       var reporttype = markerElem.getAttribute('reporttype'); 
       var propertyname = markerElem.getAttribute('propertyname'); 
       var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')), 
        parseFloat(markerElem.getAttribute('lng')) 
       ); 
       var infowincontent = document.createElement('div'); 
       var strong = document.createElement('strong'); 
       strong.textContent = propertyname 
       infowincontent.appendChild(strong); 
       infowincontent.appendChild(document.createElement('br')); 

       var text = document.createElement('text'); 
       text.textContent = propertyname 
       infowincontent.appendChild(text); 
       var icon = customLabel[reporttype] || {}; 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: point, 
        label: icon.label 
       }); 
       marker.addListener('click', function() { 
        infoWindow.setContent(infowincontent); 
        infoWindow.open(map, marker); 
       }); 
      }); 
     }); 
    } 

    function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

     request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
       request.onreadystatechange = doNothing; 
       callback(request, request.status); 
      } 
     }; 

     request.open('GET', url, true); 
     request.send(null); 
    } 

    function doNothing() {} 
    </script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=myAPIkey&callback=initMap"></script> 
</body> 
</html> 

おかげで、事前に

+1

あなたの緯度と経度の値が反転され反転されます。 – geocodezip

+0

geocodezip、あなたは神です。私は何時間もコードを見つめて、それも考えなかった。私はそれを受け入れることができるように、これを回答として再度提出してください。それは働いている! –

答えて

関連する問題