Building Map Apps (Map Component) with Bubble.IO | Bubble.io Tutorial for Beginners 2021

what is going on guys and welcome back to another video in this video we are going to be talking about how to use the map object in bubble and this is a very very useful component but there are some issues and some um problems that people may have from time to time and so in this video we're gonna have to a full tutorial on how to properly use the map component and we're also gonna be uh doing a little bit of api calls so that you can learn how to get addresses from a third-party api and place them on the map now before you get started it's very very important you go into settings and you configure your api keys okay you need these two keys you need the geo code api key and you need the map api key because it's using google maps and in order to use google maps you have to enter these api keys and this is actually very easy to do you just follow these instructions here very very simple uh this is actually it's actually the same page and the process for setting it up is the exact same process and as a result you're gonna get uh two specific api keys that you can start to use in your app so this is very very simple to do but make sure you get this done now assuming you already got this done what we're gonna do is we're gonna build a very very simple app just to show you how it works and then later on in the video we are going to be talking about more advanced use cases okay so what i'm going to do is i'm going to drag a couple of elements i'm going to drag the map element here i'm going to drag a input a very simple input here and i'm going to drag a button here and the objective is very very simple you'll be able to enter an address and it's going to display here and so i'm going to change the placeholder here type address here this is going to be a button i'm just going to call it submit very simple maybe make it a little bit bigger so let's make it just a little bit something like this this looks nice and it's very very simple and the beauty of this method is that you don't even need a workflow for this this this is going to happen automatically so first of all you want to make sure that the input is input address okay i like to name my inputs starting from input that way i can easily find them and then you go to the map object here and you want to set the marker address if you click on it you want to set it to the input addresses value and you have various uh number of markers you have none you have single list we're going to talk about that in a second but right now we're just using the default value which is single now the map type you have various options you can do road map you can do hybrid you can do satellite and you can do a terrain we're just gonna do a road map which seems to be the default and you you also have the map style uh map box style apple map style uh pale down lots of interesting styles you can do i'm just gonna set it to normal uh you also have allow zooming and dragging we're going to select that disable zooming and then you have your initial zoom and this is your how how zoomed in do you want the initial map to show up so you can do street level which is around a zoom level of 15 you can do a zoom level of 10 which is kind of a city level you can also do zoom level of 5 which is kind of a region state level and then i assume something like 1 is gonna really zoom out so it really depends of how you want i'm just gonna put it to 10 which seems like a nice uh trade-off between not being too zoomed in and showing you everything that you need to see as well and so we have this now when we previewed the map all you have to do is enter the address and so now we have the app loaded so if you enter an address let's say you can even enter a zip code so let's say i enter 90210 which is a famous uh beverly hills address and as you can see it's it it centers it on this specific zip code here beverly hills now i can do the same thing i can enter on new york city zip code and it's going to go back to new york city here is a miami zip code and we are in miami a very very simple app works fairly well looks like it's working pretty well now let's go back to our app and let's try something a little bit different okay let's talk about the the kind of things that you can do with the app now single is very simple right when it's single so if you go to none let me show you what none is first of all before continuing okay none essentially does not have any markers okay and this is useful i suppose for showing you a region not specifically showing you a specific marker uh to an address or a city if you want to show a region so let's say i put beverly hills 90210 um i'm not putting in a specific address so it's useful for me to just show the region or let's say i put uh san diego san diego california i wanted to be on san diego now obviously i could put a marker there if i wanted to but it's not i don't think in this case it's very important it's useful just to show san diego or let's say i put miami florida and it's only it's essentially going to center on miami so this is great if you are doing something with the region i could put something like new york and that is exactly what it's going to do is so in this case i don't really want a marker i want just the main region centered okay and so this is uh the first type right this is the non if you select number of markers is not if you select single it's gonna have a marker there this this is something that we did in the beginning of the video and so this is very simple to do the marker address is essentially a you can input it from here you can set it it could be set uh you can get it from a database which is something that we're going to talk about in a second as well you can do that a lot of people actually i notice have trouble with list right so list is a little bit more complicated we're going to clear this and for list you have to set something called the type of markers right so what it's going to do if you select the type of markers it's going to actually display one of the data types so remember we have user which is a data type here if we go to data if we go to data type we have the user here okay and so you can actually get the the user that the address from the user themselves and i'm gonna show you how that works okay we're going to go back to the design or you can set a geographic address if you set a geographic address it's going to be just like a regular address or a list of addresses because we have a list here and so let me show you how a user works right let's say you have this an address as stored as part of the user record or another record so in this case we only have the user and then later on in the video i'm going to show you how to get all these addresses from an external api as well and so if we go into the data tab here we have the user here and i created a new address so if i remove this i can just click on create a new field and i'm going to call this address and this is a user address and it's very important that you set it to a geographic address okay that way it can parse it and display it correctly and so what we're going to do is we're going to go back to appdata and i have my record here and so if i edit this record i have the address here as well i have this address record and i'm going to put i'm going to put 90210 i'm going to press enter and it you know it basically pulls a random uh beverly hills address it looks like right so now i have a beverly hills address i can do the same thing for miami 33133 press enter and then it's miami florida so let's say i have it set to miami here i'm gonna hit save and now i have my own user record right with my own email everything here set to actually it should be miami so let's refresh this let's make sure it's actually showing up as miami instead of the other record here so if we go back to our data type we go to the app data all users and as you can see it says miami florida now if we go back to our app and we go back to the map we're going to choose user here and the data source is going to be current user's address okay current users address and in this case we're doing single okay so if we do single we have current users address and so if i preview this map what's gonna happen is it's gonna center it on my specific address now remember i am logged in because it's using my own if i log out it's not gonna work okay it's very important to understand so if i click on log out it's not going to display it correctly it goes back to new york which seems like to be some kind of a default maybe it's set somewhere but it seems like a default but if i go back and log in so i go here and log in i put my email address i put my password here and i log in it's going to go back to miami because now it has the data it has access and this is actually fairly simple to do because if i go in here it's a single and obviously it's going to bend rest now it gets a little bit trickier if you want to do a list and the list is very very useful if you want to display multiple records when you do a list it essentially wants an array it does not want an address right so for instance this evaluates to geographic address okay but it wants multiple addresses it does not want one and so there's lots of ways of doing it if you have multiple users somewhere and they all have an addresses um it's obviously going to work because then you're going to have an array of addresses but what i want to show you here is a little bit more of an advanced method and actually this is a method that many of you are going to be using uh because a lot of you are going to be getting addresses from an external data set okay and actually had a video just the other day i think it's one of the videos previous to this one where i talked about getting addresses from an external data set and for this you can obviously be using an app maybe you're using a specific service where you're pulling in various um records with addresses but what we're to do is we're going to use a service called mock api and mock api is a very very important concept mock api is essentially a fake api and this service here mock api.io allows me to create a project that i can create multiple records and i can generate them randomly i can have random user names random avatars random addresses all kinds of data and i can have all kinds of operations on that data i can create new records i can uh delete them i can edit i can modify and let me show you exactly how it works so i'm logged in this is a free app or at least i'm using the free plan right now and so i have my project so what i'm going to do is i'm going to create a brand new project we are going to call this users okay because that is going to be you know actually for the project name i'm just going to call it project one api prefix optional this is all optional we're going to click create here and now we have this project i'm going to click on this project and now we have the endpoint and what i'm going to do is i'm going to create a new resource now what is a resource a resource is an object type so it could be users it could be projects it could be movies and in this case i'm going to click on new resource and i'm going to create a new resource of users now you want to do plural because it's going to typically have multiple of these records so you don't want to type user you want to type you want to have a plural value so users movies addresses etc and once i do this now this is our schema right and this is essentially the records okay so we have our id this is the object id is going to be generated automatically we have created at we have name and we have an avatar and this is using something called the faker.js library which allows allows us to create multiple fake records and i'm going to show you exactly so what i need to do is i'm going to need to create a new field this is going to be called an address i'm going to choose faker and i'm going to use a zip code because as we've seen in the beginning of the video you don't need to put a full address you can enter a zip code and that's going to be enough okay and so what we're going to do that and now we're going to leave everything a default we're going to hit create and it created our new resource here now what i want to do is i want to drag this here i want to create let's say i want to create 50 records so i'm going to choose 50 and i'm going to hit that our data has been generated so if i go into data i should see 50 random records and this is exactly what i see so i have idea one created today's date i have a fake name i have a fake um avatar and i have a fake zip code now all of this is great because now we can pull this data and we can show all of these zip codes and this users and all this stuff on the map now in this video i'm not going to be showing you a full tutorial all i want to do is i want to show you the addresses we're only talking about the address field in some of the future videos i may make a full tutorial with working with fake data and so now we have an endpoint so all i have to do is write if i go to data i have an end point so if i click on data i have an endpoint i can update it i can do all kinds of things i can also hit edit and i can change some operations i can add a new field etc etc now if i click on users and i open it up i'm essentially making a rest api call and i'm getting this data back and this is perfect because now we can get this data inside of bubble so what i'm going to do is i'm going to go back into plugins i'm going gonna go make sure you have this api connector installed i'm gonna click on add another api we're gonna call this mock api no authentication we're gonna expand our http call and this is going to be our users okay users api you can call it something like that we're using get and then you copy and paste this link here when you uh hover over users you're gonna be able to open this url here and now if we go back and and the next thing you want to do is you want to click on initialize call very very important so we're getting a 404 error so we want to make sure that we set it up correctly so if we go in here and we paste it we want to make sure not found so wait a second let's refresh it and let's see let's open this users up here and it's here so maybe i had the wrong i might have had the wrong url so if we select this we go back we paste it here and now we need to do initialize call once we do that we have our data now this is very very important for the address field you want to make sure that you choose geographic address okay if you do text it's not going to work or it's not going to work as well once you do that you can hit save and now we have our api okay now you can go back to the design you can pick list type of markers is going to be users api here it knows that we have a new api we're going to do users and that automatically selects the proper address field because we specified that back when we executed our api call that it knows this is an address okay very very important and now it knows how to get the data we specify the type of data now we need to make sure that we specify the data source right we're gonna do get data from an external api we're gonna do mock api and that's all you have to do and now it knows how to do it and so it's going to get those 50 records and it should list them on the map correctly so if we do preview once we got the api as you can see we have a lot of these random addresses it looks like we have puerto rico zip code there as well we have oregon we have california we have a lot of interesting addresses actually it's interesting that we have puerto rico i don't even know their address let's and so if i google for puerto rico zip code as you can see it's a zip code that starts with two zeros and if we go to our mock api we should see that zip code somewhere so if you search for two zeros you should see that zip code so here is the zip code this looks like a puerto rico zip code because it look it doesn't look like a standard us zip code so if i google for the zip code you will see that this is indeed if i google for the zip code you can you will see that this is indeed a postal code in puerto rico okay and this is exactly how you set it up and so now what we have is we're using a third-party api we're using an api that we configured we're having a mock api and then we have an addresses there's a another variation of doing it so in this case what you can do is you can set um type of markers as a geographic address and then if you go into data source you can't do mock api users api you have to go and you actually have to pick an address here right so in this case this is kind of an alternative way so if you pick geographic address here and then you have an address if you preview you should have the exact same results as before so if it loads as you can see it's right here now the other thing that we can do is we can go to our mock api here and let's say we only want uh let's say five records so i'm gonna have seven i'm just gonna click on five our data was generated so if we go in here we only have five records we're probably not gonna have that puerto rico um zip code there and it looks like and this is the exact same url so what we're gonna do is we're gonna go back to bubble and we're gonna refresh it and now we only have we have well we have two records here so now if you refresh the map we should see much less addresses now in fact we see just a few addresses as compared to before when the whole map was filled with addresses and that is because we generated a lot more records before and now we have fewer records generated we even have an address in mexico as well now the other thing that you can do with this uh specific component here is that you can specify a title window okay so if you click on this you can do a title window no on click or always so if we do always and what we want to do is it essentially asks us for a markers caption and what we can do is we can insert dynamic data we can say current market and we can have address avatar name created ad id etc it's essentially current marker is the name of the record and we are going to set it as name and we are going to go back and reload this app here we should see the actual titles on these specific markers being displayed correctly so there you go now you have random names generated thanks to our markers and you can actually click on this and you can close it the other options that you can do is you can select it uh you can do on click save behavior now it's only going to be displayed once you actually click on a marker which seems like a very cool behavior so i can click on this i can see the specific data field and that is how you do it so it's actually very very simple once you understand how it works so as long as you have access as long as you have the type of markers uh coming in they could be automatically could be as part of a your internal data your internal data field like a user it could be a third-party api or it could be just a geographical address type remember if you use a geographical address type then you need to actually go in and specify it right so i need to actually specify here if i use the specific the the whole data type here then i don't really need to specify a uh the specific data type here i can just use uh the the actual the just the users api here simply because one of the data types is an address type so it could automatically go here i can specify it and it automatically suggested this address type here that i configured back in plugins back here so if i do initialize call here you should see right here it says address and this is geographic address right here if i do not do a geographic address if i do a save it's not going to work it's not going to know it's not going to know which uh which of the fields is an address in that case i actually have to go in i have to specify geographic address and then i have to go in here and i actually need to go out and find it and that makes it a little bit more complicated uh because i need to actually specify it etc etc so in my opinion it's a lot better to in re-initialize and then specify this as a geographic address that way you can go back to bubble and it can actually suggest it for you correctly as you can see it automatically fills it in and here i don't need to specify it anymore current markers is the name we have it on click and that way we can get the proper data all right guys so this is just a quick video just to show you how to use the map component in bubble it's one of the more useful map components there's a lot of things that you can do and i really look forward to making more videos maybe more comprehensive videos uh using this mock api functionality this really cool tool uh the map component and maybe something else so if you want to see a video such as that one definitely like put a like on this video leave a comment below letting me know that you want to see a video that goes into kind of more depth on this specific component and i would be happy to make it so again thank you so much for watching this video subscribe to this channel if you haven't already like this video if you've gotten value leave a comment below and i will see you in one of the future videos

Channel: James NoCode

Views: 5,795

Rating: 4.875 out of 5

Keywords: bubble.io, bubble.io tutorial for beginners, bubble.io tutorial 2020, how to build an app with bubble.io, bubble.io for beginners, how to build apps with bubble.io, bubble.io custom states, no code for beginners, what is no code, no code tutorial 2021, bubble.io crash course, bubble.io maps, bubble.io google maps, bubble.io map component, no code maps

Id: mD3JTJzkojc

Length: 23min 14sec (1394 seconds)

Published: Wed Feb 24 2021