Google Maps

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:

Quote

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 5.3K 48 downloads

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 57.22K 97 downloads

The complete source code is here (

GMaps_Demo.zip 5.31K 67 downloads), feel free to use and improve it.

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

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