1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Donation with Paypal!!!

    Go to your paypal account and send directly donation to [email protected]

    1 month - 10 $ - Standart VIP

    6 months - 20 $- Standart VIP

    1 year - 30 $- Standart VIP

    2 years - 50 $- Standart VIP

    Gold member for life - 150 $- Standart VIP

    High Vip (Standart VIP include) group please send PM or email to [email protected] for info

    After Donation please send email to [email protected]

  3. Donation Ways 2020


    Paysend
  4. Telegram

  5. Delphifan Magazine
Dismiss Notice

Donation with Paypal!!!

Go to your paypal account and send directly donation to [email protected]

1 month - 10 $ - Standart VIP

6 months - 20 $- Standart VIP

1 year - 30 $- Standart VIP

2 years - 50 $- Standart VIP

Gold member for life - 150 $- Standart VIP

High Vip (Standart VIP include) group please send PM or email to [email protected] for info

After Donation please send email to [email protected]

Dismiss Notice
For open hidden message no need write thanks, thank etc. Enough is click to like button on right side of thread.

Using the Google Maps API V3 from Delphi

Discussion in 'Delphi Programming' started by AdminDF, Feb 25, 2014.

  1. AdminDF
    Online

    AdminDFAdminDF is a Verified Member Delphifan Staff Member DF Staff

    The Google Maps Javascript API Version 2 has been officially deprecated, so it’s time to update to the new version 3, this post shows how you can use the new Google maps V3 API from Delphi.
    in this sample application you can use the traffic layer , Bicycling layer and the street View Control to activate the panorama view.
    for additional info about the Google maps api v3 you can check these links.
    Google Maps JavaScript API V3
    The Google Maps Javascript API V3 – Basics
    Google Map Javascript API V3 – Map Types

    [​IMG]

    Source Code with exe download

    Code:
    unit fMain;
     
    interface
     
    uses
      Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
      Dialogs, OleCtrls, SHDocVw, StdCtrls, ExtCtrls, XPMan, ComCtrls,MSHTML;
     
    type
      TfrmMain = class(TForm)
        WebBrowser1: TWebBrowser;
        LabelAddress: TLabel;
        PanelHeader: TPanel;
        ButtonGotoLocation: TButton;
        XPManifest1: TXPManifest;
        MemoAddress: TMemo;
        ButtonGotoAddress: TButton;
        LabelLatitude: TLabel;
        LabelLongitude: TLabel;
        Longitude: TEdit;
        Latitude: TEdit;
        CheckBoxTraffic: TCheckBox;
        CheckBoxBicycling: TCheckBox;
        CheckBoxStreeView: TCheckBox;
        procedure FormCreate(Sender: TObject);
        procedure ButtonGotoAddressClick(Sender: TObject);
        procedure ButtonGotoLocationClick(Sender: TObject);
        procedure CheckBoxTrafficClick(Sender: TObject);
        procedure CheckBoxBicyclingClick(Sender: TObject);
        procedure CheckBoxStreeViewClick(Sender: TObject);
      private
        { Private declarations }
        HTMLWindow2: IHTMLWindow2;
      public
        { Public declarations }
      end;
     
    var
      frmMain: TfrmMain;
     
    implementation
     
    uses
       ActiveX;
     
    {$R *.dfm}
     
    const
    HTMLStr: String = //i put The code for the web page page wich load the google maps in a string const, you can use an external html file too or embed the page in a resource and then load in a stream
    '<html> '+
    '<head> '+
    '<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> '+
    '<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> '+
    '<script type="text/javascript"> '+
    ''+
    ''+//Declare the globals vars to be used in the javascript functions
    '  var geocoder; '+
    '  var map;  '+
    '  var trafficLayer;'+
    '  var bikeLayer;'+
    ''+
    ''+
    '  function initialize() { '+
    '    geocoder = new google.maps.Geocoder();'+
    '    var latlng = new google.maps.LatLng(40.714776,-74.019213); '+ //Set the initial coordinates for the map
    '    var myOptions = { '+
    '      zoom: 13, '+
    '      center: latlng, '+
    '      mapTypeId: google.maps.MapTypeId.ROADMAP '+ //Set the default type map
    '    }; '+
    '    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); '+
    '    trafficLayer = new google.maps.TrafficLayer();'+ //Create the traffic Layer instance
    '    bikeLayer = new google.maps.BicyclingLayer();'+ //Create the Bicycling Layer instance
    '  } '+
    ''+
    ''+
    '  function codeAddress(address) { '+ //function to translate an address to coordinates and put and marker.
    '    if (geocoder) {'+
    '      geocoder.geocode( { address: address}, function(results, status) { '+
    '        if (status == google.maps.GeocoderStatus.OK) {'+
    '          map.setCenter(results[0].geometry.location);'+
    '          var marker = new google.maps.Marker({'+
    '              map: map,'+
    '              position: results[0].geometry.location'+
    '          });'+
    '        } else {'+
    '          alert("Geocode was not successful for the following reason: " + status);'+
    '        }'+
    '      });'+
    '    }'+
    '  }'+
    ''+
    ''+
    '  function GotoLatLng(Lat, Lang) { '+ //Set the map in the coordinates and put a marker
    '   var latlng = new google.maps.LatLng(Lat,Lang);'+
    '   map.setCenter(latlng);'+
    '   var marker = new google.maps.Marker({'+
    '      position: latlng, '+
    '      map: map,'+
    '      title:Lat+","+Lang'+
    '  });'+
    '  }'+
    ''+
    ''+
    '  function TrafficOn()   { trafficLayer.setMap(map); }'+ //Activate the Traffic layer
    ''+
    '  function TrafficOff()  { trafficLayer.setMap(null); }'+
    ''+''+
    '  function BicyclingOn() { bikeLayer.setMap(map); }'+//Activate the Bicycling layer
    ''+
    '  function BicyclingOff(){ bikeLayer.setMap(null);}'+
    ''+
    '  function StreetViewOn() { map.set("streetViewControl", true); }'+//Activate the streeview control
    ''+
    '  function StreetViewOff() { map.set("streetViewControl", false); }'+
    ''+
    ''+'</script> '+
    '</head> '+
    '<body onload="initialize()"> '+
    '  <div id="map_canvas" style="width:100%; height:100%"></div> '+
    '</body> '+
    '</html> ';
     
    procedure TfrmMain.FormCreate(Sender: TObject);
    var
      aStream     : TMemoryStream;
    begin
       WebBrowser1.Navigate('about:blank'); //Set the location to an empty page
        if Assigned(WebBrowser1.Document) then
        begin
          aStream := TMemoryStream.Create; //create a TStem to load the Page from the string
          try
             aStream.WriteBuffer(Pointer(HTMLStr)^, Length(HTMLStr)); //Copy the string to the stream
             //aStream.Write(HTMLStr[1], Length(HTMLStr));
             aStream.Seek(0, soFromBeginning);
             (WebBrowser1.Document as IPersistStreamInit).Load(TStreamAdapter.Create(aStream));//Load the page from the stream
          finally
             aStream.Free;
          end;
          HTMLWindow2 := (WebBrowser1.Document as IHTMLDocument2).parentWindow; //Set the instance of the parentWindow to call the javascripts functions
        end;
    end;
     
    procedure TfrmMain.ButtonGotoLocationClick(Sender: TObject);
    begin
       HTMLWindow2.execScript(Format('GotoLatLng(%s,%s)',[Latitude.Text,Longitude.Text]), 'JavaScript');//Call the function GotoLatLng to go the coordinates
    end;
     
    procedure TfrmMain.ButtonGotoAddressClick(Sender: TObject);
    var
       address    : string;
    begin
       address := MemoAddress.Lines.Text;
       address := StringReplace(StringReplace(Trim(address), #13, ' ', [rfReplaceAll]), #10, ' ', [rfReplaceAll]);
       HTMLWindow2.execScript(Format('codeAddress(%s)',[QuotedStr(address)]), 'JavaScript');//Call the function codeAddress to go the address
    end;
     
    procedure TfrmMain.CheckBoxStreeViewClick(Sender: TObject);
    begin
        if CheckBoxStreeView.Checked then
         HTMLWindow2.execScript('StreetViewOn()', 'JavaScript') //Activate the Street View option
        else
         HTMLWindow2.execScript('StreetViewOff()', 'JavaScript');//Deactivate the Street View option
     
    end;
     
    procedure TfrmMain.CheckBoxBicyclingClick(Sender: TObject);
    begin
        if CheckBoxBicycling.Checked then
         HTMLWindow2.execScript('BicyclingOn()', 'JavaScript')//Activate the Bicycling View option
        else
         HTMLWindow2.execScript('BicyclingOff()', 'JavaScript');//Deactivate the Bicycling View option
     end;
     
    procedure TfrmMain.CheckBoxTrafficClick(Sender: TObject);
    begin
        if CheckBoxTraffic.Checked then
         HTMLWindow2.execScript('TrafficOn()', 'JavaScript')//Activate the Traffic View option
        else
         HTMLWindow2.execScript('TrafficOff()', 'JavaScript');//Deactivate the Traffic View option
     end;
     
    end.
     
  2. Sha
    Offline

    Sha DF Member

    RE:

    Great job, thx :)
     
  3. zhuye999
    Offline

    zhuye999 DF Junior

    thanks
     
  4. Azo
    Offline

    Azo DF Member

    That's good example.
     

Share This Page