andyhill Posted September 9, 2018 Share Posted September 9, 2018 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 More sharing options...
GerhardV Posted September 10, 2018 Share Posted September 10, 2018 @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 More sharing options...
andyhill Posted September 10, 2018 Author Share Posted September 10, 2018 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. Link to comment Share on other sites More sharing options...
GerhardV Posted September 10, 2018 Share Posted September 10, 2018 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);'+ '} ' ); 1 Link to comment Share on other sites More sharing options...
GerhardV Posted September 10, 2018 Share Posted September 10, 2018 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. 1 Link to comment Share on other sites More sharing options...
andyhill Posted September 10, 2018 Author Share Posted September 10, 2018 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 More sharing options...
GerhardV Posted September 11, 2018 Share Posted September 11, 2018 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 1 Link to comment Share on other sites More sharing options...
andyhill Posted September 11, 2018 Author Share Posted September 11, 2018 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 More sharing options...
Recommended Posts