Zip Code Boundaries Using Google Maps Api

google-maps-api-3

I need to display google map with zip code boundaries like this

http://maps.huge.info/zip.htm

Perhaps I am overlooking it, but I've not been to find examples of this and documentation talking about this specifically at Google Maps API documentation. I've trying doing a view source on the above web page link, but it doesn't seem obvious to me how it works. There is also other stuff on the page which I don't know if it's part of what I need or not.

Some simple code examples would be very helpful! Thanks!

Best Answer

If anyone still looking for the solution here is how I managed to draw boundaries.

  1. Download zip file from http://www2.census.gov/geo/tiger/TIGER2014/ZCTA5/tl_2014_us_zcta510.zip (its around 500mb)
  2. Unzip it, u need the shp file from the extracted files
  3. On windows u need to install QGIS, to get the ogr2ogr utility

  4. Run the command to get geoJSON file from shp file:

    ogr2ogr -f "GeoJSON" -lco COORDINATE_PRECISION=4 -simplify 0.00010 zipRegions.json tl_2014_us_zcta510.shp

    You can play with simplify to remove extra points and compress your data

  5. Create free account on cartodb
  6. Upload zipRegions.json file there
  7. Now using cartodb.js file you can draw zip code regions on google maps easily

Simply by code like this

var mapOptions = {
            zoom: 12,
            center: new google.maps.LatLng(42.1038846,-72.5868353),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map'),  mapOptions);

            cartodb.createLayer(map, {
               user_name: 'your_user_name',
                type: 'cartodb',
              sublayers: [
                {
                    sql: "SELECT * FROM cartodb1",
                    cartocss: '#cartodb1 {polygon-fill: #7bd490;polygon-opacity: 0.7;line-color: #6da57a;line-width: 0.5;line-opacity: 1;}'
                }
            ]})
            .addTo(map, 0) // add the layer to our map which already contains 1 sublayer
            .done(function(layer) {
                console.log('Fine');
            })
            .error(function(e) {
                console.log(e);
            });
Related Topic