Mobile Google Maps

andyhill · January 18, 2018

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;

...

// 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 · January 19, 2018

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 · January 19, 2018

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 · January 19, 2018

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

I logged all the errors above, please advise - thanks

andyhill · January 19, 2018

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;

...

Sherzod · January 19, 2018

In this case just try with sender

ajaxRequest(sender, 'loaded', [])

andyhill · January 19, 2018

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 - :wacko:

Can you advise how to place Pin - thanks

Sherzod · January 19, 2018

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 · January 19, 2018

Thanks - All good.

andyhill · January 19, 2018

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 · January 20, 2018

Hi,

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

You can use UniSession.SSL property for this

Sherzod · January 20, 2018

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 · January 20, 2018

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 · January 20, 2018

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 · January 20, 2018

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 · January 21, 2018

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 · January 21, 2018

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 · January 21, 2018

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 · January 21, 2018



    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 · January 21, 2018

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 · January 22, 2018

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 · January 22, 2018

Hi,

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

Please make a simple testcase for this

andyhill · January 22, 2018

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 · January 22, 2018

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 · January 22, 2018

Thanks.

map.zoom --> gm.zoom

Sign In

Mobile Google Maps

Recommended Posts

andyhill

andyhill

Sherzod

andyhill

andyhill

Sherzod

andyhill

Sherzod

andyhill

andyhill

Sherzod

Sherzod

andyhill

andyhill

andyhill

andyhill

Sherzod

andyhill

Sherzod

andyhill

andyhill

Sherzod

andyhill

Sherzod

andyhill

Browse

Activity