alp.yilmaz Posted May 26, 2017 Share Posted May 26, 2017 Hello Google Maps To IMAGE <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=API_Key></script><script type="text/javascript"> var markers = [ { "title": 'Aksa Beach', "lat": '19.1759668', "lng": '72.79504659999998', "description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.' }, { "title": 'Juhu Beach', "lat": '19.0883595', "lng": '72.82652380000002', "description": 'Juhu Beach is one of favourite tourist attractions situated in Mumbai.' }, { "title": 'Girgaum Beach', "lat": '18.9542149', "lng": '72.81203529999993', "description": 'Girgaum Beach commonly known as just Chaupati is one of the most famous public beaches in Mumbai.' }, { "title": 'Jijamata Udyan', "lat": '18.979006', "lng": '72.83388300000001', "description": 'Jijamata Udyan is situated near Byculla station is famous as Mumbai (Bombay) Zoo.' }, { "title": 'Sanjay Gandhi National Park', "lat": '19.2147067', "lng": '72.91062020000004', "description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.' } ]; window.onload = function () { LoadMap(); } var map, mapOptions; function LoadMap() { mapOptions = { center: new google.maps.LatLng(19.0883595, 72.82652380000002), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); for (var i = 0; i < markers.length; i++) { var data = markers; var myLatlng = new google.maps.LatLng(data.lat, data.lng); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title }); } }; function Export() { //URL of Google Static Maps. var staticMapUrl = "https://maps.googleapis.com/maps/api/staticmap"; //Set the Google Map Center. staticMapUrl += "?center=" + mapOptions.center.lat() + "," + mapOptions.center.lng(); //Set the Google Map Size. staticMapUrl += "&size=220x350"; //Set the Google Map Zoom. staticMapUrl += "&zoom=" + mapOptions.zoom; //Set the Google Map Type. staticMapUrl += "&maptype=" + mapOptions.mapTypeId; //Loop and add Markers. for (var i = 0; i < markers.length; i++) { staticMapUrl += "&markers=color:red|" + markers.lat + "," + markers.lng; } //Display the Image of Google Map. var imgMap = document.getElementById("imgMap"); imgMap.src = staticMapUrl; imgMap.style.display = "block"; }</script><table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div id="dvMap" style="width: 220px; height: 350px"> </div> </td> <td> </td> <td> <img id="imgMap" alt="" style="display: none" /> </td> </tr></table><br /><input type="button" id="btnExport" value="Export" onclick="Export()" /> Quote Link to comment Share on other sites More sharing options...
Bertifox Posted June 3, 2017 Share Posted June 3, 2017 Hi, In the main form, I put the UniGMap component aligned to the client, when running the apps, shows the map blank. Maybe you need the api key? Quote Link to comment Share on other sites More sharing options...
Bertifox Posted June 4, 2017 Share Posted June 4, 2017 On page 17 of this thread, this answer, regarding apikey. To show the map: procedure TMainForm.UniFormShow(Sender: TObject); begin UniGMap1.InitializeMap; Unigmap1.Enabled := True; end; Lema, great work... On page 17 of this thread, this answer, regarding apikey. To show the map: Quote Link to comment Share on other sites More sharing options...
lema Posted June 4, 2017 Author Share Posted June 4, 2017 Hi, In the main form, I put the UniGMap component aligned to the client, when running the apps, shows the map blank. Maybe you need the api key? Hello, did you get your own API Key ? https://code.google.com/apis/console/ Quote Link to comment Share on other sites More sharing options...
Bertifox Posted June 6, 2017 Share Posted June 6, 2017 Hello, did you get your own API Key ? https://code.google.com/apis/console/ Thank you, it's working. Is there any way to assign an image of TUniImageList as an icon for a MarkersEx? regards Quote Link to comment Share on other sites More sharing options...
Bertifox Posted June 23, 2017 Share Posted June 23, 2017 Hello, in a form paste an unigmap and a uniboton, when pressing this one must put a mark in the map but it shows attached error. Ajax Error MarkerWithLabel is not defined I need help please. Quote Link to comment Share on other sites More sharing options...
epos4u Posted June 23, 2017 Share Posted June 23, 2017 Hello, in a form paste an unigmap and a uniboton, when pressing this one must put a mark in the map but it shows attached error. Ajax Error MarkerWithLabel is not defined I need help please. add the js files, look at the demo Quote Link to comment Share on other sites More sharing options...
Bertifox Posted June 23, 2017 Share Posted June 23, 2017 This shows in the error window. var myLatlng = new google.maps.LatLng(-29.958727,-71.339071); var myanchorXY = new google.maps.Point(50,50); var markerEx_0 = new MarkerWithLabel({ position : myLatlng, map : gm_O13, animation : google.maps.Animation.DROP, clickable : true, draggable : true, raiseOnDrag : true, flat : true, id : 0, tag : 1, icon : "http://maps.google.com/mapfiles/kml/pal3/icon16.png", title : "Marker 0", labelAnchor : myanchorXY, labelClass : "myLabel2", labelContent : "Label of Marker 0", labelInBackground : false, labelStyle : {}, labelVisible : true, clustered : true }); markersExArray_O13.push(markerEx_0); if (markerEx_0.clustered) { MarkerExClusterer_O13.addMarker(markerEx_0,false); } google.maps.event.addListener(markerEx_0, "click", function(e) { ajaxRequest(O13, "markerExClick" , ["id=0", "lat=" + e.latLng.lat(), "lng=" + e.latLng.lng(), "tag=" + 1, "xpos=" + myLatLngToPoint(e.latLng,gm_O13).x, "ypos=" + myLatLngToPoint(e.latLng,gm_O13).y ]);}); google.maps.event.addListener(markerEx_0, "dragend", function(e) { ajaxRequest(O13, "markerExDragend" , ["id=0", "lat=" + e.latLng.lat(), "lng=" + e.latLng.lng() ]);}); google.maps.event.addListener(markerEx_0, "rightclick", function(e) { ajaxRequest(O13, "markerExRightClick" , ["id=0", "lat=" + e.latLng.lat(), "lng=" + e.latLng.lng() ]);}); Copy from the UniGMap1AjaxEvent procedure Of UniGMapDemo.dll If EventName = 'maprightclick' then procedure TMainForm.UniButton1Click(Sender: TObject); begin {New Marker} SetLength(MarkersEx, High(MarkersEx) + 2); with MarkersEx[High(MarkersEx)] do begin id := High(MarkersEx); Latitude := -29.95872688; //StrToFloat(Params.Values['lat'], MainForm.fs); Longitude := -71.33907132; // StrToFloat(Params.Values['lng'], MainForm.fs); animation := maDROP; clickable := True; draggable := True; raiseOnDrag := True; flat := True; icon := 'http://maps.google.com/mapfiles/kml/pal3/icon' + IntToStr(random(50) + 1) + '.png'; title := 'Marker ' + IntToStr(id); labelAnchor.X := 50; labelAnchor.Y := 50; labelClass := 'myLabel2'; labelContent := 'Label of Marker ' + IntToStr(id); labelInBackground := False; labelVisible := True; tag := 1; AddToCluster:=True; end; UniGMap1.AddMarkerEx(MarkersEx[High(MarkersEx)]); end; Thank you This shows in the error window Quote Link to comment Share on other sites More sharing options...
lema Posted June 23, 2017 Author Share Posted June 23, 2017 Hello, in a form paste an unigmap and a uniboton, when pressing this one must put a mark in the map but it shows attached error. Ajax Error MarkerWithLabel is not defined I need help please. Hello. Please make sure that you have the required JS files in the /files directory markerclusterer.js markerwithlabel_packed.js Quote Link to comment Share on other sites More sharing options...
Bertifox Posted June 24, 2017 Share Posted June 24, 2017 Thanks Lema, now works fine, you should copy the folder files from Unigmap component to the location of the executable (.exe) Quote Link to comment Share on other sites More sharing options...
fiorilli Posted June 30, 2017 Share Posted June 30, 2017 lema How do I get the elevation through the coordinates? Quote Link to comment Share on other sites More sharing options...
du1000brazil Posted July 3, 2017 Share Posted July 3, 2017 When an application has a login form the component is not showing the map. If it does not have the form of login dai it works .. Quote Link to comment Share on other sites More sharing options...
lema Posted July 4, 2017 Author Share Posted July 4, 2017 When an application has a login form the component is not showing the map. If it does not have the form of login dai it works .. When the component is being created, it adds the necessary paths in ServerModule.CustomFiles. So, there must be an instance of uniGmap on your FIRST form. I always suggest to place an invisible uniGmap on your MainForm or LoginForm. Quote Link to comment Share on other sites More sharing options...
lema Posted July 4, 2017 Author Share Posted July 4, 2017 lema How do I get the elevation through the coordinates? Hello, I uploaded a new version which implements the API function getElevationForLocation. 2017-07-04 v1.4.6 Tested with uniGUI ver.1.0.0.1399 Online demo: http://79.143.178.31/lema/uniGMapDemo.dll Quote Link to comment Share on other sites More sharing options...
estrify Posted July 4, 2017 Share Posted July 4, 2017 Simply impressive!!!... This library is spectacular... Quote Link to comment Share on other sites More sharing options...
fiorilli Posted July 4, 2017 Share Posted July 4, 2017 Hello, I uploaded a new version which implements the API function getElevationForLocation. 2017-07-04 v1.4.6 Tested with uniGUI ver.1.0.0.1399 Online demo: http://79.143.178.31/lema/uniGMapDemo.dll Many thanks Lema, great work! Quote Link to comment Share on other sites More sharing options...
du1000brazil Posted July 4, 2017 Share Posted July 4, 2017 When the component is being created, it adds the necessary paths in ServerModule.CustomFiles. So, there must be an instance of uniGmap on your FIRST form. I always suggest to place an invisible uniGmap on your MainForm or LoginForm. Thank you very much Motto, great work! I'll try. Quote Link to comment Share on other sites More sharing options...
fiorilli Posted July 6, 2017 Share Posted July 6, 2017 Hello lema, how can I print and export to PDF the map? Quote Link to comment Share on other sites More sharing options...
lema Posted July 7, 2017 Author Share Posted July 7, 2017 Hello lema, how can I print and export to PDF the map? Hello, I tried before -without much success- to print a map with all its content. The Google Maps Javascript API doesn’t print overlays (markers, lines, etc.) and the alternative solution with the use of Static Maps API didn’t work well because the URL I was building, exceeded the max limit (I think it was 2KB). When I find some time, I will take a look at it again. In the meanwhile, I suggest to look for workarounds like html2canvas or dom-to-image. Quote Link to comment Share on other sites More sharing options...
MilkoSoft Posted July 10, 2017 Share Posted July 10, 2017 Really unbelievable, very good, congratulations. Quote Link to comment Share on other sites More sharing options...
du1000brazil Posted July 20, 2017 Share Posted July 20, 2017 Hello, I created this new procedure, so that there is no waypoint limit, google limits it by 25 points. Only I can not remove after I have created. can you help me?? To remove all created routes. With the procedure "RemoveAllRoutes" deletes only the last route created .. procedure TUniGMap.RouteUnlimitedWaypoints(DirectionsRequest: TDirectionsRequest); var Script: string; tm: string; // travelmode us: string; // unitSystem begin case DirectionsRequest.travelMode of tmDRIVING: tm := 'DRIVING'; tmBICYCLING: tm := 'BICYCLING'; tmTRANSIT: tm := 'TRANSIT'; tmWALKING: tm := 'WALKING'; else tm := 'DRIVING'; end; case DirectionsRequest.unitSystem of usMETRIC: us := 'METRIC'; usIMPERIAL: us := 'IMPERIAL'; else us := 'METRIC'; end; Script := 'var service = new google.maps.DirectionsService; '+ 'var stations = [@waypoints@];'+ 'var lngs = stations.map(function(station) { return station.lng; });'+ 'var lats = stations.map(function(station) { return station.lat; });'+ '@googleMap@.fitBounds({'+ 'west: Math.min.apply(null, lngs),'+ 'east: Math.max.apply(null, lngs),'+ 'north: Math.min.apply(null, lats),'+ 'south: Math.max.apply(null, lats),'+ '}); '+ ' '+ 'for (var i = 0, parts = [], max = 25 - 1; i < stations.length; i = i + max)'+ 'parts.push(stations.slice(i, i + max + 1)); '+ ''+ 'var service_callback = function(response, status) {'+ 'if (status != "OK") {'+ 'console.log("Directions request failed due to " + status);'+ 'return;'+ '}'+ 'directionsDisplay = new google.maps.DirectionsRenderer;'+ 'directionsDisplay.setMap(@googleMap@);'+ 'directionsDisplay.setOptions({ draggable: @draggable@, suppressMarkers: @suppressMarkers@, preserveViewport: true });'+ 'directionsDisplay.setDirections(response);'+ '};'+ ''+ ''+ ''+ 'for (var i = 0; i < parts.length; i++) {'+ ' '+ ' var waypoints = [];'+ 'for (var j = 1; j < parts.length - 1; j++)'+ 'waypoints.push({location: parts[j], stopover: false});'+ ' '+ ' var service_options = {'+ 'origin : parts[0],'+ 'destination : parts[parts.length - 1],'+ 'travelMode : google.maps.DirectionsTravelMode.@travelMode@,'+ 'unitSystem : google.maps.UnitSystem.@unitSystem@,'+ 'waypoints : waypoints,'+ 'avoidHighways : @avoidHighways@, '+ 'provideRouteAlternatives : false, '+ 'avoidTolls : @avoidTolls@'+ '};'+ ''+ 'service.route(service_options, service_callback); '+ ' '+ '}'; // myTextReplace(Script, '@origin@', DirectionsRequest.origin); // myTextReplace(Script, '@destination@', DirectionsRequest.destination); myTextReplace(Script, '@waypoints@', DirectionsRequest.waypoints); myTextReplace(Script, '@travelMode@', tm); myTextReplace(Script, '@unitSystem@', us); myTextReplace(Script, '@avoidHighways@', LowerCase(BoolToStr(DirectionsRequest.avoidHighways, true))); myTextReplace(Script, '@avoidTolls@', LowerCase(BoolToStr(DirectionsRequest.avoidTolls, true))); myTextReplace(Script, '@draggable@', LowerCase(BoolToStr(DirectionsRequest.draggable, true))); myTextReplace(Script, '@suppressMarkers@', LowerCase(BoolToStr(DirectionsRequest.suppressMarkers, true))); // myTextReplace(Script, '@EventHandler@', EventHandler); ExecJScript(Script); end; Quote Link to comment Share on other sites More sharing options...
coffeeapp Posted July 25, 2017 Share Posted July 25, 2017 Hello ! Congratulations ! This component is amazing. You can use the autocomplete feature to make it easier to search for addresses in UniEdit ? If so, is there any example ? Many thanks ! Quote Link to comment Share on other sites More sharing options...
lema Posted July 26, 2017 Author Share Posted July 26, 2017 Hello, I created this new procedure, so that there is no waypoint limit, google limits it by 25 points. Only I can not remove after I have created. can you help me?? To remove all created routes. With the procedure "RemoveAllRoutes" deletes only the last route created .. procedure TUniGMap.RouteUnlimitedWaypoints(DirectionsRequest: TDirectionsRequest);....end; Hello, I will look at it ASAP. Quote Link to comment Share on other sites More sharing options...
fiorilli Posted July 27, 2017 Share Posted July 27, 2017 Hi Lema, have you seen this error? Quote Link to comment Share on other sites More sharing options...
epos4u Posted July 27, 2017 Share Posted July 27, 2017 Hi Lema, have you seen this error? Hi check your file folder, might not have the js files in there Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.