Hi Bubble pro’s - Can I have a map like Google My Maps in my app so users can plan a trip and save it, and/or see their location history? I have a google map in my app so far with location markers but can not work out any of these more specialised features can work
Thanks in anticipation
Are you looking for users to have a list of locations that display in a google map? If you are then create a table that stores type Geo Location as things.
then modify the map to show you a list of those things.
Thanks for your response Ali. Yes I already have that feature. Google My Maps does a bit more in that you can plan a trip and it will tell you how far it is from one place to another and you can save the route as well as the destination. So far all I can do is save a list of destinations (or locations)
Unfortunately, I don’t have an answer to this, however, I need your help @motorhome. Please, how did you create your list of locations perusers and did you connect the locations with lines? Thanks
And, how do i connect the two locations with a line (for the distance) @AliFarahat? Thanks
Hey @motorhome
What you need to do is use the HTML as an iframe and add the following code replacing the Lat and long for both starting and ending location. The code is below. Please note that you need an API key to use this feature which you can obtain from google developer console
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: 24.758402,
lng: 54.929581
}
});
//** Enable below for Traffic layer
//var trafficLayer = new google.maps.TrafficLayer();
//trafficLayer.setMap(map);
directionsDisplay.setMap(map);
directionsService.route({
origin: new google.maps.LatLng(25.245257, 55.359976),
destination: new google.maps.LatLng(24.986390, 55.179924),
travelMode: google.maps.TravelMode.DRIVING
},
function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
As for returning the distance and time of the trip you need to use the Bubble API connector and call the following google API
https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=Washington,DC&destinations=New+York+City,NY&key=YOUR_API_KEY
the result will look like this
{
"destination_addresses" : [ "New York, NY, USA" ],
"origin_addresses" : [ "Washington, DC, USA" ],
"rows" : [
{
"elements" : [
{
"distance" : {
"text" : "225 mi",
"value" : 361713
},
"duration" : {
"text" : "3 hours 48 mins",
"value" : 13666
},
"status" : "OK"
}
]
}
],
"status" : "OK"
}Thanks so much @AliFarahat - this is just where I am heading. I will need a little further help though as although I am getting the hang of Bubble (and loving it) I have never worked with an API or code before.
So I have put an iframe into my page and the copied the code from above - great I get a map with a directions from one place to another. I guess I need an input field for the origin and destination. I really have no idea where to start with these input fields or how to get the API key, although I have found the Google developer console.
Also how do I call the google API’s you mention? Is there a lesson anywhere on any of this??
Feeling privileged to help on this @culpop. I have learnt so much from this forum it is great to be able to give back.
I have not been able to connect the locations with lines as yet, hence the reason I started this post, but to create the list of locations I did a few things. I must first preface this with I am very new to this but was very pleased when I came up with this workable workflow - there may be better ways but it does achieve the desired result
Firstly I have a new campsite popup with lots of data entry fields about the campsite. To capture the location of the campsite I used a RadioButtons input
A user may want to input their current location (if they are inputting this whilst at the campsite) or want to type a known address or if the campsite is in the middle of no where they may want to choose the location on a map. Therefore beside the radiobuttons I have 2 maps and 1 Autocomplete Dropdown. 1st map is to choose a location on a map
The 2nd map allows the user to choose their current location
The autocompelte dropdown filed allows the user to type the address instead
All these elements are not visible on page load but have conditions on which to load. They are
Set the other two similar to get the desired input to match the radio button
Then in the workflow I have 3 different ones depending on which input is used
Each workflow creates a new campsite with lots of fields including location. That is either
or
or
Then when I want to display all the campsites on the one map I use
Hope this helps
Thanks a great deal @motorhome! I am looking at it right now. I will get to it tomorrow and keep you updated! Thanks so so so much!!!
Hey @motorhome
Can you provide a link to your editor. I will setup an example for you on the google api
Thanks @AliFarahat. Here is the link https://bubble.io/page?type=page&name=trip_planning&id=vehicle-based-travel&tab=tabs-1
Ok so i have access and i created this example for you. Things to note or take notice of
Dynamic data in the HTML element where i extracted the lat and long in this format (lat, long). Notice the first bit is the where to center the map. This works better if you have a static value. the second bit is starting point and the third bit is the destination.
Head over to google developer console, create a new project, then press the API button
After that press enable API
Then goto the API below and enable each of them
What you want to do next is create some credentials (API KEY) so go here
use the provided API in the HTML block and the API connector plugin. For the purpose of your example i am using my own API so please change that at the earliest.
I have setup the API connector and got it to work with the map. Follow the same structure as i have setup again changing the API key. When fields are completed you should get something like this with the duration and distance
The link to the editor is here
https://bubble.io/page?type=page&name=tripplanning2&id=vehicle-based-travel&tab=tabs-1
https://vehicle-based-travel.bubbleapps.io/version-test/tripplanning2?debug_mode=true
Enjoy…
Thanks @AliFarahat. I have to go to work in my real job tomorrow but will get to look at this as soon as I can and get back to your. Your help is really appreciated
I have had a very quick look though and all I can say for now is “wow wow wow”. I look forward to getting into this as soon as I can
This is so amazing, thank you @AliFarahat!
I didn’t know this was an option. The iFrame was perfect for adding a map of our service area which is saved in Google maps. Do you know if there is a way to hide the grayish bar at the top of the map which displays a menu, map name, and view/share options?
Can you share to code for the HTML. i give it a try
Thanks so much again @AliFarahat. I have implemented this with my own APi key and all is working well. I have a few questions now.
The first one I worked out for my self - how to change the distance from miles to kilometres. That part was easy and I found the units key in the API connector and changed it to metric.
1)Following on from this my next question is - how do I make this dynamic depending on a users settings. I have a setting that allows the user to choose whether they see their data in metric or imperial. Can I somehow use this setting to change the google map output depending on where the user lives (an therefore sets their setting). I must add though this setting is not very technical as it does not convert data at this time it simply shows a field with miles or kilometres as the unit. I do hope to build a conversion for other aspects of my app in the future but this will work for now.
2)Can I add more destinations just like Google does in their Maps so I can plan to go from point A to point B then C then D etc etc?
To make the imperial/metric dynamic I suggest to add a text field on the user table called units. Then create a drop down on the user profile page that has the 2 static values.
In the API connector set the units to client safe. So you can pass on the parameter dynamically.
As for multiple stops i did that once. You need to store the stops in as a list and call on them. Give me some time I will dig around to find that code and maybe I can prepare an example for you.
Actually, my partner was saying he wanted to give map box a try instead. I think that is what it is called. It seems that has a much more flexible functionality.
Thank you for being so willing to help!
Thanks again @AliFarahat. I look forward to your code for multiple stops when you get a chance to dig it out.
In the mean time I have added a text field to the user table and have a dropdown for the two values (metric and imperial) and save that data to the user. In the API connector I have set the units to client safe but what do I put in the Values section
I have tried several options but can not get it to change when I change the users value in the database
You have to set a value in the API connector
