Google Maps for uniGUI

[albertovesx]

I don't use 64bit Delphi versions ,

but recently I tested the component in XE7 enviroment.

 

I didn't notice any problem with 64bit target builds.

 

The problem was that if I set target to 64bit, I could not add the component to the form. So, now I set target to 32bit, add the component and later set target to 64bit and it works relly well. Thank you.

[mapper]

Hi Lema, Farshad and friends

 

Sorry i'm very late answer. 

 

Lema, i am coding for GIS Professional Programs.

You know, a GIS concept is work very much vectoral shapes. If you are eating your server memory that is very wrong technic for your many users.

 

I found a methot that Farshad know, and i will share a sample project at my free time.

 

Shortly, I used JSON file and my server work like WMS (Web Mapping Server).

 

Your server create a JSON text file that contain your data with properties (id, color, opacity etc...) and client load this file.. 

 

Google Map Api V.3 is support json file with same server..

 

//we can add this code our html 

map.data.loadGeoJson('files/sample.json'); //html code.

 

google sample

 

Thanks everybody..

[sobakava]

I'm trying to place UniGmap component to a dynamically created frame but I always get white blank map.

 

This is frame with UniGmap on it:

unit frm_alarms;


interface


uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics,
  Controls, Forms, Dialogs, uniGUITypes, uniGUIAbstractClasses,
  uniGUIClasses, uniGUIFrame, uniGUIBaseClasses, uniPanel, uniHTMLFrame, UniGMap;


type
  Tfrm_alarms = class(TUniFrame)
    UniGMap1: TUniGMap;
  private
    { Private declarations }
  public
    { Public declarations }
  end;


implementation


{$R *.dfm}






end.

 

 

For testing I have created a TFrame on the main form: (frame_alarm)

 

 

 

At main form's onshow event, the map is initialized. And it works fine.

 

      frame_alarm.UniGMap1.InitializeMap;

But the thing is I want to create this frame at runtime and place it a defined position at main form's onshow event.

      Frame5 := Tfrm_alarms.Create( pnl_main );
      Frame5.Visible := true;
      Frame5.Parent := pnl_main;
      Frame5.Left := 206;
      Frame5.Top  := 94;
      frame5.UniGMap1.InitializeMap;  // ??? Seems this has no effect ??

Well when I run it, I can see both runtime created and design time created frames on main form. But the map on the runtime created frame does not work.

 

 

The picture below shows (runtime) what happens when I create an instance of pre-defined Frame runtime:

 

 

 

I have added a Refresh button on the frame. When I click this button to trigger UniGmap1.initializemap after the map frame has been displayed, the map appears. How should I initialize the map without an user interaction to do it manually?

[lema]

Hello sobakava.

In the included project there is a demo with frames.

 

Did you try it ?

Does it work for you ?

[luiz rogerio reine]

Hello Lema

 

I'm starting to use your component and it is excellent. Congratulations.

 

Only that something strange happens, the same screen time it loads, sometimes it does not load.

 

You know what's going on?

 

I put Inicialize on show.

 

Only the second time I call it's works.

 

[izotope]

Hello sobakava.

In the included project there is a demo with frames.

 

Did you try it ?

Does it work for you ?

Hi

I can not compile for XE2

Here is a mistake

[izotope]

Hello sobakava.

In the included project there is a demo with frames.

 

Did you try it ?

Does it work for you ?

Hi

I can not compile for XE2

Here is a mistake

[lema]

Hi

I can not compile for XE2

Here is a mistake

 

Hello, please try with the attached dpk.

UniGMapDXE2.zip

[lema]

 

Hello Lema

 

I'm starting to use your component and it is excellent. Congratulations.

 

Only that something strange happens, the same screen time it loads, sometimes it does not load.

 

You know what's going on?

 

 

Hello , can you post some kind of sample project that illustrates the problem ?

[luiz rogerio reine]

Hello , can you post some kind of sample project that illustrates the problem ?

Ok

 

procedure TFMapa.UniFormCreate(Sender: TObject);

