Google Maps multiple Markers component

Guys I know that you will tell me that there is already a fantastic component called Embedded map view (beta), however the component is both in beta and it is not working on normal web view, it only works for Android and iOS.
Given that Google has a nice API called Google Maps JavaScript API that allows to fully control a map, have unlimited customizable markers and giving the option to add markers on the fly, by JavaScript among other options. Would it be possible to build a simple component that is using Google Maps JavaScript API and one’s API keys, so to have full control over a Google Map? Do you see any technical limitations that would prevent Appgyver to handle all the corresponding, setup, triggers, events and consequent Google Maps realtime updates (for example in a Real Estate application having the map scrolling while visitors are scrolling a list of properties or having the map focusing on a specific marker when the visitors is clicking on the corresponding property description outside the map).

Thanks in advance for your suggestions and pointers.

Regards,
Marco Rinaudo

2 Likes

Hey, Marco.

From what I’ve read previously, I believe we’ll have to wait for the full transition over to their new Navigation Editor (as opposed to the current Composer Editor) which is supposed to have support for custom JS plugins – which this map API would seem to be a case of.

I know you’re wondering when they’ll launch the new Navigation platform. I am too. They haven’t set a firm release date yet. Could be any time next year. But in the words of @Harri_Sarsa on the Slack Appgyver Beta channel:

It’s still WIP – we’re scaling the dev team and prioritizing the backlog for the next year, so unfortunately no solid release date to give yet. It’s near the top of the backlog though, we’ll let you know ASAP!

2 Likes

Thanks for your clear and very detailed answer. I am very disappointed now, I was so excited about the potential of Appgyver as a Zero Code platform and its openess to indies coders or newbies like me and their extremely generous license (essentially free for all and forever).

Just for the sake of clarity and without promoting any competitor software, is the following Bubble Google Maps feature technically impossible with Appgyver:

https://bh-showcase.bubbleapps.io/version-test/plugin-google-maps-ext

Many thanks once again and sorry if my question is too obvious.

Regards,
Marco Rinaudo

2 Likes

Hey there, Marco. Excuse the delay. It’s been a busy Christmas season.

For some reason, the link doesn’t work (perhaps, you need to be signed into Bubble.io to open it), but I assume you’re referring to the maps shown in their interactive tutorials that I saw when trying the platform out back in July. That’s actually exactly what we’re hoping the JS plugins will bring support for. It would allow for markers to be placed (optional) relative to a user’s location, allowing different users to find each other easier.

Unfortunately, I don’t think that is currently possible. As you’ve stated, embedded maps (and WebViews, I think) are not currently compatible with web apps on Appgyver. You probably could jury rig something like it with a lot of thinking outside the box, but I’m going to have to be that guy with the long response and ultimately tell you that I have no clue how you could do that without JS plugin support. Hopefully, they’ll come soon. Mind you, I’m just a fellow user like yourself with no access to the source code or internal developer docs.

Perhaps, an official team member may respond with some new insight.

All the same, hope you’ve had a good holiday season. :slight_smile:

2 Likes

Hey there, Marco. Excuse the delay. It’s been a busy Christmas season.

For some reason, the link doesn’t work (perhaps, you need to be signed into Bubble.io to open it), but I assume you’re referring to the maps shown in their interactive tutorials that I saw when trying the platform out back in July. That’s actually exactly what we’re hoping the JS plugins will bring support for. It would allow for markers to be placed (optionally) relative to a user’s location, allowing different users to find each other.

Unfortunately, I don’t think that is currently possible. As you’ve stated, embedded maps (and WebViews, I think) are not currently compatible with web apps on Appgyver. You probably could jury rig something like it with a lot of thinking outside the box, but I’m going to have to be that guy with the long response and ultimately tell you that I have no clue how you could do that without JS plugin support. Hopefully, they’ll come soon. Mind you, I’m just a fellow user like yourself with no access to the source code or internal developer docs.

All the same, hope you’ve had a good holiday season. :slight_smile:

2 Likes

Hi, just to add belatedly, @Dominik_Greene is on the mark here (except Composer will stay named Composer and the new advanced navigation editor is only one internal part of it that has nothing to do with plugins specifically :sweat_smile:). Anything outside the limits of the components that we currently provide becomes available once we have support for third party plugins.

