Dismiss Notice

REGISTRATION IS AFTER ADMIN ACTIVATION

DONATIONS WITH PAYPAL CLICK TO BUTTON

1 MONTH VIP - 5$; 3 MONTHS VIP - 10$; 6 MONTHS VIP - 20$; 1 YEAR VIP - 30$; 2 YEARS VIP - 50$; GOLD USER FOR LIFE VIP - 150$

DONATIONS WITH Bitcoin Address:3NRs3CK3fhXifrNYxHEZKpETDd9vNLMsMD

Dismiss Notice
The registration is approved by the Administrator. It takes about 1 day to approve your registration
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 N0body, Feb 25, 2014.

  1. N0body
    Online

    N0bodyN0body is a Verified Member DelphiFan Administrator 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

Laws
Our website, law, laws, copyright and aims to be respectful of individual rights. Our site, as defined in the law of 5651 serves as a provider of space. According to the law, contrary to the law of site management has no obligation to monitor content. Therefore, our site has adopted the principle of fit and remove. Works are subject to copyright laws and is shared in a manner that violated their legal rights, or professional associations, rights holders who, adsdelphi@gmail.com I can reach us at e-mail address. Complaints considered to be infringing on the examination of the content will be removed from our site.
Donate Help To Us and Be VIP
DONATIONS WITH PAYPAL CLICK TO BUTTON
6 MONTHS VIP - 20$; 1 YEAR VIP - 30$; 2 YEARS VIP - 50$; GOLD USER FOR LIFE VIP - 150$
Social Block