Jump to content




Recent Status Updates

  • Photo
      18 Aug
    KodeKool

    When faced with a wall of errors and no hope to fix them, remember the following "Programs always do what you tell them to, and seldom what you want them to, but eventually you'll run out of things that can go wrong and it'll just work. and that's the secret to good programming."

    Show comments (2)
  • Photo
      11 Aug
    Error

    Should I be practicing programming every day? I feel if I don't, I'll get instantly rusty or something.

    Show comments (4)
View All Updates

Developed by Kemal Taskin
Photo
- - - - -

Google Maps

delphi

  • Please log in to reply
4 replies to this topic

#1 Luthfi

Luthfi

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1,318 posts
  • Programming Language:PHP, Delphi/Object Pascal, Pascal, Transact-SQL
  • Learning:C, Java, PHP

Posted 07 January 2012 - 01:19 AM

How to show Google Maps in your Delphi application

This tutorial will at least introduce you to basic utilization of TWebBrowser. TWebBrowser is actually a wrapper to Internet Explorer web browser. Internet Explorer is by default installed in any Windows version starting from Windows 2000. Priorly you must install additional package or service packs to get Internet Explorer to your Windows.With TWebBrowser you are actually showing an interface to Internet Explorer. And you can harness all its power. You can even build a "new" web browser using it. New as in different look, different feel, new feature additions, and feature removals (as in feature hiding, ;) ). Visit this page for official information on TWebBrowser.

Therefore this tutorial main purpose is to introduce you to the use of TWebBrowser, i.e. how to easily add the power of web browser to your application. To make this tutorial more usable, I will use Google Maps for our example material.


The Problems

Let's say that we have been given assignment to develop program that:

  • User could enter location information such as ZIP/postal code, street name, city name, and landmark name and then the program shows the map of the location using Google Maps service.
  • Shows progress when querying google maps
  • Shows the url of the page that currently showing


The Development

Preparation
  • Create new application, or VCL Forms application if you are using newer versions (D2009 and above) of Delphi.
  • Drop a TPanel to the main form, name it Panel, set its Align property to alTop to make it sticks to the top part of the main form.
  • Drop a TLabel and a TEdit in Panel. Name the TEdit as edtSearch. Adjust their position and size to match the next image.
  • Drop a TStatusBar to the main form. Name it StatusBar. Add two TStatusPanel-s to it by clicking its Panels property in Object Inspector and use the property editor that pops up. For the first TStatusPanel set its Width to 300, and for the second one change its Style to psOwnerDraw. We need psOwnerDraw style for the second TStatusPanel since we will draw our progress bar here.
  • Drop a TWebBrowser to the main form. Name it WebBrowser. Set its Align property to alClient. This will make it covers the whole "body" of the main form.
Up to this stage you should get the main form to look something like this in design time.
GMaps_Design001.png


Problem 1: User could enter location information such as ZIP/postal code, street name, city name, and landmark name and then the program show the map of the location using Google Maps service

To solve this problem we will use edtSearch to capture the location information entered by the user, incorporate it into Google Maps' url, and then feed the result to our WebBrowser.

Google Maps Url

The basic of Google Maps' url is xxx - Google Maps, where the xxx part indicates the place to insert search parameter. Let's make this information a constant that can be used with Format function. We'll declare the constant in our interface section to make it available globally.

const
  GMAP_URL = 'http://maps.google.com/maps?q=%s';


Capturing search parameter

Here we want that search parameter is entered in edtSearch and the actual search operation is done after the user press enter/return key. Therefore we want to monitor OnKeyPress event of edtSearch to intercept the pressing of Enter/Return key.

Let's handle the OnKeyPress event and put the following codes for the event handler:
procedure TfrmGoogleMap.edtSearchKeyPress(Sender: TObject; var Key: Char);
var
  vAddr: string;
begin
  if Key=#13 then
  begin
    Key := #0;  // to avoid the beep sound
    OpenGoogleMap(edtSearch.Text);
  end;
end;

In the above code you can see that we intercept Enter/Return key pressing and then activate the Google Maps searching by calling OpenGoogleMap method and passing the content of edtSearch for search parameter value.

Opening Google Maps

Now that we have the search parameter, we can open Google Maps site and pass the search parameter there. This is done by OpenGoogleMap method. And the implementation of the method is:
procedure TfrmGoogleMap.OpenGoogleMap(const ASearchParam: string);
var
  vAddr: string;
begin
  vAddr := Format(GMAP_URL, [ASearchParam]);
  WebBrowser.Navigate(vAddr); // tells the web browser to visit the given address
end;

this line: "vAddr := Format(GMAP_URL, [ASearchParam]);" will incorporate search parameter into Google Maps search url. Then we pass the result (vAddr) to our WebBrowser control as the url it must visit.


Problem 2: Shows progress when querying google maps

Depends on the internet connection speed that currently in use, the delay between submitting search and getting the actual map showing can be greatly varies. For very fast internet connection, the result seems to be instant, while for people who use dial up the result would be slow to show. The problem is for slow connection, the delay may makes users think that our program hung or that the operation was not successful. Therefore we need a way to tell users that the operation is currently in progress. The common way to indicate this is by showing progress bar.

