Jump to content

Google maps with pin


chrisjohn82

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Upvote 1
Link to comment
Share on other sites

  • 4 weeks later...

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...
  • 1 year later...

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..

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...