Javascript – Google Maps API Postal Code Boundaries

google mapsgoogle-maps-api-3javascriptjquery

I've found an answer using Google Maps Marker but since its dead, I hit a dead end.

I was wondering if anyone would have any knowledge on how I would replicate this for a user on my website: https://www.google.ca/maps/place/Toronto,+ON+M4N+3M5/@43.7216028,-79.3771275,16z/data=!3m1!4b1!4m5!3m4!1s0x89d4cd2e4f1652cd:0xee93f0117ea5797d!8m2!3d43.7215696!4d-79.3768256

I would like to take the users postal code and outline there boundaries. I'm not sure if this a broad question but I need to stick with using Google Maps API in this case.

Best Answer

Currently Google Maps JavaScript API doesn't expose any boundaries of geographic features. There is very old feature request in the public issue tracker to add this functionality, however it looks like Google didn't set high priority on this task:

https://issuetracker.google.com/issues/35816953

Feel free to star the public feature request to express your interest and subscribe to further updates from Google.

You can get polygons from other sources and add them to Google maps as additional layers.

The nice workaround to get polygons in GeoJSON format from OpenStreetMap is described in the following answer:

https://stackoverflow.com/a/40172098/5140781

So, if you download the GeoJSON you will be able to add it to map using the data layer and its loadGeoJson() method:

https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson

You can style colors of GeoJSON objects and create info windows. Just read the aforementioned documentation.

I hope this helps!