Looking for js library to display locations on a map

JavaScript
1

I have a php platform that our team has been working with for displaying content.

They would like:
an interactive list of all school locations (it’s a city directory) in the system to display as a list along side a map (google or otherwise) of all the locations.
When a school is clicked, the item would reveal itself on the map, maybe a pop over detail window about the school.
At the top of the list would be a live search to filter the schools with search terms.
Pretty straightforward to other sites we’ve seen on the internet, and I’m looking for a js library to use as a starting point.

Where is a good place to look for libraries like this? Have any experience with something like this? What’s a good library to start with or try?

Thanks so much.

2

Google is kind of the standard for maps now. They have some very extensive libraries to help you with those things and there are independent npm packages that integrate those. I would start there.

3

Thanks @kevinSmith . I think Google is a good place to start, but the breadth is so large. I was thinking along the lines of a project or example library that was using Google maps, but had the example paired down to the very basics with list live search too.

I was looking at DataTables and thinking something similar, integrating search, lists, and GMaps.

4

As @kevinSmith says - google is the go-to for mapping and its well documented.

Most basic example is here: Simple Markers  |  Maps JavaScript API  |  Google Developers

And pretty much anything else you need for livesearch is covered in the geolocation section

5

Are you using a specific UI library/framework for your frontend?

I would just break your task into little chunks and work each of those sub-tasks.

6

We’re using IPS Invision Community. A php-based forum and content management system. I can pull data from the attached mysql db or push data into the html with their system. The latter I’ve used with libraries like Datatables.

7

OK, so it looks like you just want vanilla JS.

It’s just a matter of looking. If I google “embed google map” I see that there are a few options. The easiest is to follow this to embed a simple iframe, like:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d95777.3392165496!2d2.0785560935615095!3d41.394897489615325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a49816718e30e5%3A0x44b0fb3d4f47660a!2sBarcelona%2C%20Spain!5e0!3m2!1sen!2sus!4v1619051473989!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

There are other entries on that list that are more complex, like using the Google API. It’s going to be more complicated, with an API key, but will probably give greater control.

Google also has a lot of API services, like looking up addresses and coordinates, etc.

Don’t think of this as one big task. Break it into a bunch of small ones, figure those out, then put them together.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.