Google지도 API V3 - 라벨 퓨전 테이블 폴리곤 (인포 박스 채용)

, 에서 예제를 사용하지만 여기에는 인 InfoBox를 사용하여 Fusion Tables 폴리곤에 라벨을 지정하려고합니다. 아래 코드를 참조하십시오. 라벨을 표시하지 않음 :Google지도 API V3 - 라벨 퓨전 테이블 폴리곤 (인포 박스 채용)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Label Fusion Tables polygons by employing InfoBox</title> 

<style> 
#map_canvas { width: 610px; height: 400px; } 
.style1 {font-size: 14px} 
</style> 

<!--Load the AJAX API--> 
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript" src="http://www.google.com/fusiontables/gvizdata?tq="></script> 


<script type="text/javascript"> 
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']}); 
var map; 
var labels = []; 
var layer; 
var tableid = 1499916; 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
    center: new google.maps.LatLng(37.23032838760389, -118.65234375), 
    zoom: 6, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    layer = new google.maps.FusionTablesLayer(tableid); 
    layer.setQuery("SELECT 'geometry' FROM " + tableid); 
    layer.setMap(map); 

    codeAddress(); 

    google.maps.event.addListener(map, "bounds_changed", function() { 
    displayZips(); 
    }); 
    google.maps.event.addListener(map, "zoom_changed", function() { 
    if (map.getZoom() < 11) { 
     for (var i=0; i<labels.length; i++) { 
     labels[i].setMap(null); 
     } 
    } 
    }); 
} 

function codeAddress() { 
    var address = document.getElementById("address").value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
     if (results[0].geometry.viewport) 
      map.fitBounds(results[0].geometry.viewport); 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 

function displayZips() { 
    //set the query using the current bounds 
    var queryStr = "SELECT geometry, ZIP, latitude, longitude FROM "+ tableid + " WHERE ST_INTERSECTS(geometry, RECTANGLE(LATLNG"+map.getBounds().getSouthWest()+",LATLNG"+map.getBounds().getNorthEast()+"))"; 
    var queryText = encodeURIComponent(queryStr); 
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 

    //set the callback function 
    query.send(displayZipText); 
} 

var infowindow = new google.maps.InfoWindow(); 

function displayZipText(response) { 
if (!response) { 
    alert('no response'); 
    return; 
} 
if (response.isError()) { 
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
    return; 
} 
    if (map.getZoom() < 11) return; 
    FTresponse = response; 

    numRows = response.getDataTable().getNumberOfRows(); 
    numCols = response.getDataTable().getNumberOfColumns(); 

    for(i = 0; i < numRows; i++) { 
     var zip = response.getDataTable().getValue(i, 1); 
     var zipStr = zip.toString() 
     while (zipStr.length < 5) { zipStr = '0' + zipStr; } 
     var point = new google.maps.LatLng(
      parseFloat(response.getDataTable().getValue(i, 2)), 
      parseFloat(response.getDataTable().getValue(i, 3))); 

     labels.push(new InfoBox({ 
     content: zipStr 
     ,boxStyle: { 
     border: "1px solid black" 
     ,textAlign: "center" 
     ,backgroundColor:"white" 
     ,fontSize: "8pt" 
     ,width: "50px" 
    } 
     ,disableAutoPan: true 
     ,pixelOffset: new google.maps.Size(-25, 0) 
     ,position: point 
     ,closeBoxURL: "" 
     ,isHidden: false 
     ,enableEventPropagation: true 
     })); 
     labels[labels.length-1].open(map); 
    } 
} 
</script> 

<body onload="initialize();"> 
<form> 
<span class="style1">Show:</span> 
<input id="address" type="text" value="07646" ></input> 
<input id="geocode" type="button" onclick="codeAddress();" value="Geocode"></input> 
<div id="map_canvas"></div> 
</body> 
</html>

누구에게 의견이 있습니까?

안부, 다르 코

출처

2013-05-12 Darko J

나는 자바 스크립트 오류가 "구글이 정의되지"얻는다.

올바른 장소에 Google Maps Javascript API v3을 포함하지 않은 것 같습니다 (geoxml3 및 infobox에 필요함). 다각형에 우편 번호 레이블이 표시되는 것을 수정하면됩니다. 이를 위해 무엇

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<!--Load the AJAX API--> 
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

확실하지 :

<script type="text/javascript" src="http://www.google.com/fusiontables/gvizdata?tq="></script>

출처

2013-05-12 14:46:22 geocodezip

안녕, 프롬프트 응답을 주셔서 감사합니다. Google지도 자바 스크립트 API v3을 포함 할 수있는 적절한 장소는 어디입니까? 나는 조금 혼란 스럽다. 코드를 표시 할 수 있습니까? –

내 편집보기 (또는 시작한 예는 Maps API 뒤에 infobox 스크립트 및 geoxml3 만 포함) – geocodezip

이것이 문제라고 생각하지 않아서 다른 방향으로 실수를합니다. 고맙습니다, 당신은 저를 많이 도와 주셨습니다. –

Google지도 API V3 - 라벨 퓨전 테이블 폴리곤 (인포 박스 채용)

답변

관련 문제