We are going show the progress by drawing progress bar in the StatusBar, in its second TStatusPanel to be exact.

To do the drawing we have to set the Style of the TStatusPanel to psOwnerDraw and handle the TStatusBar's OnDrawPanel event. However we can not draw something before we know what to draw. In this case we have to know the progress values, i.e. the maximum progress and the current progress. We can get these fromOnProgressChange event of our TWebBrowser. We'll grab those values in the event handler, store it in private variable, then refresh the StatusBar display. Like this:
procedure TfrmGoogleMap.WebBrowserProgressChange(Sender: TObject; Progress,
  ProgressMax: Integer);
begin
  FProgress := Progress;
  FProgressMax := ProgressMax;
  StatusBar.Invalidate;  // refresh StatusBar display
end;

FProgress and FProgressMax are our integer private variable. This way now the progress values are accessible through OnDrawPanel event of our StatusBar. Now we can easily write code to draw our progress bar.

procedure TfrmGoogleMap.StatusBarDrawPanel(StatusBar: TStatusBar;
  Panel: TStatusPanel; const Rect: TRect);
var
  vRect    : TRect;
  vProgress: Double;
  vWidth   : Integer;
begin
  vRect := Rect;
  InflateRect(vRect, 4, 4);
  if FProgressMax=0 then
    vProgress := 1
  else
    vProgress := FProgress/FProgressMax;

  // calculating the progress bar dimension
  vProgress := vProgress * (vRect.Right - vRect.Left);
  vWidth := Round(vProgress);
  vRect.Right := vRect.Left + vWidth;

  // draw the progress bar
  StatusBar.Canvas.Brush.Color := clFuchsia;
  StatusBar.Canvas.Brush.Style := bsSolid;
  StatusBar.Canvas.Rectangle(vRect);
end;


Problem 3: Shows the url of the page that currently showing

Technically our project is done. However there was still the last problem, i.e. to inform the user the actual url of the currently showing map. This actually very easy. We just need to handle events OnBeforeNavigate2 and OnNavigateComplete2 of our WebBrowser.

OnBeforeNavigate2 will be fired just before the TWebBrowser starts visiting a new url. The needed information, i.e. the url that is about to be visited, was provided in the event. So our code was as simple as this:

procedure TfrmGoogleMap.WebBrowserBeforeNavigate2(Sender: TObject;
  const pDisp: IDispatch; var URL, Flags, TargetFrameName, PostData,
  Headers: OleVariant; var Cancel: WordBool);
begin
  StatusBar.Panels[0].Text := 'Start navigating to ' + URL;
end;

OnNavigateComplete2 will be fired just after the TWebBrowser has been successfully visited the url. Note that the triggering of this event does not necessarily means that the page has been 100% loaded. And our code is:

procedure TfrmGoogleMap.WebBrowserNavigateComplete2(Sender: TObject;
  const pDisp: IDispatch; var URL: OleVariant);
begin
  StatusBar.Panels[0].Text := URL;
end;

Now we are done! If you compile and run the project then you might get something like this (it was showing Google Maps corresponding with search terms of "Gramedia, Medan" - bookstore in my city):
GMaps_Sample001.png

The complete source code is here (Attached File  GMaps_Demo.zip   5.31KB   400 downloads), feel free to use and improve it.

Edited by LuthfiHakim, 09 January 2012 - 06:56 PM.

  • 0

#2 Rakso

Rakso

    CC Addict

  • Senior Member
  • PipPipPipPipPip
  • 329 posts
  • Programming Language:Java
  • Learning:Java, C++

Posted 08 January 2012 - 04:18 AM

Very intresting tutorial!
What IDE do you use for Delphi? I personaly never experimented with the language so would be intresting to try it out. :)
  • 0
Was my post useful? Please take your time and press the Like This button below my post, Big Thanks!

#3 WingedPanther

WingedPanther

    A spammer's worst nightmare

  • Moderator
  • 16,988 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 08 January 2012 - 07:52 AM

Delphi is an integrated IDE, language, and compiler. The command-line compiler for Delphi is a bit of a pain, though, but there are tools that facilitate using it :). You can try out Lazarus if you want to have an open-source environment that is very, very similar to Delphi.
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#4 Luthfi

Luthfi

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1,318 posts
  • Programming Language:PHP, Delphi/Object Pascal, Pascal, Transact-SQL
  • Learning:C, Java, PHP

Posted 09 January 2012 - 02:34 AM

@TheCompBoy, thank you! I also like your tutorial on starting Android development. Perhaps I will post one of my client software to Android in near future.

As WP already mentioned, Delphi itself is an integrated product. It came as a package with nearly all the things you need to develop software. It contains IDE, compiler, debugger, resource compiler, frameworks, common library and controls, and database drivers. In the old days Delphi also comes with image editor. So when we talk about coding in Delphi, we usually also means to coding using IDE that comes with Delphi itself. It's very powerful IDE! :)

OOT: Latest delphi (Delphi XE2) supports writing application for Android. Unfortunately I haven't tried it yet.
  • 0

#5 WingedPanther

WingedPanther

    A spammer's worst nightmare

  • Moderator
  • 16,988 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 09 January 2012 - 06:45 PM

FinalBuilder comes in VERY handy if you have larger projects, or multiple executables, however.
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/