begin

  UniGMap1.ClientEvents.ExtEvents.Values['resize'] :=

    'function (sender, width, height, oldWidth, oldHeight, eOpts)' +

    '{ if (typeof gm_' + UniGMap1.JSName + ' != ''undefined'') { ' +

    ' google.maps.event.trigger(gm_' + UniGMap1.JSName + ', ''resize''); }}';

   Randomize;

end;

 

procedure TFMapa.UniFormShow(Sender: TObject);

begin

   Randomize;

    UniGMap1.InitializeMap;

    UniTimer1.Enabled := true;

end;

 

procedure TFMapa.UniTimer1Timer(Sender: TObject);

var

  lat, lon : double;

begin

 

    decodeLatLon(UniMainModule.MMapaCoordenadas.AsString,lat,lon);

    UniGMap1.MapDefaultLat := lat;

    UniGMap1.MapDefaultLng := lon;

 

end;

 

Only the second time I call the form it's works.

The first not appear the map and gives error:    gm_O527 is not defined

 

try{O5CD.stopAll()}catch(e){};O577.setDisabled(false);O57B.setDisabled(false);O583.setDisabled(false);O57F.setDisabled(false);O587.setDisabled(false);O593.setDisabled(false);O56F.setDisabled(false);O573.setDisabled(false);var myLatlng = new google.maps.LatLng(-22.535412,-47.381144);var marker_0 = new google.maps.Marker({   position   : myLatlng,   map        : gm_O527,   animation  : google.maps.Animation.BOUNCE,   clickable  : true,   draggable  : false,   raiseOnDrag: true,   flat       : true,   id         : 0,   icon       : "http://maps.google.com/mapfiles/kml/pal2/icon5.png",   title      : "Marca 1",   zIndex     : 0,   clustered  : false });        markersArray_O527.push(marker_0);  if (marker_0.clustered) {    MarkerClusterer_O527.addMarker(marker_0,false);  }       google.maps.event.addListener(marker_0, "click", function(e) {   ajaxRequest(O527, "markerClick" ,    ["id=0",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng(),     "tag=" + 1    ]);});        google.maps.event.addListener(marker_0, "dragend", function(e) {   ajaxRequest(O527, "markerDragend" ,    ["id=0",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});        google.maps.event.addListener(marker_0, "rightclick", function(e) {   ajaxRequest(O527, "markerRightClick" ,    ["id=0",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});var myLatlng = new google.maps.LatLng(-22.535242,-47.380981);var marker_1 = new google.maps.Marker({   position   : myLatlng,   map        : gm_O527,   animation  : null,   clickable  : true,   draggable  : false,   raiseOnDrag: true,   flat       : true,   id         : 1,   icon       : "http://www.yessolucoes.com.br/car/static/images/tema1/rastroE.png",   title      : "Marca 2",   zIndex     : 0,   clustered  : false });        markersArray_O527.push(marker_1);  if (marker_1.clustered) {    MarkerClusterer_O527.addMarker(marker_1,false);  }       google.maps.event.addListener(marker_1, "click", function(e) {   ajaxRequest(O527, "markerClick" ,    ["id=1",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng(),     "tag=" + 2    ]);});        google.maps.event.addListener(marker_1, "dragend", function(e) {   ajaxRequest(O527, "markerDragend" ,    ["id=1",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});        google.maps.event.addListener(marker_1, "rightclick", function(e) {   ajaxRequest(O527, "markerRightClick" ,    ["id=1",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});var myLatlng = new google.maps.LatLng(-22.534715,-47.382133);var marker_2 = new google.maps.Marker({   position   : myLatlng,   map        : gm_O527,   animation  : null,   clickable  : true,   draggable  : false,   raiseOnDrag: true,   flat       : true,   id         : 2,   icon       : "http://www.yessolucoes.com.br/car/static/images/tema1/rastroO.png",   title      : "Marca 3",   zIndex     : 0,   clustered  : false });        markersArray_O527.push(marker_2);  if (marker_2.clustered) {    MarkerClusterer_O527.addMarker(marker_2,false);  }       google.maps.event.addListener(marker_2, "click", function(e) {   ajaxRequest(O527, "markerClick" ,    ["id=2",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng(),     "tag=" + 3    ]);});        google.maps.event.addListener(marker_2, "dragend", function(e) {   ajaxRequest(O527, "markerDragend" ,    ["id=2",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});        google.maps.event.addListener(marker_2, "rightclick", function(e) {   ajaxRequest(O527, "markerRightClick" ,    ["id=2",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});var myLatlng = new google.maps.LatLng(-22.535333,-47.382362);var marker_3 = new google.maps.Marker({   position   : myLatlng,   map        : gm_O527,   animation  : null,   clickable  : true,   draggable  : false,   raiseOnDrag: true,   flat       : true,   id         : 3,   icon       : "http://www.yessolucoes.com.br/car/static/images/tema1/rastroSE.png",   title      : "Marca 4",   zIndex     : 0,   clustered  : false });        markersArray_O527.push(marker_3);  if (marker_3.clustered) {    MarkerClusterer_O527.addMarker(marker_3,false);  }       google.maps.event.addListener(marker_3, "click", function(e) {   ajaxRequest(O527, "markerClick" ,    ["id=3",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng(),     "tag=" + 4    ]);});        google.maps.event.addListener(marker_3, "dragend", function(e) {   ajaxRequest(O527, "markerDragend" ,    ["id=3",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});        google.maps.event.addListener(marker_3, "rightclick", function(e) {   ajaxRequest(O527, "markerRightClick" ,    ["id=3",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});var myLatlng = new google.maps.LatLng(-22.536987,-47.381214);var marker_4 = new google.maps.Marker({   position   : myLatlng,   map        : gm_O527,   animation  : null,   clickable  : true,   draggable  : false,   raiseOnDrag: true,   flat       : true,   id         : 4,   icon       : "http://www.yessolucoes.com.br/car/static/images/tema1/rastroE.png",   title      : "Marca 5",   zIndex     : 0,   clustered  : false });        markersArray_O527.push(marker_4);  if (marker_4.clustered) {    MarkerClusterer_O527.addMarker(marker_4,false);  }       google.maps.event.addListener(marker_4, "click", function(e) {   ajaxRequest(O527, "markerClick" ,    ["id=4",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng(),     "tag=" + 5    ]);});        google.maps.event.addListener(marker_4, "dragend", function(e) {   ajaxRequest(O527, "markerDragend" ,    ["id=4",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});        google.maps.event.addListener(marker_4, "rightclick", function(e) {   ajaxRequest(O527, "markerRightClick" ,    ["id=4",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});var myLatlng = new google.maps.LatLng(-22.537073,-47.380970);var marker_5 = new google.maps.Marker({   position   : myLatlng,   map        : gm_O527,   animation  : null,   clickable  : true,   draggable  : false,   raiseOnDrag: true,   flat       : true,   id         : 5,   icon       : "http://www.yessolucoes.com.br/car/static/images/tema1/rastroSE.png",   title      : "Marca 6",   zIndex     : 0,   clustered  : false });        markersArray_O527.push(marker_5);  if (marker_5.clustered) {    MarkerClusterer_O527.addMarker(marker_5,false);  }       google.maps.event.addListener(marker_5, "click", function(e) {   ajaxRequest(O527, "markerClick" ,    ["id=5",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng(),     "tag=" + 6    ]);});        google.maps.event.addListener(marker_5, "dragend", function(e) {   ajaxRequest(O527, "markerDragend" ,    ["id=5",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});        google.maps.event.addListener(marker_5, "rightclick", function(e) {   ajaxRequest(O527, "markerRightClick" ,    ["id=5",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});var myLatlng = new google.maps.LatLng(-22.537973,-47.380352);var marker_6 = new google.maps.Marker({   position   : myLatlng,   map        : gm_O527,   animation  : null,   clickable  : true,   draggable  : false,   raiseOnDrag: true,   flat       : true,   id         : 6,   icon       : "http://www.yessolucoes.com.br/car/static/images/tema1/rastroS.png",   title      : "Marca 7",   zIndex     : 0,   clustered  : false });        markersArray_O527.push(marker_6);  if (marker_6.clustered) {    MarkerClusterer_O527.addMarker(marker_6,false);  }       google.maps.event.addListener(marker_6, "click", function(e) {   ajaxRequest(O527, "markerClick" ,    ["id=6",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng(),     "tag=" + 7    ]);});        google.maps.event.addListener(marker_6, "dragend", function(e) {   ajaxRequest(O527, "markerDragend" ,    ["id=6",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});        google.maps.event.addListener(marker_6, "rightclick", function(e) {   ajaxRequest(O527, "markerRightClick" ,    ["id=6",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});var myLatlng = new google.maps.LatLng(-22.538125,-47.380470);var marker_7 = new google.maps.Marker({   position   : myLatlng,   map        : gm_O527,   animation  : null,   clickable  : true,   draggable  : false,   raiseOnDrag: true,   flat       : true,   id         : 7,   icon       : "http://www.yessolucoes.com.br/car/static/images/tema1/rastroSO.png",   title      : "Marca 8",   zIndex     : 0,   clustered  : false });        markersArray_O527.push(marker_7);  if (marker_7.clustered) {    MarkerClusterer_O527.addMarker(marker_7,false);  }       google.maps.event.addListener(marker_7, "click", function(e) {   ajaxRequest(O527, "markerClick" ,    ["id=7",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng(),     "tag=" + 8    ]);});        google.maps.event.addListener(marker_7, "dragend", function(e) {   ajaxRequest(O527, "markerDragend" ,    ["id=7",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});        google.maps.event.addListener(marker_7, "rightclick", function(e) {   ajaxRequest(O527, "markerRightClick" ,    ["id=7",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});var myLatlng = new google.maps.LatLng(-22.537265,-47.380943);var marker_8 = new google.maps.Marker({   position   : myLatlng,   map        : gm_O527,   animation  : google.maps.Animation.BOUNCE,   clickable  : true,   draggable  : false,   raiseOnDrag: true,   flat       : true,   id         : 8,   icon       : "http://maps.google.com/mapfiles/kml/pal2/icon13.png",   title      : "Marca 9",   zIndex     : 0,   clustered  : false });        markersArray_O527.push(marker_8);  if (marker_8.clustered) {    MarkerClusterer_O527.addMarker(marker_8,false);  }       google.maps.event.addListener(marker_8, "click", function(e) {   ajaxRequest(O527, "markerClick" ,    ["id=8",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng(),     "tag=" + 9    ]);});        google.maps.event.addListener(marker_8, "dragend", function(e) {   ajaxRequest(O527, "markerDragend" ,    ["id=8",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});        google.maps.event.addListener(marker_8, "rightclick", function(e) {   ajaxRequest(O527, "markerRightClick" ,    ["id=8",      "lat=" + e.latLng.lat(),      "lng=" + e.latLng.lng()    ]);});O577.setDisabled(true);O57B.setDisabled(true);O56F.setDisabled(true);O573.setDisabled(true);O577.setDisabled(false);O57B.setDisabled(false);var myLatlng = new google.maps.LatLng(-22.536420,-47.381357);gm_O527.setCenter(myLatlng);_sfv_(O523,0,14);O543.load({params:{options:1}});

 

Thank's

 

Rogério

 

 

 

 

[lema]

Hello Rogério.

 

Is FMapa your main form?

 

If not, please try to place a gmap component on your Main Form.

(you can set it invisible.)

[marquesrb]

Hello lema, first of all, congratulations. Marvelous job.

 

I have this running on Delphi XE7, but does it work on XE8?

I got this message when I try to build the component bpl instalation:

 

[dcc32 Fatal Error] uniGUI14.dpk(30): E2225 Never-build package 'rtl' must be recompiled

[dcc32 Fatal Error] UniGMapD2010.dpk(33): E2202 Required package 'uniGUI14' not found

 

Any Idea?

 

Thanks.

 

Renato

[marquesrb]

Hello lema, I tried to install on XE7 again and I got the same issue. I forgot I've updated the uniGui components to 0.99.10.1177 version.

 

Could you help me with that?

 

Thanks.

 

Renato

[epos4u]

delete the required files, then build, it will auto put the required files, then install

[marquesrb]

delete the required files, then build, it will auto put the required files, then install

 

Ty very much, worked on both versions 

 

Renato

[marquesrb]

Helo lema.

 

I've got an issue like this:

I have a form and on "OnFormShow" procedure I use the InitializeMap procedure of the map component.

First time works fine, second time the map doesn't load, third time works fine, fourth time it doesn't, fifth time works fine, sixth it doesn't and so on.

Have you ever faced it? If somebody did, please help me.

 

Thanks.

 

Renato

[marquesrb]

Hello,

 

Complementing my previous post...

 

When I close my form at the first time and reopen it, the error occurs, but if I close it again and reopen, the map is shown normally.

It looks like something doesn't free at the first time and so on.

 

 

Renato

[lema]

 

Helo lema.

 

I've got an issue like this:

I have a form and on "OnFormShow" procedure I use the InitializeMap procedure of the map component.

First time works fine, second time the map doesn't load, third time works fine, fourth time it doesn't, fifth time works fine, sixth it doesn't and so on.

Have you ever faced it? If somebody did, please help me.

 

Thanks.

 

Renato

 

 

Hello Renato.

Do you have a unigmap component on your main form ?

If not, try it (you can set visible:=false).

[marquesrb]

Hello Renato.

Do you have a unigmap component on your main form ?

If not, try it (you can set visible:=false).

 

Hello lema.

 

Thanks, but it didn't work. 

 

I have this code on the "UniFormShow" method:

Map.InitializeMap;

 

An as I said, first time I load the form, works fine. If I close the form and reopen, it doesn't. 3rd time runs ok, 4th it doesn't and so on.

Any other idea?

 

Thanks.

 

 

Renato

[lema]

Hello lema.

 

Thanks, but it didn't work. 

 

I have this code on the "UniFormShow" method:

Map.InitializeMap;

 

An as I said, first time I load the form, works fine. If I close the form and reopen, it doesn't. 3rd time runs ok, 4th it doesn't and so on.

Any other idea?

 

Thanks.

 

 

Renato

 

Hello.

For debug purposes remove Map.InitializeMap from UniFormShow and call it on demand from a unibutton.

 

It would be a great help if you could attach a sample project demonstrating the problem.

[marquesrb]

Hello.

For debug purposes remove Map.InitializeMap from UniFormShow and call it on demand from a unibutton.

 

It would be a great help if you could attach a sample project demonstrating the problem.

 

Hi.

 

Before I test your suggestion I did the following:

I added a unitimer with "RunOnce" as true to execute 1 second after the form is loaded.

It worked, but it's a quick fix.

I'm adding an example as you asked.

 

Thanks.

 

Renato

MapExample.rar

[lema]

Hello Renato.

Yes , there is a problem.

Please use the workaround with unitimer, until I find some time to look at it.

 

 

edit:

Included files was missing.

See next post.

Edited July 12, 2015 by lema

[lema]

 

Hi.

 

Before I test your suggestion I did the following:

I added a unitimer with "RunOnce" as true to execute 1 second after the form is loaded.

It worked, but it's a quick fix.

I'm adding an example as you asked.

 

Thanks.

 

Renato

 

Hi Renato.

Now I see that you didn't include the required files

/../files/uniGmap.css

/../files/markerwithlabel_packed.js

/../files/markerclusterer_compiled.js

 

Please add them in the corresponding folder and try again.

[marquesrb]

Hi Renato.

Now I see that you didn't include the required files

/../files/uniGmap.css

/../files/markerwithlabel_packed.js

/../files/markerclusterer_compiled.js

 

Please add them in the corresponding folder and try again.

 

Hi lema.

 

I can't believe was just that. A little weird that the map runs without that files.

 

Thank you very much 

 

 

Renato

[marquesrb]

Hi lema, it's me again.

 

Sorry to bother you with the same issue, but I put the files on that folder and worked for a while. Now it's not working again 

I'm using the workaround while that.

 

Is there anyone else facing this problem or it's just me?

 

Thanks.

 

 

Renato