Mobile Google Maps

[andyhill]

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;   

  s:= 'https://www.google.com.au/maps/@'+LatStr+','+LongStr+',10z';

  HTMLFrame.HTML.Add(s);

 

  // 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"?

 

[andyhill]

I changed the mobile HTMLFrame to a URLFrame and get the following error "Access Denied" error on http so will try on https and advise.

[Sherzod]

Hi,

 

Have you tried to modify the demo for your needs, if this is acceptable for you ?

 

HTMLFrame -> HTML,

HTMLFrame -> ClientEvents -> ExtEvents -> afterupdatehtml, rezise, painted events

[andyhill]

Tried all that, on https I still get Access Denied with URL frame.

 

I logged all the errors above, please advise - thanks

[andyhill]

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;

 

...

 

 

 

 

 

[Sherzod]

In this case just try with sender

ajaxRequest(sender, 'loaded', [])

[andyhill]

No Go.

 

I abandoned all my code and went back to your code only to find out that I did not have uniGUIVars in my uses clause -    

 

Can you advise how to place Pin - thanks

[Sherzod]

Hi,

 

Can you advise how to place Pin - thanks

 

Maybe this post can help you:

http://forums.unigui.com/index.php?/topic/9428-how-add-marker-in-map/

[andyhill]

Thanks - All good.

[andyhill]

Two things:-

 

1) Is there an easy way to determine if https ?

 

2) Google Maps works on Desktop but fails on iPhone with ajax error "Can't find variable: google" ?

 

Any ideas ?

[Sherzod]

Hi,

 

1) Is there an easy way to determine if https ?

 

You can use UniSession.SSL property for this

[Sherzod]

2) Google Maps works on Desktop but fails on iPhone with ajax error "Can't find variable: google" ?

 

 

Can you make a simple testcase for this?

[andyhill]

Farshad, your very own example FAILS on iOS, just run your example on iOS (I have tested it on iPhoneX, iPhone7, iPad and they all fail).

 

 

[andyhill]

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']

 

...

 

 

[andyhill]

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

                     '    } '+

                     '  ); '+

 

                     '} '

 

                    );

[andyhill]

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

[Sherzod]

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,

[andyhill]

Fantastic.

 

If I wanted the current zoom factor as well ?

 

Once I have lat, lng and zoom then I need to collect this info in a unigui handler so I can store it in a table - any suggestions would be great.

[Sherzod]

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

    });

[andyhill]

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.

[andyhill]

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

[Sherzod]

Hi,

 

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

 

Please make a simple testcase for this

[andyhill]

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.

[Sherzod]

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;

[andyhill]

Thanks.

 

map.zoom --> gm.zoom