Jump to content

Mobile Google Maps


andyhill

Recommended Posts

Firstly I would like to pass a comment to the UniGUI team, the more I work with UniGUI the more I love it - thank you.

 

It is a interesting learning curve from Delphi to UniGUI - again thanks for your patience.

 

Now the question at hand:-

 

I have some JS below that will interrogate the mobile GeoLocation services (under https) and return the Lat/Long if available - all good.

 

What I have done instead of the Alert(Lat/Long), I am sending an ajax request with the Lat/Long data so I can listen for the ajax event (via PDFmForm.PDFFrame) and then call Google Maps via GPSmForm - please advise how to format the URL with ALL the positional data - thanks.

 

 

// Get Lat/Long

procedure TPDFmForm.UnimFormTitleButtonClick(Sender: TUnimTitleButton);
begin
  case Sender.ButtonId of
    0 : begin
          // Seperator
        end;
    1 : begin
           UniSession.AddJS(
                           'navigator.geolocation.getCurrentPosition'+
                           '( '+
                             'function(position)'+
                             '{ '+
                                  // '  alert("Your latitude: " + [position.coords.latitude] + ", longitude: " + [position.coords.longitude]); '+ // removed alert and sent an ajax request with Lat/Long instead
                             '    ajaxRequest(PDFmForm.PDFFrame, "_GeoLocation" ,' +
                             '      ["lat=" + position.coords.latitude, ' +
                             '       "lng=" + position.coords.longitude, ' +
                             '       "acc=" + position.coords.accuracy, ' +
                             '       "alt=" + position.coords.altitude, ' +
                             '       "altacc=" + position.coords.altitudeAccuracy, ' +
                             '       "head=" + position.coords.heading, ' +
                             '       "ts=" + position.coords.timestamp ' +
                             '      ]);' +
                             '} '+
                             ', '+
 
                             'function(error)'+
                             '{ '+
                            '  switch(error.code) '+
                            '  { '+
                          '    case 0: '+ // UnKown
                              '      alert(error.message); '+
                          '      break; '+
                          '    case 1: '+ // Denied
                              '      alert(error.message); '+
                              '      break; '+
                          '    case 2: '+ // UnAvailable
                              '      alert(error.message); '+
                              '      break; '+
                          '    case 3: '+ // TimeOut
                              '      alert(error.message); '+
                              '      break; '+
                              '  } '+
                              '} '+
                           ') '
                          );
 
...
 
 
// Listen for Lat/Long Request
procedure TPDFmForm.PDFFrameAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings);
begin
  if SameText(EventName, '_GeoLocation') then begin
    // Make available to GPSmForm
    UniMainModule.GpsLat:= StrToFloat(Params.Values['lat']);
    UniMainModule.GpsLng:= StrToFloat(Params.Values['lng']);
    //
    GPSmForm.ShowModal;
  end;
end;
 
...
 
 
// Call Google Maps
procedure TGPSmForm.UnimFormShow(Sender: TObject);
var
  LatStr, LongStr, s: String;
begin
  LatStr:= Format('%2.4f', [uniMainModule.GpsLat]);
  LatStr:= StringReplace(LatStr, ',', '.', [rfReplaceAll]);
  LongStr:= Format('%2.4f', [uniMainModule.GpsLng]);
  LongStr:= StringReplace(LongStr, ',', '.', [rfReplaceAll]);
  //
  HTMLFrame.HTML.Clear;   
  // I need formatted URL for Google Maps with all of the Lat/Long info from position
 
 
ERROR Desktop: "Cannot Read Property 'First Child' Of Null"
 
ERROR Mobile: "Cannot find variable google" - is this in addition to above a UniServerModule Custom Files issue "http://maps.googleapis.com/maps/api/js?sensor=false"?
 

post-5752-0-30441000-1516319094_thumb.png

Link to comment
Share on other sites

I have in the URLFrame ExtEvents:-

 

function afterupdatehtml(sender, eOpts)
{
   var latlng = new google.maps.LatLng(0.0, 0.0);
   var myOptions = 
   {
     zoom: 1,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };
 
   var umap = document.getElementById("uni_map_canvas");
   var map = new google.maps.Map(umap, myOptions);
   googleMap = map;
   
   ajaxRequest(GPSmForm.URLFrame, 'loaded', []); // Tried here as well
 
   google.maps.event.addListener(map, 'zoom_changed', function() 
   {
     GPSmForm.Zoom.setValue(this.getZoom());
   }
   );
   
   google.maps.event.addListener(map, 'tilesloaded', 
   function(e) 
   {
     ajaxRequest(GPSmForm.URLFrame, 'loaded', []); // Never fired
   }
   );  
}
 
...
 
 
//  'loaded' Never Fired ?
procedure TGPSmForm.URLFrameAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings);
var
  LatStr, LongStr, s: String;
