Google maps API

Wappler General
#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
Using a Google Map with an overlay showing boundaries and interact with it
#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?

#41

Depends on how your data is stored. When you have a database with fields that are called lat and lng then you can use them directly. You can also use a Repeat to create an array and set values in them (don’t forget to check the Output).

image

1 Like
#42

Thanks a lot, have lat, lng in database so will give it a try :smiley:

#43

Thanks @patrick and @Hyperbytes for all the help.

#44

Not involved into that topic, but hey thats an amazing support from you @patrick
BTW: Never saw such a nice healthy growing helpful community!

1 Like
#45

i see the question about accessing the data in js more than once in the forums.
it will be greatly appreciated if you guys put some documentation on the subject

3 Likes
#47

Hate to be a pest @patrick but i have set up lat/lng in array as you suggested

image

and I know that part is working correctly as i can see them output via a repeat:

image
image.png977×68 3.48 KB

but i dont seem to be able to get them passed to the dynamic way points.

server action returns:

image

What would my data binding be here?
image

#48

Waypoints requires an array, since your query already contains the lat/lng you don’t need the repeat. You can use serverconnect1.data.query1 as expression for the waypoints. Don’t forget to also have an origin and destination, these are required.

If you don’t get it working then send me a message with a link to a sample page which I could check. If it is a problem with the plugin then I will update it.

#49

Thanks @patrick, when you have a spare few minutes, not urgent, can you have a look at this please.

I would love to get it working and add a new how to to the site as it is an obvious gap.

https://findmystudentdigs.co.uk/testing.php

I have listed the results of the data queries in tables for you information to hopefully assist.

As soon as I remove the static parameters and add dynamic parameters the directions info breaks

#50

The origin and destination only accept an object or string, not an array. Try changing the expressions for the origin and destination to conn_origin.data.query1[0] and conn_destination.data.query1[0].