Google Maps Plugin - Updated

Showcase the new plugin, should make interacting with google maps API simple and easy.

Use google maps API to find Directions, Distances, Travel Duration, Place details by id, Place photo by id.

Reach out if there is a problem…more features coming soon!

(Google Maps Extended Plugin | Bubble)

6 Likes

Now updated and includes Directions, Distances, Travel Duration, Place details by id, Place photo by id, Static images. Also new icon.

More coming soon.

Leave me a review if you like it.

3 Likes

that´s exactly what i was looking for! thankyou very much, really! do you have an example of an app using it? I´m having troubles implementing it with the map of my bubble app :slight_smile: thanks again!

What are trying to do. Maybe I can make an example

Hi Ali, thanks for this plugin which seems to do what i was looking for. I just installed it but have no idea how to use it.
What I want to do is:

  • As an admin, input a category (bar, restaurant…) and a location to display the results in a RG with the places details (Name, address, rate, open now, openin hour, photo, etc.)
  • Save these places and its details so I can play with them once saved.

I used to get this to work with the old API connector but for some reasons it’s not saving properly all the fields I am retrieving from google Places…

If your plugin is adapted to the above, would you mind sharing an example so I can see how to set it up?

thanks

Hi @AliFarahat , I’m trying to figure out how utilize the street view aspect of your plugin. I’ve used a text element to display the output, but nothing seems to appear. I’ve been successful in embeding an street view iframe by reffering to Google’s API reference and implementing a streetview via iframe, but I’d like to utilize your plugin so I don’t have to recreate calls for API connector. Do you have any instructions on how implement the streetview feature?

Is the output from your plugin what I would put inside:

I believe the output is an image. Double check the Google API documentation and lete know.

Hello guys, sorry for the delay in responding I have been out and about for for 2 weeks now and I am in a place that does not have reliable internet connection. I will post some examples of how to use the plugin as soon as I get back next week.

I can’t get it to display an image or string of text. I’ve tried setting an image element equal to the API call, and also tried to set a text element equal to it. Neither displays any data. I’m probably missing something here.

Did you try it using the default settings first. Does the location you want to show has a street images

Yes, they do have location. I pasted my API key in the plugin and then set the image equal to the streetview. Are you getting results on your side? A quick post w/ screenshots would be helpful, I could be doing something wrong.

Hi Ali Farahat,

Forgive my ignorance but it’d be possible to hAve a basic example of the use of this API in a map, showing the driving directions from point A to point B?
I’d appreciate it very much.
Regards,
Nuno

Actually the plugin does not have any map integration. This just uses API service. I have another set of code you can add in an HTML element that does the trick. Give sometime as I am away from my laptop and I will share it.

1 Like

ok, thanks.

Hey, I’m a complete newbie at this and I have a few question. I am trying to use this as Dynamic Data in a text field but I never get any results, even with the default location/destination lat/long’s in place, everything’s always 0. I’ve put in my API key. What could cause this?

Hi Ali,

I’m sorry for bothering you again, but the set of code you mentioned would be of much help.

Thanks,
Nuno

Sorry about that. Here you go. Be sure to replace the API_KEY with yours

<!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?key=API_KEY&callback=initMap">
    </script>
  </body>
</html>
2 Likes

Hello again,

First of all, thank you for your answer.

Although, since I’m a beginner, I don’t know where to insert that HTML piece. I imagine it could be at the page element itself. I tried but with no result. Actually, the result was a frozen page.
I’m trying to get the driving directions into a Map B from two input elements in the page, let’s say Input A for start and Input B for destination. Are these bubble names the same as id’s? I’m asking this because in your code appears “getElementById” thing… if not, how can I set the id’s of the bubble elements?
I know I’m asking too much. If you have time and patience I’d appreciate it very much.
Best regards,
Nuno

Take a look at this link

You have to replace the following with dynamic data that you need directions for. Just insert the lat, long for each origin and destination. Also, note that map will not render till the origin and destination are both available.

origin: new google.maps.LatLng(25.245257, 55.359976), 
destination: new google.maps.LatLng(24.986390, 55.179924),

Thank you so much.