Google지도 외부 정보 창 표시

Question

Google지도를 우편 번호 폴리곤으로 구현했습니다. 즉, 다른 우편 번호 좌표를 사용하여지도 위에 특정 우편 번호 다각형을 그리는 중입니다. 우편 번호 다각형 위에 시장 마커를 보여주고 있습니다. 우편 번호 다각형 또는 마커를 클릭하면 해당 데이터가 포함 된 정보 창이 표시됩니다. 그러나이 창은지도 내에서 열리고 해당 우편 번호/마커를 가리 킵니다. 이제 우편 번호/마커와 관계없이지도 외부에 정보 창을 표시해야하는 요구 사항이 있습니다. 마치 고정 된 영역 (div가 될 수도 있음)을지도 외부에 유지하고 우편 번호 폴리곤 중 하나를 클릭하면 해당 고정 영역 내에 정보 창이 표시됩니다. 우리는 어떻게 그것을 할 수 있습니다.

내 작업 코드

var path = [ 
       {% for polycoord in zip.zip_info.zip_polygon %} 
        new google.maps.LatLng({{polycoord.1}}, {{polycoord.0}}), 
       {% endfor %} 
      ]; 



var polygon = new google.maps.Polygon(
    { 
     path:path, 
     clickable:true, 
     strokeColor: '#000000', 
     strokeOpacity: 0.75, 
     strokeWeight: 1, 
     fillColor: '#333fff', 
     fillOpacity: 1, 
    } 

); 



google.maps.event.addListener(polygon, 'click', function (event) { 
      $.ajax({ 
       type: "GET", 
       url: GET_DATA, 
       data: dataString, 
       success: function(res) { 
        if(res != '') { 
         var contentString = res; 
         var infoWindow = new google.maps.InfoWindow(
             { content: contentString });  
         infoWindow.setPosition(event.latLng); 
         infoWindow.open(map); 
         google.maps.event.addListener(map, 'click', function() { 
          infoWindow.close(); 
         }); 
        } else { 
         alert('No data found') 
        } 
       } 
      }); 
    }); 

Answer 1

이 (기존 코드 않는 경우) 작업을해야는 테스트하지.

google.maps.event.addListener(polygon, 'click', function (event) { 
     $.ajax({ 
      type: "GET", 
      url: GET_DATA, 
      data: dataString, 
      success: function(res) { 
       if(res != '') { 
        var contentString = res; 
        document.getElementById('theIdOfYourDiv').innerHTML = res; 
       } else { 
        alert('No data found') 
       } 
      } 
     }); 
});