Multiple Map Markers On Google Maps Using Geographic Data | Bubble.io Tutorials | Planetnocode.com

this video is picking up uh right from where my previous google maps video ended um so right now we have a search box set to a geographic field and i can search for a place and using the google maps api um we get this list of suggestions and then my map centers on that location so i'm now going to demonstrate how to put multiple points on your map and store geographic data in a format that will display nicely on a google map so uh i'm going to be grouping this into a roll into a row rather uh and adding a button in there so i can save data um so let's make this not fix with 100 there we go put that at the end the save button at the end and let's center it and let's just add a nice gap so that looks nice there we go and now i'm going to create a repeating group let's go underneath this is so that i can um be showing you the uh the maps data as text but then also displaying it on the map next to it um so let's make this width hundred min height 300 just get this space in there and uh to do this let's create a new data type uh called location and location uh will have one field and that will be address and i'm not going to store this as text because in order to pass geographic information onto a map i need to choose a geographic address and this is what enables the the interrelationship between your bubble app and the google maps api to display this data correctly okay and so then this is going to be displaying location do a search for all locations and i'm just going to get it to print the current sales location address in there and then let's make a quick workflow that's going to save when i search for the dress in here and i'll pick one uh to save that as a location so data create new thing location okay and just to double check i have this field here set as a geographic place so that way it is going to pass on geographic data so new location address equals um search box and so i don't want the place name because that will be a text value i want the value because that's my geographic data and then let's reset relevant input so it will clear the text field lastly let's set up our map to show more than one value showing the list we don't want it to be referencing directly the search box um i'm going to want it to show a list of locations do a search for location and then it gives me the address field because it knows that the address field is a geographic address field so it's the right type of data and let's hit preview and see if this works so let's go for london again london uk ad okay we've got one uh let's go somewhere else in the uk first of all to see how the map responds cambridge okay so there you see that the map has now grown in order to um get all the place markers in place let's go a little bit further afield like paris okay and in that instance it hasn't grown yeah okay so that's something to watch out for is uh how your google map responds and so you might need to um tinker with some of the settings here enabling you to set different zoom heights distances like how far out from the globe you're looking let's give it a refresh and just see if it includes all the markers okay so it looks like it might be the new responsive engine it might just be that it's a little bit buggy taking the new element um but you can see when the page loads knowing the items that are there it incorporates all of them so i wonder what happens if we go really far afield uh like um auckland in new zealand okay if i zoom out manually i'm sure we'll see that there is a point on there yes and then if i refresh it yeah there we go so it looks like when the page loads uh it zooms the map to an appropriate zoom in order to display all of your data however i would be aware and watch out for the fact that when you add data in it doesn't necessarily zoom out to include that data but anyway there is a demonstration of how to show multiple map markers use geographic data as a data type and begin to create a list of places that are displayed on the map

Channel: PlanetNoCode

Views: 8,957

Keywords:

Id: PBT3jOl4Ods

Length: 6min 6sec (366 seconds)

Published: Thu Jun 09 2022