Google maps with pin

[chrisjohn82]

Hi,

I wonder if it's possible to put a pin when showing google maps. I'm reading coordinates from mysql and displaying the map that correspond to the coordinates but i want to put a pin to show exactly where on the map the location is? I looked at the google maps demo but there was no pin in the example. 

 

Best Regards

/Christian

[leons]

Hi,

 

See http://forums.unigui.com/index.php?/topic/2363-google-maps-for-unigui/

 

Regards

 

Leon

[chrisjohn82]

I tried to install the UniGMapD2010.bpl but i get an error when i try to build and install? I'm using version 0.99.95.1308 and Rad Studio XE7

[chrisjohn82]

I found the package for XE7 in the link you posted, installed without problems. 

[chrisjohn82]

This component does not work with the mobile form, need help to create a marker when the map shows and show the coordinates.

 

Best regards

/Christian

[Sherzod]

Hi,

 

Try this:

 

1. Open a demo project:

..\FMSoft\Framework\uniGUI\Demos\Touch\GoogleMaps

2.

procedure TMainmForm.SetCoord(Lat, Long : Real);
begin
  if WebMode then
    UniSession.AddJS('var gm=googleMap;if (typeof gm=="object") {var latlng = new google.maps.LatLng('+
                        StringReplace(Format('%2.4f', [Lat]), ',', '.', [rfReplaceAll])+','+
                        StringReplace(Format('%2.4f', [Long]), ',', '.', [rfReplaceAll])+
                      '); gm.setCenter(latlng); gm.setZoom(8);'+
                      
                      'var marker = new google.maps.Marker({'+
                      'position: latlng,'+
                      'map: gm,'+
                      'title: "Hello!"})}');
end;

Best regards.

[chrisjohn82]

Thank you, got it to partially work. I can see the pin but not the title? 

 

Best regards. 

[chrisjohn82]

The title works on the web form, if i hover over the pin with the mouse i can see the title, but on the mobile form it do not work. 

 

Best regards. 

[jahlxx]

Hi.

 

In the sample of delphi developer, how can I initialize de map before adding a new mark?

 

Thanks.

[jahlxx]

Hi.

 

I'm doing some combinations and I can't get what I'm looking for.

 

I'm based in the unigui sample about google maps.

 

in a button click, I show a map, with a marker.

 

in a button click, I show other different mark, but the first mark in still there in the map.

 

I don't know how to clear the previous marker before paint the new marker.

 

Some help please.

 

Thanks.

[Sherzod]

Hi,

 

Can you try this in your code?!:

https://developers.google.com/maps/documentation/javascript/examples/marker-remove

 

Best regards.

[jahlxx]

I have only one marker, at one time, not a merkers array.

 

If I put marker.setmap(null) in the afterupdatehtml of the unihtmlframe, the app raises the error: marker is undefined

 

in my case, the afterupdatehtml is:

 

function afterupdatehtml(sender)
{
   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);
    var marker, i;
    var locations = [];
    googleMap = map;
    
    marker.setMap(null);
}

[Sherzod]

Pls, can you make a small test case for this ?

[jahlxx]

Is difficult. I'll try.

[jahlxx]

Ok.

 

Here is a simple test case.

 

Thanks.

 

testmap.zip

[jahlxx]

I think that in every call to setcoord, a new blank map must be created, but this not works in this way.

 

in my opinion this could be the best solution.

 

I wait for your response.

 

thanks.

[Sherzod]

for now fast solution, try:

procedure TMainForm.SetCoord(Lat, Long : Real);
var
   script: string;
   xmark: string;
   xlat, xlon: string;
   xcm: integer;
begin
//  if WebMode then begin
    script := ('uniVars.marker; var gm=googleMap; if (typeof gm=="object") {gm.setCenter(new google.maps.LatLng('+
                        StringReplace(Format('%2.4f', [Lat]), ',', '.', [rfReplaceAll])+','+
                        StringReplace(Format('%2.4f', [Long]), ',', '.', [rfReplaceAll])+
                      ')); gm.initialize; gm.setZoom(8);gm.setMapTypeId(google.maps.MapTypeId.HYBRID);}');


    script := script + 'locations = [';

    xcm := 1;

        xmark := 'MARK 1';

        xlat := stringreplace(floattostr(Lat),',','.', [rfReplaceAll, rfIgnoreCase]);
        xlon := stringreplace(floattostr(Long),',','.', [rfReplaceAll, rfIgnoreCase]);

        script := script +
           '[''' + xmark + ''', ' + xlat + ', ' + xlon + ', ' + inttostr(xcm) + ']';


        script := script + '];' +
           'for (i = 0; i < locations.length; i++) {' +
           '   if (uniVars.marker) {uniVars.marker.setMap(null)}; uniVars.marker = new google.maps.Marker({' +
           '   position: new google.maps.LatLng(locations[i][1], locations[i][2]),' +
           '   map: googleMap,' +
           '   title: locations[i][0]' +
           '});' +
           '}';

    UniSession.AddJS(script);
//  end;

end;

[jahlxx]

Ok.

 

It works.

 

Thanks.

[jahlxx]

Oh, sorry.

 

It partially works.

 

Is I draw 2 markers every time, don't work. Your code only work for one marker.

 

Help please.

[jahlxx]

The problem is the code removes previous marker before draw the second marker.

 

Any idea?

[jahlxx]

Ok.

 

I thinh that I'm solved the issue.

 

I have cleares all the afterupdatehtml of the htmlframe, and moved to the setcoord procedure.

 

It seems that new html in generated in every map, so every map, clears the the previous map.

 

Better ideas will be wellcome.

 

Thanks.

[Sherzod]

Hi,

 

if I understand correctly
Again, you need to analyze this link and create an array of markers and when you need to remove them:

 

https://developers.google.com/maps/documentation/javascript/examples/marker-remove

 

Best regards.

[jahlxx]

yes, you are right.

 

but is more simple to clean the script in every map?

[herculanojs]

It would be possible using this concept, instead of passing coordinates, specify a location - city, address.

[himmaaliya]

Hi,

 

Try this:

 

1. Open a demo project:

..\FMSoft\Framework\uniGUI\Demos\Touch\GoogleMaps

2.

procedure TMainmForm.SetCoord(Lat, Long : Real);
begin
  if WebMode then
    UniSession.AddJS('var gm=googleMap;if (typeof gm=="object") {var latlng = new google.maps.LatLng('+
                        StringReplace(Format('%2.4f', [Lat]), ',', '.', [rfReplaceAll])+','+
                        StringReplace(Format('%2.4f', [Long]), ',', '.', [rfReplaceAll])+
                      '); gm.setCenter(latlng); gm.setZoom(8);'+
                      
                      'var marker = new google.maps.Marker({'+
                      'position: latlng,'+
                      'map: gm,'+
                      'title: "Hello!"})}');
end;

Best regards.

help me..

how to make multiple marker click ..?

 

can you upload example please..