Google지도 KML InfoWindow가 렌더링되지 않음

Question

Google지도 API v3를 사용하여 KML 파일을 Google지도로 호출하고 있습니다. 이것은 간단한 폴리곤과 커스텀 아이콘 (맵 핀)을 사용하여 얼마 동안 저에게 작용 해 왔습니다. 아이콘을 클릭 할 때 열어야하는 InfoWindow를 추가하도록 구현을 향상시키고 싶습니다.

내 테스트 kml 파일에는 1 개의 다각형과 2 개의 아이콘이 있습니다. 각각 하나의 장소 표시에 있습니다. 각 위치 표시에는 연결된 스타일이 있습니다. 두 개의 아이콘에는 각각 관련 InfoWindow에 관련 텍스트를 표시하는 BalloonStyle이 있습니다. 두 개의 아이콘은 다각형 내에 렌더링됩니다.

세 항목이 모두 올바르게 렌더링되고 kmlStatus가 '확인'으로 돌아옵니다. 그러나 InfoWindow는 첫 번째 핀 (Style id = "destPin")에서는 제대로 열리지 만 두 번째 필드 (Style id = "tractPin1")에서는 열리지 않습니다.

나는 이것을 https://developers.google.com/maps/documentation/javascript/ 및 기타 관련 사이트에서 2 일 동안 조사했습니다. 그래서 나는 이것이 내 부분에 대한 깊은 이해 부족, 또는 구글 KML 구현의 몇 가지 단점이라고 생각하기 시작했다. 여기

는 .KML 파일입니다

<?xml version="1.0" encoding="UTF-8"?> 
<kml xmlns="http://www.opengis.net/kml/2.2"> 
    <Document> 
     <name>example26.kml</name> 
     <Style id="destPin"> 
      <IconStyle> 
       <Icon> 
        <href>https://example.com/dest_marker.png</href> 
       </Icon> 
      </IconStyle> 
      <BalloonStyle> 
       <text><![CDATA[$[address]]]></text> 
      </BalloonStyle> 
     </Style> 

     <Style id="tractPin1"> 
      <IconStyle> 
       <Icon> 
        <href>https://example.com/pin_1.png</href> 
       </Icon> 
      </IconStyle> 
      <BalloonStyle> 
       <text><![CDATA[Census Tract $[name] <HR> $[description]]]></text> 
      </BalloonStyle> 
     </Style> 

     <Style id="tractPoly"> 
      <LineStyle> 
       <color>64000000</color> 
       <width>2</width> 
      </LineStyle> 
      <PolyStyle> 
       <color>50F00014</color> 
       <fill>1</fill> 
       <outline>1</outline> 
      </PolyStyle> 
     </Style> 

     <Placemark> 
      <name>Census Tract 322.14</name> 
      <styleUrl>#tractPoly</styleUrl> 
      <Polygon> 
       <outerBoundaryIs> 
        <LinearRing> 
         <coordinates>-122.026918,47.588168,0 -122.014066,47.588019,0 -122.00872,47.587924,0 -122.008683,47.595191,0 -122.008679,47.596783,0 -122.008692,47.596982,0 -122.007825,47.601505,0 -122.007278,47.60524,0 -122.005975,47.609314,0 -122.005302,47.61252,0 -122.004694,47.616446,0 -122.013867,47.616726,0 -122.035479,47.616536,0 -122.035478,47.605487,0 -122.035514,47.601784,0 -122.035438,47.595471,0 -122.035458,47.59174,0 -122.035448,47.588478,0 -122.035455,47.588268,0 -122.026918,47.588168,0 </coordinates> 
        </LinearRing> 
       </outerBoundaryIs> 
      </Polygon> 
     </Placemark> 

     <Placemark> 
      <address>destination address, WA</address> 
      <styleUrl>#destPin</styleUrl> 
      <Point> 
       <coordinates>-122.03388,47.6142212,0</coordinates> 
      </Point> 
     </Placemark> 

     <Placemark> 
      <name>322.14</name> 
      <description>2010 Census Population 6264 - 2015 Population Estimate 6867</description> 
      <styleUrl>#tractPin1</styleUrl> 
      <Point> 
       <coordinates>-122.022,47.603,0</coordinates> 
      </Point> 
     </Placemark> 

    </Document> 
</kml> 

... 그리고 여기에 구글에 KML을 제출하는 자바 스크립트입니다.

// Displays the map for a given kml file 
    function displayMap(kmlFile) { 

     var mapOptions = { 
      position: mapCenter, 
      mapTypeControl: true, 
      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
      navigationControl: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions); 
     infowindow = new google.maps.InfoWindow({}); // copied from geocodezip 

     var kmlOptions = { 
      //suppressInfoWindows: false, 
      preserveViewport: false 
      //map: map 
     }; 

     kmlLayer = new google.maps.KmlLayer(kmlFile, kmlOptions); 

     google.maps.event.addListener(kmlLayer, "status_changed", function() { 
      console.log('KML status = ', kmlLayer.getStatus()); 
     }); 

     kmlLayer.setMap(map); // this is copied from geocodezip 

    } // end of function displayMap 

Answer 1

나는지도에서 렌더링 된 코드에 버그가있다.

는 MapOptions 사용은 객체 : 실제로해야

position: mapCenter, 

... :

center: mapCenter, 

이상한 것은

var mapOptions = { 
    position: mapCenter, 
    mapTypeControl: true, 
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
    navigationControl: true, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

이 ... 라인에 오류가 있습니다 지도가 kmlLayer와 함께 OK로 렌더링되었습니다. 또한 첫 번째 맵 핀은 infoWindow를 표시하지만 간단한 오류로 인해 다른 위치 표시가 InfoWindow를 렌더링하지 못하게됩니다. 그 간단한 감시만으로도 시간이 많이 걸렸습니다. 2 평판은 말할 것도 없습니다.