Wie mache ich eine einfache Postleitzahlenkarte, die Grenzen mit Google Maps API V3 zeigt?

Question

Ich brauche eine interaktive Karte mit Postleitzahlen ihre Grenzen anzuzeigen zeigt und haben verschiedene Farben für die Postleitzahlen wie folgt aus:

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

Geben Sie in einem US-Postleitzahl und klicken Sie auf „Postleitzahl finden“.

Vielleicht habe ich es übersehen, aber ich habe nicht gewesen, um Beispiele dafür zu finden und die Dokumentation darüber speziell in Google Maps API-Dokumentation zu sprechen. Ich habe versucht, eine Quelltextquelle auf dem obigen Webseitenlink zu finden, aber es scheint mir nicht offensichtlich zu sein, wie es funktioniert. Es gibt auch andere Sachen auf der Seite, von denen ich nicht weiß, ob sie Teil dessen sind, was ich brauche oder nicht.

Einige einfache Codebeispiele wären sehr hilfreich! Vielen Dank!

Answer 1

Hier ist eine zipcode Karte für die USA, die ich mit FusionTablesLayers zusammen:

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

Es spielt keine unterschiedliche Farben haben, aber man könnte das ändern.

John Coryat hat diese Karte mithilfe eines Kachelservers erstellt. Sie können dasselbe mit benutzerdefinierten Karten von Google Maps API v3 tun.

Code-Schnipsel aus Beispiel:

google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']}); 
 
var map; 
 
var labels = []; 
 
var layer; 
 
var tableid = 1499916; 
 

 
function initialize() { 
 
    geocoder = new google.maps.Geocoder(); 
 
    \t 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); 
 
     } 
 
    }); 
 
    } 
 
    \t \t 
 
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(); 
 
\t \t 
 
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({ 
 
\t content: zipStr 
 
\t ,boxStyle: { 
 
\t border: "1px solid black" 
 
\t ,textAlign: "center" 
 
      ,backgroundColor:"white" 
 
\t ,fontSize: "8pt" 
 
\t ,width: "50px" 
 
\t } 
 
\t ,disableAutoPan: true 
 
\t ,pixelOffset: new google.maps.Size(-25, 0) 
 
\t ,position: point 
 
\t ,closeBoxURL: "" 
 
\t ,isHidden: false 
 
\t ,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> 
 
    \t  <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> \t 
 
<div id="map_canvas"></div>

Answer 2

Um die Regionen zeichnen Sie eine Polygon von Google Maps API verwenden können, aber Sie werden die Daten von den Grenzen der Staaten müssen oder Städte oder Postleitzahlen, die Sie zeichnen möchten.

Sie Quelltext anzeigen in diesem Polygon Beispiel verwenden können, ist es sehr einfach, wenn Sie Google haben bereits Karten arbeiten Sie gerade das Polygon Obj eine Reihe von LatLng objs passieren und es

über die Daten getan Ich glaube, Sie finden können es in einer fusion table like this, die für US-Postleitzahlen ist.

Answer 3

Ich hatte das gleiche Problem, mich nach einer Postleitzahlkarte umzusehen, die ich auf einer Website verwenden kann. Ich stolperte über dieses freie Projekt, das ein bisschen langsam ist, aber passt genau, was ich suche: http://www.openheatmap.com/

Groß für den persönlichen Gebrauch, nicht so gut beim Anzeigen für Benutzer. Wenn jemand in der gleichen Situation war wie ich, hoffe ich, dass dies ihnen hilft.

Answer 4

Eine einfache API zu verwenden, zu bekommen, was Sie wollen: https://www.mashape.com/vanitysoft/boundaries-io

über API zeigt US-Grenzen (GeoJSON) nach Postleitzahl, Stadt und Staat. sollten Sie die API programmatisch verwenden, um große Ergebnisse zu verarbeiten.

zum Beispiel: