Google maps API

Wappler General
21

Interesting. So If I use the static waypoints option with coordinates, it works. If I use coordinates in the dynamic waypoints, it does not work.

2019-05-21_11-17-15
2019-05-21_11-17-15.jpg337×735 48.7 KB

It shows I am using them at the same time, but it’s just for illustration. The dynamic waypoints do not work even when I enter them without the static waypoints.

Here it is with static:

2019-05-21_11-16-49
2019-05-21_11-16-49.jpg1396×531 292 KB

This would be great if I could get it with dynamic waypoints.

22

Yes, i tried and had exactly the same problem, unfortunatley there is absolutely no documentation on this at this time. I recall an issue with in an old post where @patrick was going to make some changes so perhaps he could enlighten us as to exactly how to pass multiple dynamic waypoints.
I will be happy to prepare documentation and a video if we can resolve this issue

(Found the old post which was related to the data format of parameters passed to it:)

EDIT: .js file indicates it needs an array of string, maybe the changes indicated in the old post never happened as they are all still type:string)

23

I saw that post as well. Maybe we can either get an answer or resolution. Thanks for your assistance in helping me with this!!
Be great if we could get this to work and you could add some documentation for it. Your videos are great.

1 Like
24

So after looking at the Google Maps API reference, what I need to do is draw lines between the markers. Here is the documentation.
https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

It looks looks like you just put in the coordinates and define the line.

var flightPlanCoordinates = [
          {lat: 37.772, lng: -122.214},
          {lat: 21.291, lng: -157.821},
          {lat: -18.142, lng: 178.431},
          {lat: -27.467, lng: 153.027}
        ];
        var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });
        flightPath.setMap(map);

However I don’t know enough about JavaScript to make this happen. What does it take to grab those flightplan coordinates from a database query? Then how do you integrate it into the Wappler Google Maps code?

25

This is why I think you should not try to use the Google maps Wappler component. Instead try to access Google maps using the API component. Don’t know if it will work but if it does you will be able to do anyhting with Google maps inside Wappler

26

That is a very good point. The Google Maps API is very robust indeed…

27

I have done custom google maps in the past. what platform are you using? Php? I will see if I can get a solution working and post it.

28

Just 2 cents quickly - We are using Mapbox at our startup now. Very good alternative to look at if you have time. They have a free tier.

Very well documented API

3 Likes
29

No php, we have used classic asp in the past, but trying to do all of our newer projects ASP.NET.

30

@pixlapps, are you able to integrate dynamic data from Wappler into Mapbox?

31

OK, the issue is integrating the wappler data into the js script, not sure my .net is up to that

32

Sorry - I have not worked with it before. Was just a alternative I suggested if things with Google does not work out.

33

Ok thanks. I will take a look at it today.

34

Right, just need to integrate the data bindings in Wappler into the map api. I tried playing around last night with it, but couldn’t get it to work.

35

Did a small test and it is easy to draw the on the map. Here my test code.

<dmx-google-maps id="maps1" onready="drawPath(this)" width="800" zoom="3" latitude="0" longitude="-180" maptype="terrain"></dmx-google-maps>
<script>
  function drawPath(component) {
    var map = component.map;
    var flightPlanCoordinates = [
      {lat: 37.772, lng: -122.214},
      {lat: 21.291, lng: -157.821},
      {lat: -18.142, lng: 178.431},
      {lat: -27.467, lng: 153.027}
    ];
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

    flightPath.setMap(map);
  }
</script>
1 Like
36

Thanks @patrick, I have that, straight from the docs. Using that code I was able to verify that’s what I need for my project. However, I want to use a datasource from Wappler to populate the flightplan coordinates. Wappler is already doing this for the markers or something very similar, right?

37

To get wappler data from within JavaScript you can just parse an expression like:

var myData = dmx.parse('serverconnect1.data');
1 Like
38

While you are there @patrick, can you assist with this enquiry re passing dynamic coords to the directions app connect module

39

Where do you want to add these values? You should add them as Dynamic Attributes. I believe you can also use lat/lng coords like {lat: 37.772, lng: -122.214} or with data from a database { lat: serverconnect1.data.latitude, lng: serverconnect1.data.longitude }. For the waypoints you can pass an array with these objects.

40

So to use a server connect response to set waypoints i have to convert the server connect response to an array with elements in the format {{lat: 1.123456, lng: 1.123456}} and use that as the waypoints dynamic value, it can’t be done directly from a server connect response?