DEV Community

Aaron K Saunders
Aaron K Saunders

Posted on • Updated on

Intro To MongoDB Realm with VueJS Ionic Framework And ViteJS Integrating Geospatial Queries In Google Maps

In this video, we add a new collection to the database that contains the various locations of Tesla Superchargers I have used in DC region. We then show how to do location-based MongoDB geospatial queries to find the data and render it to a Google Map integrated into the VueJS Application us the Google Maps Javascript API.

We do a simple proximity-based query looking for locations near a specific point; we get the point from the users location. We also do a more advanced query where we get the region/bounds displayed on the map and then find all locations that are within the region. We are implementing the "Find In Area" you find often in map based applications.

A lot of the video is centered around a Google Maps Component for VueJS applications that I built in a previous video series, here is the link to that series Google Maps With VueJS & Ionic Framework

Helpful Links

  • Intro To MongoDB Realm with VueJS Ionic Framework Video Series - Link
  • Google Maps With VueJS & Ionic Video Series - Link
  • Google Maps Javascript API - Link
  • MongoDb Geospatial Queries - Link

Discussion (0)