Jump to content

Google Maps for uniGUI


lema

Recommended Posts

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()" />
 

 

Link to comment
Share on other sites

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:

Link to comment
Share on other sites

  • 3 weeks later...

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.

 

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...
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;
Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...