3 Likes

Ah, I see. I think there was a bit of a misconception among a lot of people that the “Navigation Editor” was a whole new generation, if you will, of Composer – sort of the next step up in capabilities and potential. Okay, so it will still be Composer, just with, hopefully, more functionality.

Thanks for clearing that up, Mevi. I’ve seen “Navigation” used quite broadly here, as though it was a whole separate next-gen editor product.

1 Like

Hi @Mevi is there any update on this? I’m another user who has basically the same need as @Marco_Rinaudo in terms of needing a fully functional Google Maps embedded in their app, which would, for me, be a mobile app. Would really much rather be able to build on AppGyver right now than be forced to use Bubble. Any update you could provide would be really appreciated.

Thank you!!

Hi! My current understanding is that third party plugin will be coming out around the end of this year, and we are quite close to getting it into internal testing. However, there are no official statements about when it will be out, so there are no guarantees I’m afraid. But believe me we are hungry to get it out after having been working on it for a long time and being so close to getting it done :sweat_smile:

3 Likes

Thank you SO much for this update @Mevi ! This makes a lot of sense since Google maps is so important given everyone uses it.

I gotta ask though, since this plugin is in development, can you see if there’s any kind of work around to get the Google Map full integration working so you can do a ride share type pairing scenario? I would really love to be able to implement any kind of work around if one actually exists.

Hi!

So we don’t have google maps plugin in development, but rather we are making support for users to use any third party React Native plugin they want to. So if you can find or develop a third party React Native plugin that would fit your purpose, you could use it in AppGyver no problem :relaxed:

1 Like

Oh @Mevi …. Thank you for the update! That just will cost some money or a ton of work.

Looks like I’ll have to find someone who can get this done.

I recommend checking out the existing React Native plugins for maps and see if any of them would work for you. But of course if none of these fulfill your requirements, then a custom plugin is the way to go.

1 Like

Oh my god @Mevi you are awesome!

Can you please suggest a plug-in from that list that I should try? I just need a few pieces, the google maps standard window that includes the “from” and “to” search fields, the markers that show the two points on the map and the price of the service.

I know we’ve used MapBox internally, but other than that I don’t know :sweat_smile:

1 Like

Thanks @Mevi ! Unfortunately, these plug-ins allow for logic that’s more complex than what I’m looking for :frowning: I’m only looking for a search feature and match feature.

FYI, I just went through a youtube video on using React Native Maps, one of the map libraries in this list referenced earlier in this thread: https://openbase.com/categories/js/best-react-native-map-libraries

The code wasn’t that tough. If I’m able to add the Expo code to draw a map and plot points, integrate with Google Places, etc., INTO MY AG Application, then thats going to be VERY COOL!

And if this is coming “by end of year” or soon, then thats a bonus.
Since mapping is important to many people, I think it will be VERY important for the team to think through some examples and have SAMPLE CODE ready.

We will need to know how to get Page Variables, or an Array of data points sent to React Native to plot our data. Won’t to any good for them to give us the ability to Use a React Native Component, IF we do not have any clue how to get our data sent TO THE COMPONENT! So I hope they plan accordingly and invest in plenty of real-world examples.

Same with a chart app where you need to send data in an array. We can easily get an array from a REST API, but will need to know how to loop through that to extract and build the arrays needed for the charts. No need for the community to re-invent that wheel when the team can easily whip up these examples. If we build app variables from our data, I wonder how the React library is going to access our data?

In fact, it probably wouldn’t hurt for them to do a poll to ask what integrations the USER BASE is looking for. Then they can invest time in examples for the top areas that are needed. (ie. Charting, Calendar, Maps, SMS, Email, etc etc)

Exciting times!

1 Like

We’re very much looking forward to the third party plugin support ourselves as well, as it will enable much more of our team to be able to create native functionality components/plugins than up until now – and we will definitely be looking at our tracker for most requested components that we can implement, so please have a look at the list and vote there.

As a general note about third party plugin development (I have had my first look of what it will be like, but there’s still work to be done before it’s out): to be usable on our platform, the plugin will need certain definitions (such as, what are the input values and types, what are the output values and types, what are the styles it should accept (if UI component), etc). We will provide an example of these definitions, as they, of course, need to be in a specific structure for our platform to understand.

2 Likes