Jump to content

Mobile Google Maps Polylines - Help ?


andyhill

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);'+

                       '} '
                      );

Link to comment
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);

 

Link to comment
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
Link to comment
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. 

Link to comment
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.

Link to comment
Share on other sites

×
×
  • Create New...