Link Google Maps to Weweb in 15 Minutes
Ray Deck shows how to embed Google Maps' Drawing Library in WeWeb by creating a Google Cloud project, enabling the Maps API, and using custom JavaScript actions. The main fix: wrapping initMap in setTimeout so it runs after the DOM element exists, then setting the map div's CSS height so it renders.
Chapters
We're going to try to connect WeWeb to the drawing library of Google Maps. So this individual has a problem of trying to get, you know, Google Maps to work with WeWeb, not using the built-in WeWeb controls. They want to have some more specific control over it. So let's click into this and we'll take a look at the drawing layer of Google Maps. And we will see that the way it works, it wants to have a script tag that will include your API key. So we'll need to get that in just a second. And we, and then it wants code that runs when the map loads that will then draw your map inside of a wikiweb and you'll be able to do more things with it. With latitude of -34, I'm guessing this is going to show us someplace in like Australia, New Zealand, something like that. The, okay, so that means there are two parts we're going to need to load in. We're gonna need to load in the script tag and we're going to need to load in the, the, the actual code to draw the stuff. Let's take these problems one step at a time. First, we're going to need to create the script tag. To create the script tag, we're going to need an API key from our friends over at Google. To do that, we're going to need to bring up the Google Cloud, we're going to need to create a project in Google Cloud. You go over at cloud, console.cloud.google.com, you set up a project if you haven't already, or you set yourself up with, with an account, and then you can create a new project. And the project we're going to create is called Matt Demo. I'm not going to bother with an organization right now, and it's going to create that project for me. Click into it. Great, it offers all sorts of stuff. Now, what we want to do is add an API for it. We go to API overview. Uh, we're going to enable an API. And the API we want to enable is the JavaScript API for Maps. Click where it says enable. And this creates an API key for us that we will then know about. I'm going to destroy this API key, this project after the, after, after this demo. So don't worry about it too much. And then we can go to the Google Maps Platform with this API key in hand. Now, with this loaded, we can now go back to here and we can click where this box is. It says click to insert your API key. And it will find that key based on the project you're working with. Here I'll put Map Demo. Uh-huh, cancel. Just gonna refresh the page. Click on this. Map Demo. Well, let's redo that. So we can go back over to here, Google Maps Platform, say go to Google Maps. Form. Maybe later. Okay, so I'm not gonna worry about putting a restriction for the moment. Now I've got my key, my key now should work. So let's see if this works. Refreshed. Click on your API key, map demo. Hooray, there it is for the browser credentials. We're gonna insert that. And now we have these credentials, adds the drawing library and callback basically is gonna run the function called initMap that's attached to the window when this script has loaded. So we're going to copy this code sample, but now, and we're gonna need to get it into WeWeb, But how do we get into WeWeb? Well, if we go back into WeWeb, we can create a new project and we'll call this, you know, similarly select, and I'll call it MapDo. Project in WeWeb. I'll click into WeWeb. And here we have a couple of options for being able to load in code. So one thing we can do with a given page in WeWeb, we can click on the page icon and click on the little gear here and we can add custom code, which should then go into the header or the body. But the trick is that will only work after this has been published. It's not going to work inside the editor. And so our debug loop will take longer. So the solution we, I like to use is a tool from StateChange, the WeWeb Embed StateChange AI Converter, which converts your script tag into a WeWeb action. And we can paste this here and convert this. Now we get a little bit of code that we can put into WeWeb. So let's go back into WeWeb, into the map demo. Uh, and now we can say is here, go to trigger workflows, create a workflow on page load. We're going to run a custom JavaScript action, which will then paste in the stuff that we just got. Great. And we will close it up and we will say test and it will succeed. This will load every time the page loads in the editor. So that means in order to reset this, we just need to refresh the page using the browser. and we will close that up. Now let's, let's take a look over the documentation again because now that we've linked this to WeWeb, what is it that we, what would what else do we need? We're going to need. It's clearly referencing an element called map that will need to have existed by then and has all this code. So let's grab this code. We'll say this code's also something we're going to put into WeWeb. So we'll actually just copy the whole thing. And the, go back over to WeWeb and we will go over to page, workflows, workflow. We'll give the, the workflow just a little name there so it's easier to track and we'll do another piece of custom JavaScript. Ding, ding. And paste, and now we've got the same code that came in from Google running init_map. We'll close this up, and at this point we will test this, and it succeeds too, because all it's doing is planting a hook. Now, we need to remember that this code is assuming that there's something in the page called map. So we better make sure there's something on the page that's actually called map. So let's go back over to WeWeb. Let's go to close, close. And let's add an element. A div seems like a good candidate here. And here's our div and the div, we will give an ID. We do that over in the little controls here. We say ID is gonna be, and this is sort of it to start with. So let's, now we have an ID on the page called map. We have loading in the script tag and we have the code from our friends over at WeWeb and we have a valid API key, we think. Let's give this all a try and see if it works. We will try refreshing the page. I don't see anything just yet. Nope, nope. So we're gonna take a look at DevTools for a second and see what the problem might be. And the problem seems to be, Uh, do, do, do, do, do. You cannot read properties of null. That's not probably a problem. So let's take a look again at the code as it's been brought in. Uh-huh. Now we're going to the workflows. Take a look at this one. Take a look at this one. Make sure we're happy with that. Doesn't seem to be so bad. That's fine. Okay. And this one, this looks relatively straightforward as well. And but you know what we're going to do is we're going to add a little bit of diagnosis to it. So we're going to find out why not this thing fires. We will do that. Say there from initMap. Okay, well let's see if that gives us a better hint. Data, close. Now in order for us to test this, we have to refresh the page. And the way we're gonna refresh the page is by clicking this. Ah, see, it says hello from initMap. Says checkLoad is not defined, that's not a big deal. Expected map div of type HTML element but was passed a null. Now we know, you and me, that the, that in here there is something called map, but this happens actually on page load. Sometimes things we run on page load don't have the page elements ready to go just yet. So what I find to be handy in these situations is just give it a little bit of a delay. And the way we give it a delay is time delay, and we'll give it a 5, I don't know, uh, 2-second delay just to see how that works between the load of the page and the load and the running of this custom JavaScript here. I bet this doesn't quite work the way we might hope, but we'll give it a try first, sort of the no-coding way of doing it. All right, let's try refreshing the page again. See if we get the same error message. Says initMap is not a function, right? So the problem that we created for ourselves is that the, um, the, the, uh, code coming from Google wants initMap to exist, but initMap, when it fires ordinarily, is firing too early relative to the rest of the page, right? So, and, and when we just introduced this delay, we weren't even planting the hook until after the Google code had loaded. This is all what we call problematic. So the, the, the best solution here is actually take that timing and put it inside the callback, I think. So let's go trigger workflows, homepage. We're going to get rid of this. And we're going to say instead, inside my edit code, we're going to put in a setTimeout. And we do that by making a little fat arrow function here. This is the fat arrow part of the function and this is just setTimeout. And what we can do at the very bottom of all this is say, you know what? So we're going to say after the Google Maps stuff loads and it fires initMap, just breathe, breathe for 500 milliseconds. Let's see how that works. And that will happen inside of init_map right here. A little bit more complicated, but doable. Let's refresh this. All right, so when I look at this, ding, ding, ding, ding, ding, ding, I'm not seeing the same error message, which is great. However, I'm also not seeing a map here. So at this point, I kind of wonder, well, it seems like there's, there's nothing up there. Wait, it's, it's got hidden. It got turned to zero. Ooh, that's a really good sign because it means that somebody probably did take over the map. Like I can't click up here to go get control it anymore. So I can go over to the navigator over here, open up blank, uh, and turn that into div. Um, and then I get access to the div again. So here's my suspicion. I think the div is going from being a little block to being a height of zero. So let's see if that turns out to help. So we can change the sizing of this thing. Yeah, here's the size. I just could change a fixed size. Oh, oh, look at that. 100px. Beautiful. Okay, now our friends over at Google are showing us a map and yeah, hey look, it's actually Sydney, Sydney, Sydney, Australia. And we can put this into preview mode to get a little more close up. And I can use my little pinch zoom on my fingers to point out where things are in the world. And yep, sure thing, we are looking at Sydney based on those geo coordinates. So we did a couple of things to get our arms around this. We created the Google Maps project in Google Console that had the ability to control Google Maps. We got, we generated the custom script tag key in order to make that work. We then converted the script key using the EdMed converter so that we could use it easily inside WeWeb. And this, we did that over here in the page workflows, page load. And then we copied over the code from Google Maps from their documentation to use the drawing layer, but then added the additional consideration that we should introduce a delay between when the callback fires and when it actually does the rest of this work because the map element did not exist at the time that the initMap function ran just because of, you know, everything on the webpage takes time and maybe things aren't running quite in the order that we might hope. Put those things together and then the final thing we did was we told the div that was called ID on our page, right? Created div and that div, we gave an ID using the control panel here with map. And then the, and then we controlled that to have a bit of a height because otherwise Google Maps was not expressing what height it should be and that just caused everything to collapse. You put these things together and now you have complete control over your Google Maps output and you get to use that in your wonderful WeWeb application.
