Search places on a map, filtering by City Boundaries.

I recently wrote a 5 part series that shows how to do mapping, and searching which can be filtered to within City Boundaries. I use Vue.js, Google Maps and Places, GeoJSON, and polygon filtering. Citymap is a stripped down blend of a bunch of small parts. I dont claim for it to be a shining illustration of UI, component layout, or error checking. It's an end to end example, done in limited time.

• Vue.js + Vuetify UI and component setup
• example of the use of Google Maps and Places API
• example of using Eventbus for communication
• example of using GeoJSON to get City Boundaries
• example of filtering search results against polygons

You can get to the articles via this box set page

• Google API account set up. You will be generating an API key for four access to four APIs: Geocoding, Geolocation, Maps, and Places:

See more about this in Location, Location, Location (Part 2)

• Vue cli

• The instructions in Set up Vue.js + Google Maps (Part 1)

To make this more robust, there are several things that could be done:

I wrote this quickly, along with the articles that go with it. I have some insight as to how to do several things better:

• better layout of Vue.js components - dont depend on App.vue for so much
• needs better error checking
• there is no notion of cleaning up data structures when going betweeen cities - this could chew up memory quickly
• the method of finding the correct element in GeoJSON is not quite there. I should look further for a Polygon or Multipolygon in some cases
• configuration data (specifically API keys) should be stored in an external file
• could make better use of Vuetify - this example is a bit ugly

To go beyond this example, in terms of features, I can hint at a few directions:

• be able to search among several APIs (not just Google Places)
• be able to search categories, in addition to keywords
• be able to specify search radius
• or, draw a polygon to search within
• be able to combine results from several APIs
• get more information from each search result (drill down for details)

Those are just some of the quick ideas. I can think of many more, and there is some cross pollination I could do with my ThereThenThat and MediaShiskebab projects.

See Configuration Reference.