Integrate Google Maps via Script? (To get more parameters)

I am using the Google Maps component of WeWeb to display a couple of locations, which works great. Now I need more parameter like box coordinates that are currently not supplied by the WeWeb component.

Can I dare to integrate Google Maps directly via JavaScript (Not as a Vue Component)? Has somebody experience with that?

Thank you!

If you feel enough confident to do it in javascript, its probably better to fork our component and add the features you are missing.
Do not hesitate also to open a pull request on our component, or ask for us to do it here

Tried this, and failed miserably. WeWeb by nature (being two apps - Editor and the App itself) is a little complicated to implement scripts, but it is not impossible. I think this should get a little worked on, or at least documented a little better. Anyway, you can definitely make this work, there are many threads on the forum, and in case you get stuck, I’m sure @dorilama or someone else will happily assist! :slight_smile:

Thank you for the fast replies! I was hoping that JavaScript in the editor could do the trick, but now I see that it needs a real WeWeb component, right? Too bad, this is far being my coding Skills, tried it once and stopped after 2 days setting up Node.js :joy:

In this case I will add the request for more maps properties in the link @aurelie provided and hope that more people in the community need and push this feature. :muscle:

I’ve integrated a number of modules using javascript without going through the Vue component process. I have some speedruns and tutorials on key parts of that process on the statechange youtube channel: State Change - YouTube. It doesn’t have to be super-complicated, but it is work, and its definitely low-code rather than no-code.

If you want more help than that, we have tools and office hours to make these kinds of hardest 5% projects easier too at State Change.

2 Likes

@raydeck - Awesome information! Unrelated to Google Map, the topic and tutorial helped me with a different use case. Thank you!

1 Like

@raydeck That’s awesome! Watched the video and looks doable. I will try this in the next iteration. Thank you!

1 Like

Works perfectly. I was able to integrate the map, use own markers, and even draw a calculated route on the map after 3 hours of playing around. Reallycool.

1 Like

@raydeck After first successes integrating and using map features I am running into a problem that looks simple but couldn’t find any solution yet.

Removing markers simply refuses to work after storing the markers in a weweb variable. Strange enough. if I store the marker in the weweb var and remove them in the same script it works well. But if I remove them in a different script or global workflow it does not work, though the objects are stored in the variable.

Complicated to explain.I attached to screenshots of the script.

  1. Showing the loop of removing markers directly after adding them in the same script (works well)
  2. Showing the same loop in a global workflow (Does not work → no error on console)

Any ideas on that?

I would start by looking at what the data is at this point. console.log is our friend to find out what is in mapMarker at that point (as opposed to what is supposed to be in it). In particular, I’d make sure that the marker is the same marker as we had in the map element. State management can be tricky that way - we might not be holding the markers that go with this particular element. How to find out? I’d poke around in devtools via the console. In addition to looking at the log, I would inspect current values stored in wwLib to see what’s what, as well as where the data is on the map. I find the best way to fix fast is to accept going deep early so that we are flying blind less. Once we step outside the walls of what the platform built for us, we accept a bit of discovery into our process.

Hopefully the preceding gets you started on your own. In addition, this kind of “take off the cover and look inside” is something we do often in our State Change office hours and loom-enabled forum. I immediately think you might get value from our Devtools deep dive that we recorded just last night (another one is next week) and of course you can bring the specific issue to our office hours (almost) every business day. The kind of work you are doing is a great fit!

Thank you for the heads up. I will definitely take a look at the recorded session, start inspecting and maybe join one of the office hours. :+1: