Google maps API

Thanks Patrick

Normally have the dynamic update flag set, must have switched it off when trying to get it working and not noticed. Set now (still not working)

lat, lng are decimal (12.8) at present in table

Seems that PHP PDO returns Fixed-Point types (DECIMAL, NUMERIC) as strings. Also BIGINTs can be returned as string. So I will update the google maps and directions plugins to work with string values in lat/lng also.

Thanks Patrick, you are a star as always. Once all updated I will do a “how to”.

Are you also going to change the default wappler behaviour for origin and destination to default to:

connection.data.query[0] rather than connection.data.query ?

The update is ready. I also let it accept array for origin and destination now, it will just take the first value from the array so that connection.data.query will also work.

dmxGoogleDirections.zip (2.2 KB)

You really are a clever man, works a treat. Thank you again for your amazing work.

Thanks @patrick and @Hyperbytes.

Will sort out a tutorial over the weekend

3 Likes

Great work Brian and Patrick, this is definitely on my ‘wanted’ list. I need this for two reasons…

  1. For a project to plan inspections for an engineer. He would be presented with say 6 locations as a list and then be required to plan his own route by dragging the location order. That would then be saved as his route for the day.

  2. For my own roadtrip route planning :smile: as we love to drive around and see all parts of the UK. In this case I would start with an origin and destination, and would want to add intermediate waypoints by clicking on the map to add to the list, would this be possible? This is so I could plan a route to go on a particular road, through a certain scenic spot, or past a well-known landmark. And then change that order by dragging. Currently you cannot do this in Google and save it for use on a mobile device.

Great work guys.

Brian’s Road trip is the title of the video I am doing on this!
No map click waypoints, sorry, alternative routes but no dragging.
there is be intelligent route planning however

2 Likes

Still having an issue inserting dynamic data to draw on the map. I took your code (it works great), the same as the example in the google documentation and added the binding like this:

 <dmx-google-maps id="maps1" onready="drawPath(this)" width="800" zoom="12"  dmx-bind:address="SelectedDestination.data.qSelectedDestination[0].DestinationZip" maptype-control="true" zoom-control="true" scale-control="true" scrollwheel="true"></dmx-google-maps>
<script>
  function drawPath(component) {
    var map = component.map;
    var flightPlanCoordinates = dmx.parse('DestinationGeoFence.data.qDestinationGeoFence');
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

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

I get this error which tells me I am not giving it an array:

image

I have also tried creating the array in the query using repeat:

image

Here is my output:

Thanks,
Chris

The error indeed indicates that the path (flightPlanCoordinates) is not an array. Type dmx.parse('DestinationGeoFence.data.qDestinationGeoFence') in the console to inspect the result of it.

I get “undefined”. If I’m doing it correctly, that is, lol.

image

Then the expression is probably incorrect, where is the DestinationGeoFence component located? Maybe it is nested, do you have the page online for me to check?

Just sent you the link as PM

Following this closely, please post any solution

1 Like

This is from @patrick:
The expression is correct, problem is that the data is not loaded when the map is ready.

Change the function to

function drawPath() {
  var map = document.getElementById('maps1').dmxComponent.map;
  var flightPlanCoordinates = dmx.parse('DestinationGeoFence.data.repeat1');
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

 flightPath.setMap(map);
}

Then on the DestinationGeoFence serverconnect component listen to the done or success event.

<dmx-serverconnect id="DestinationGeoFence" ondone="drawPath()" url="../../dmxConnect/a

I believe the issue was that I was activating the sever connect action after the map was loaded. I was doing this because I was selecting the geofence location from a table and displaying it in a modal. After trying Patrick’s solution is works beautifully.

Patrick,
Thank you so much for your assistance on this.

@Hyperbytes, thanks for your assistance as well.

1 Like

Just delighted that is an other weapon in Wappler armoury of techniques

Did you ever solve adding or dragging points directly in the map?
I was able to do this in another environment by dragging an existing point and on mouseup (i think) calling a function to update that point in the db to the new x,y.
There, the points were always draggable do I turned that off. If it’s off, you can’t move the point so I added a button in the list for edit. It drew the map with only that point, now draggable. Move it. Updates loc. done.
Never needed to add a new one.
Just wondering 3 years on how much people have done with the maps?

I did some work with the drawing api and layer that on top of the wappler map component. You can really do anything you want with the api, but it’s all javascript.

1 Like