Is it possible to let the user input two locations and display on the map the directions from one point to another?
2 Likes
Yes, I think Vlad showed this being done by passing in the two addresses to an iFrame with Google maps.
On native bubble… You can’t.
1 Like
Hey, @NigelG! Where can this example be found?
Will find, or copy from my app into forum app.
2 Likes
<iframe
width="300"
height="350"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/directions?key=<your google maps key>&origin=<bubble's origin's formatted address>&destination=<bubble destination formatted address>">
</iframe>
4 Likes
I’ve found that and adapted it to this:
`<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Directions between places</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var request = {
origin: 'bubble origin formatted as address', destination: 'bubble destination formatted as address',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
</script>
</body>
</html>`
Here is a screenshot:
It works exactly as I need it to work. Thanks @NigelG for your answer and support!
3 Likes
Did you put that into a Bubble HTML element ? Does that work for you ?
Yes, I used a HTML element. I didn’t use an iframe or something else. Just a plain HTML. It works perfectly. I have a map placeholder, that gets hidden after the user inputs the two locations, and then I just show the html element.
Hmm, have you got something in the header ?
I get nothing displayed.
Well done on this!
I’m going to try to use this and make something similar.
So location B would be preset by default and then a user can select from 4 different Icons (tube, bus, walk, cycle), on click of the icon, the directions and route will show up on the map. Would you know how I could start this in the quickest possible way?
@NigelG here is the html frame: http://recordit.co/LujWGjmyHE
An here is the workflow: http://recordit.co/0RTa1PnDhV
I don’t have anything in the header…
@kfhwdd You could start with a html frame customised for your needs. The docs on Google Maps API’s explain all the available options you can set in this kind of html and javascript code.
2 Likes
Not sure what I was doing wrong, as I have one on page already working, but thanks for this, very handy.
Yes, you could change “DRIVING” to be a variable like the addresses, which are controlled by icons.
not sure what im doing wrong here 
Cant get the map to display. tried a couple of different options but either its a grey rectangle or its just empty. Could anyone help me out here? 
So, the weird thing is that when I do it in my own app, the auto complete of the geo search box doesnt work anymore. Its not working altogether but that is the next thing to sort out.
I got it working in the forum app, but it behaves differently on different browsers: https://forumapp3.bubbleapps.io/version-test/v56_locations?debug_mode=true
In Chrome the auto complete works.
In IE11 there is no autocomplete when the values are used in the html for the map
In IE11 there is no direction line drawn. Just a green and red map marker.
The other issue is with the travel mode. Google switched to Air when you go from Amsterdam to New York so the map stays dark when you select those destinations. I need this option, but it seems that is not available in the current API.
So i’ll have to figure something out using polyline options.
hey @EduardIchim - this is exactly what I was looking for - thanks!
I am using this in a mobile ios app project to display a venue’s directions from the user’s current location, the group that displays the HTML map also has some other standard elements such as; venue name, and a back button…the problem is that those elements are not appearing on the screen whenever the HTML map element is present. If I delete the HTML map element they re-appear on the screen as expected.
do you know what may be causing this?
Any way to change the default markers?
Yes. You will need to add some more Javascript to do this.
It is the “icon” bit in here…
1 Like
@vincent56, were you able to figure out the Air transport mode?
Yes, I use maps setup for different travel modes that are displayed when the destinations match those criteria. However, this feature isnt live yet so its been a while since i last had a look at it. It worked though 
Im using polylines now which is not as accurate as the road lines, but it does the trick for us.
Lol. It doesn’t have to be accurate - it has to function tho Please could you share your screenshots with me? If you passed through some coding, please could you share that too? Thanks a lot.