javascript - Google Maps API V3 で境界を示す単純な郵便番号マップを作成するにはどうすればよいですか?

Question

境界を示す郵便番号を含むインタラクティブなマップを表示し、次のように郵便番号ごとに異なる色を使用する必要があります。

http://www.usnaviguide.com/zip.htm

米国の郵便番号を入力し、[郵便番号を検索] をクリックします。

おそらく私はそれを見落としていますが、これの例とこれについて具体的に説明しているドキュメントをGoogle Maps APIドキュメントで見つけたことがありません。上記の Web ページのリンクでソースを表示しようとしましたが、それがどのように機能するかは明らかではないようです。ページには、それが必要なものの一部であるかどうかわからない他のものもあります。

いくつかの簡単なコード例は非常に役に立ちます! ありがとう！

score 10 · Accepted Answer

これは、FusionTablesLayers でまとめた米国の郵便番号マップです。

http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map.html

別の色はありませんが、変更できます。

John Coryat はタイルサーバーを使用してそのマップを作成しました。Google Maps API v3 カスタムマップでも同じことができます。

例のコードスニペット:

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("11501" /*document.getElementById("address").value*/ );

  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(address) {
    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);
  // alert(queryStr);

  //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;
  //for more information on the response object, see the documentation
  //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();
/*  var queryStr = "SELECT geometry, ZIP, latitude, longitude FROM "+ tableid + " WHERE ST_INTERSECTS(geometry, RECTANGLE(LATLNG"+map.getBounds().getSouthWest()+",LATLNG"+map.getBounds().getNorthEast()+"))";   
*/

  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)));
      // bounds.extend(point);
      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);
  }
  // zoom to the bounds
  // map.fitBounds(bounds);
}

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

#map_canvas { width: 610px; height: 400px; }

<script type="text/javascript" src="http://www.google.com/jsapi"></script>         
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></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://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>


<form> 
 	    <span class="style51"><span class="style49">Show</span>:</span> 
<input id="address" type="text" value="11501" ></input>
<input id="geocode" type="button" onclick="codeAddress(document.getElementById('address').value);" value="Geocode"></input>	  
<div id="map_canvas"></div>

score 1 · Accepted Answer

地域を描画するには、Google マップ API のPolygonを使用できますが、描画する州または都市の境界または郵便番号のデータが必要になります。

そのポリゴンの例でビューソースを使用できます。Google マップが既に動作している場合は非常に簡単です。Polygon Obj に LatLng obj の配列を渡すだけで完了です。

データについては、米国の郵便番号用のこのようなフュージョンテーブルで見つけることができると思います。

score 0 · Accepted Answer

ウェブサイトで使用できる郵便番号マップを探し回っているのと同じ問題がありました。少し遅いですが、探しているものにぴったり合うこの無料のプロジェクトに出くわしました: http://www.openheatmap.com/

個人的な使用には最適ですが、ユーザーに表示するにはあまり適していません。誰かが私と同じ状況にあった場合、これが彼らの助けになることを願っています.

score 0 · Accepted Answer

必要なものを取得するために使用するシンプルな API: https://www.mashape.com/vanitysoft/boundaries-io

上記の API は、米国の境界 (GeoJson) を郵便番号、都市、および州別に示しています。大きな結果を処理するには、API をプログラムで使用する必要があります。

例えば：境界にすべての郵便番号があるワシントン DC

javascript - Google Maps API V3 で境界を示す単純な郵便番号マップを作成するにはどうすればよいですか?

4 に答える 4

Related

Reference