begin
  if SameText(EventName, 'loaded') then begin
    if LoadedFlag = False then begin
      LoadedFlag:= True;
      LatStr:= Format('%2.4f', [uniMainModule.GpsLat]);
      LatStr:= StringReplace(LatStr, ',', '.', [rfReplaceAll]);
      LongStr:= Format('%2.4f', [uniMainModule.GpsLng]);
      LongStr:= StringReplace(LongStr, ',', '.', [rfReplaceAll]);
      //
      UniSession.AddJS('var gm=googleMap; '+
                       'if (typeof gm=="object") '+
                       '{ '+
                       '  gm.setCenter(new google.maps.LatLng('+LatStr+','+LongStr+')); '+
                       '  gm.setZoom(17);'+
                       '}');
    end;
  end;
 
...
 
 
 
 
 
Link to comment
Share on other sites

While I await for a work around for iPhone (VERY URGENT) I can continue to develop for Desktop.

 

 

Can you be so kind as to show me how to add a UniGUI Google Maps 'click' Listener and corresponding 'click' Handler so I can reverse geocode the Lat / Long where ever I click on the map - thanks.

 

UniSession.AddJS('var gm = googleMap; '+
                     'if (typeof gm == "object") '+
                     '{ '+
 
Google Maps 'click' Listener for reverse geocode goes here
 
...
 
 
procedure ...
begin
  if SameText(EventName, 'click') then begin
    lat:= Params.Values['lat']
    lng:= Params.Values['lng']
 
...
 
 
Link to comment
Share on other sites

I will need to use my API_KEY, please show me how to add the Api_Key (https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap) to the following code below (thanks):-

 

    UniSession.AddJS('var gm = googleMap; '+
                     'if (typeof gm == "object") '+
                     '{ '+
                     '  gm.setCenter(new google.maps.LatLng('+LatStr+','+LongStr+')); '+
                     '  gm.setZoom('+ZoomStr+'); '+
 
                     '  var myLatLng = {lat: '+LatStr+', lng: '+LongStr+'}; '+
 
                     '  var circle = new google.maps.Circle '+
                     '  ( '+
                     '    { '+
                     '      strokeColor: ''#FF0000'', '+
                     '      strokeOpacity: 0.8, '+
                     '      strokeWeight: 2, '+
                     '      fillColor: ''#FF0000'', '+
                     '      fillOpacity: 0.02, '+
                     '      map: gm, '+
                     '      center: myLatLng, '+
                     '      radius: 300 '+
                     '    } '+
                     '  ); '+
 
                     '} '
 
                    );
Link to comment
Share on other sites

Farshad, I want to apologize for causing you any grief over this map issue.

 

I have just found out Google was intermittently blocking my map requests demanding that I update my API Key (by throwing random errors) - now done - now working.

 

If you could be so kind as to show me how to add a UniGUI Google Maps 'click' Listener and corresponding 'click' Handler so I can reverse geocode the Lat / Long where ever I click on the map - thanks

Link to comment
Share on other sites

Hi,

 

For example like this:

google.maps.event.addListener(map, "click", function (event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    alert( latitude + ', ' + longitude );
);

Best regards,

Link to comment
Share on other sites


google.maps.event.addListener(map, "click", function (event) {
        var latitude = event.latLng.lat();
        var longitude = event.latLng.lng();
        var zoom = map.zoom;
        
        alert( zoom + ', ' + latitude + ', ' + longitude );
    });
Link to comment
Share on other sites

Thank You.

 

Now that I have all the info I need, how do I get it from Google (JS) back to UniGUI for storing ?

 

I would have thought that I need some kind of GPSmForm Listener where JS passes the lat, lng and zoom variables.

 

Would you kindly show me how to pass these variables - thanks.

Link to comment
Share on other sites

The zoom failed, I tried many things before I asked you.

 

As for the callback from Google Maps to my UniGUI Form I need help, please advise - thanks.

 

                       '  google.maps.event.addListener '+

                       '  ( '+

                       '     gm, "dblclick", function(event) '+

                       '     { ' +

                       '       var latitude = event.latLng.lat(); '+

                       '       var longitude = event.latLng.lng(); '+

 

                       '       ajaxRequest(GPSmForm, ''_LatLong'', ["lat=" latitude, "lng=" longitude]); '+
Link to comment
Share on other sites

Please show me how to implement :-

 

//                     '       ajaxRequest(GPSmForm, ''_LatLong'', [myLatLng]); '+
or
//                     '       ajaxRequest(GPSmForm.UnimHTMLFrame1, ''_LatLong'', [myLatLng]); '+
 
I need to get Lat/Lng when clicked (not as alert but as unigui event.
Link to comment
Share on other sites

For example:

    google.maps.event.addListener(map, "click", function (event) {
        var latitude = event.latLng.lat();
        var longitude = event.latLng.lng();
        var zoom = map.zoom;
        
        //alert( zoom + ', ' + latitude + ', ' + longitude );
        ajaxRequest(MainmForm.UnimHTMLFrame1, '_LatLong', ['lat='+latitude, 'lng='+longitude, 'zoom='+zoom]);
    });
procedure TMainmForm.UnimHTMLFrame1AjaxEvent(Sender: TComponent;
  EventName: string; Params: TUniStrings);
begin
  ...

  if EventName = '_LatLong' then
  begin
    ShowMessage(Params.Values['lat']+', '+Params.Values['lng']+', '+Params.Values['zoom']);
  end;

end;
Link to comment
Share on other sites

×
×
  • Create New...