Jump to content
uniGUI Discussion Forums
andyhill

Mobile Google Maps Polylines - Help ?

Recommended Posts

I have been able to draw markers and circles fine but am having problems with polylines, can someone please advise - thanks.

UniSession.AddJS('var gm = googleMap; '+
                       'if (typeof gm == "object") '+
                       '{ '+

                       '  var PathCoordinates = '+
                       '  ['+
                       '    {lat: -37.842521707298296, lng: 144.6705822349851},'+
                       '    {lat: -37.84328847009031, lng: 144.6718965174024},'+
                       '    {lat: -37.84340920273167, lng: 144.67219424260304},'+
                       '    {lat: -37.84345580124215, lng: 144.67245307577298}'+
                       '    {lat: -37.84412353348225, lng: 144.67519362283394},'+
                       '    {lat: -37.84445395544746, lng: 144.67542965722726},'+
                       '    {lat: -37.84683464430723, lng: 144.67503269029305},'+
                       '    {lat: -37.846206649771126, lng: 144.66954341367773},'+
                       '    {lat: -37.84302853810139, lng: 144.67027782310845},'+
                       '    {lat: -37.84251570967168, lng: 144.6705956648767}'+
                       '  ];'+

                       '  var MyPolyline = new google.maps.Polyline'+
                       '  ('+
                       '    {'+
                       '      path: PathCoordinates,'+
                       '      geodesic: false,'+
                       '      strokeColor: ''#FF0000'','+
                       '      strokeOpacity: 1.0,'+
                       '      strokeWeight: 2'+
                       '    }'+
                       '  );'+
                       '  MyPolyline.setMap(gm);'+

                       '} '
                      );

Share this post


Link to post
Share on other sites

@andyhill did you have a look at the UniGMap component? There is a mobile demo as well.

http://forums.unigui.com/index.php?/topic/2363-google-maps-for-unigui/

This some sample code from it:

procedure TMainmForm.UnimButton2Click(Sender: TObject);
var
  P: TPolyline;
begin
  with P do
  begin
    SetLength(Points, 8);
    Points[0].Latitude := 37.97423;
    Points[0].Longitude := 23.746344;

    Points[1].Latitude := 37.971804;
    Points[1].Longitude := 23.742801;

    Points[2].Latitude := 37.969616;
    Points[2].Longitude := 23.739547;

    Points[3].Latitude := 37.969035;
    Points[3].Longitude := 23.737581;

    Points[4].Latitude := 37.970782;
    Points[4].Longitude := 23.732888;

    Points[5].Latitude := 37.973501;
    Points[5].Longitude := 23.735214;

    Points[6].Latitude := 37.976204;
    Points[6].Longitude := 23.735856;

    Points[7].Latitude := 37.975668;
    Points[7].Longitude := 23.740484;

    clickable := True;
    editable := True;
    strokeColor := '#FF0000';
    strokeOpacity := 0.95;
    strokeWeight := 5;
  end;

  UnimGMap2.AddPolyline(P, True);

 

Share this post


Link to post
Share on other sites

Thanks Gerhard, your solution is to use a GoogleMap Component which I do not do.

If I can add Markers, Circles and Images without a component surely I can add PolyLines ?

I would appreciate getting my sample code above to work.

Share this post


Link to post
Share on other sites

See the image attached...you were missing a comma at the end of the 4th PathCoordinate. :) I checked it with JSFiddle. Below is the corrected version with the zoom and center functions added.

UniSession.AddJS('var gm = googleMap; '+
                       'if (typeof gm == "object") '+
                       '{ '+

                       '  gm.setCenter(-37.84, 144.67);'+
                       '  gm.setZoom(15);' +

                       '  var PathCoordinates = '+
                       '  ['+
                       '    {lat: -37.842521707298296, lng: 144.6705822349851},'+
                       '    {lat: -37.84328847009031, lng: 144.6718965174024},'+
                       '    {lat: -37.84340920273167, lng: 144.67219424260304},'+
                       '    {lat: -37.84345580124215, lng: 144.67245307577298},'+
                       '    {lat: -37.84412353348225, lng: 144.67519362283394},'+
                       '    {lat: -37.84445395544746, lng: 144.67542965722726},'+
                       '    {lat: -37.84683464430723, lng: 144.67503269029305},'+
                       '    {lat: -37.846206649771126, lng: 144.66954341367773},'+
                       '    {lat: -37.84302853810139, lng: 144.67027782310845},'+
                       '    {lat: -37.84251570967168, lng: 144.6705956648767}'+
                       '  ];'+

                       '  var MyPolyline = new google.maps.Polyline'+
                       '  ('+
                       '    {'+
                       '      path: PathCoordinates,'+
                       '      geodesic: false,'+
                       '      strokeColor: ''#FF0000'','+
                       '      strokeOpacity: 1.0,'+
                       '      strokeWeight: 2'+
                       '    }'+
                       '  );'+

                       '  MyPolyline.setMap(gm);'+

                       '} '
                      );

 

chrome_2018-09-10_16-10-34.png

  • Like 1

Share this post


Link to post
Share on other sites

Andy...I played around a bit with Leaflet Maps...which are free, unlike Google Maps. They are a lot easier to work with and the API seems to require less coding. See the image below. I will do a sample project for uniGUI. ;)

 

opera_2018-09-10_17-50-22.png

  • Like 1

Share this post


Link to post
Share on other sites

Gerhard, I am so sorry that it was a typo - I put it down to old age - thank you.

I am however interested in your leaflet project to see if it has good coverage.

Also, at present Google seems to have the most exhaustive coverage so probably in Australia we would have to stick with Google.

My dream would be to have Interactive Google PolyLines (add/delete/drag points) then retrieve point info for DB storage. 

Share this post


Link to post
Share on other sites

Andy Leaflet is actually using Open Street Maps, which has very decent coverage, we use it in our products. And if you need more, then there is Mapbox which is a  pay as you go service on top of Open Street Maps.

Leaflet

OpenStreetMap

Mapbox

  • Like 1

Share this post


Link to post
Share on other sites

Thanks Gerhard, I checked out Leaflet and found that with Australia data it does not show house locations like Google and others.

My goal is to use Google Maps with Polylines (all good now).

Additionally I want the option (I will call it edit mode) to Add Points into the Polyline, Delete Points from the Polyline and most importantly Drag Polyline Points to new positions whilst viewing the map.

Share this post


Link to post
Share on other sites

×