See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/251923396

Using Google Maps API along with technology .NET

Article · January 2010

CITATIONS READS

14 5,204

2 authors, including:

Wojciech Zabierowski
Lodz University of Technology
138 PUBLICATIONS 379 CITATIONS

SEE PROFILE

All content following this page was uploaded by Wojciech Zabierowski on 04 June 2014.

The user has requested enhancement of the downloaded file.

 1

Using Google Maps API along with technology .NET

Michał Konarski, Wojciech Zabierowski
Abstract - This paper describes how Google Maps
API interface can be used together with .NET technology,
on example of a web portal for drivers.
Keywords – Google Maps API, .NET, JavaScript.
I. INTRODUCTION
I am sure that everyone who use the Internet, has at least
once encountered Google Maps service. You have probably
checked it to see a satelite picture of Your home or a place
You wanted to visit. Basically it is used on companies's
private websites to point locations like “You can find us here”.
It can be easily achieved also on Your website with Google
Maps API. If You want to learn how to do that and how this
interface can be used to develop rich web applications, You
should read the following paper. It will cover the topic of
using Google Maps API together with technology .NET on
example of web portal for drivers. Pic. 1
I decided to use the TabContainer control from Ajax Control
II. GOOGLE MAPS (API) Toolkit project, because we can place each section of our
Google Maps service was presented by Google corporation interface in separate tab and access all of them instantly,
on February 2005. It was combined with Google Local, which without refreshing the page. You can download this control
offered relevant neighborhood business listings, maps and from the project's website (see references, position 3). For
directions. From the start, Google Maps service was only example, when the first tab is active, we can browse through
available in U.S.A. and Canada. First European country to the map's data and see detailed information about it. So You
receive maps and satelite pictures was United Kingdom. should place some labels and textboxes in the tab to handle
Nowadays, it is available in majority of European countries, the information. When the second tab is active, we could add
Poland included. However, high resolutions pictures are only speed cameras. Here, You can place some checkboxes and
available in big cities, where single trees or buildings can be buttons, to get some information from the user about the speed
distinguished. When the service was first presented, it could camera, like if it is active or in which province or town it is
be only accessed through http://maps.google.com website. As placed. A simple button can commit the addition. It’s all up to
it popularity grown, Goggle company decided to share it with You. The TabContainer control combined with one object of
whole world, by creating Google Maps API. It allows Google Map will do our interface. An important thing is, that
developers to integrate Google Maps into their websites with we will load the whole page just once and later do only partial
their own data points. It is free to use, but You need to acquire page refreshing by using UpdatePanel controls. This way, we
an API key, which is bound to the website and directory can avoid filling our map with all the data each time a user
entered when creating the key. After having the key generated, will generate a postback.
we can start building our application.
To start, we need to include the Google Maps API script on
III. THE CONCEPT our asp page.
Let’s say that we want to create a portal, where users can
place miscellaneous, valuable information for drivers like <script src="http://maps.google.com/maps?file=api&amp; v=
speed cameras, road repairs, services and dangerous places. It 2.x&amp;key=..." type="text/javascript"></script>
could be then discussed by the community of drivers, so it Listing 1
isn't an object of advertising and would present a honest
The key attribute value should be the one You have generated
source of knowledge. This paper isn't about creating a
before. Next, we need to place the map itself in a div block,
complete portal in .NET technology, but only about using it
with Google Maps service. So, I assume that the reader is <div id="map"></div>
familiar with ASP.NET and basics of creating web Listing 2
applications and I will focus on using Google Maps API. You
can take my suggestions of how your application should look, and then initialize it in JavaScript with a Gmap2 object and set
but You are more than welcome to build a kind of Your own. a starting point:
The foundation of our portal will be an interface, which will var map = new
enable the users to browse through the map's content and also
place information on it. GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Wrzesień 2009, Łódź

 Listing 3 the map is initialized. It invokes the GetDPoints WebMethod
The setCenter function takes a GlatLng object (represents and if succeeded, InitDPointsArray function is called.
coordinates) and zoom level. When You invoke the above function InitDPointsArray(result) {
script, You should see Your first map. if (result != null) {
dpointsArray = result;
III. FILLING THE MAP
}
Now that we have our map, we need to fill it with overlays.
We will produce a WebService in .NET, responsible for InitOverlays();
retrieving them from database and returning them to }
JavaScript function, which will place them on the map. Listing 7
Database should contain information about the position
The result parameter is actually our list of ServiceOverlay
(latitude and longitude) and outlook of each overlay. Our
objects. After filling the dpointsArray, we can finally call the
Webservice will be called OverlayService and it should be
InitOverlays function, which will fill the map.
declared like this:
[System.Web.Script.Services.ScriptService]
public class OverlayService :
System.Web.Services.WebService
IV. MARKER MANAGER
{ Before we continue, I should say a few words about
[WebMethod, ScriptMethod] MarkerManager class. It is used to manage visibility of
public List<ServiceOverlay> GetDPoints() hundreds of markers on a map, based on the map’s current
{ viewport and zoom level. Our application is almost certain to
... have lots of overlays, so it is recommended to use the
} MarkerManager class, to make it more readable. Another
}
reason for using it, is that it will make our application faster,
Listing 4 because all overlays would not be rendered together.
It is important to include the ScriptService attribute, so the Now, we can get back to InitOverlays function.
WebService could be called from JavaScript. Inside it we have
function InitOverlays()
an example WebMethod called GetDPoints, which will get all
“dangerous places” from database. The implementation of {
GetDPoints method is up to You, but in the end it should map=new GMap2(document.getElementById("map"));
return a List of ServiceOverlay objects. var i = 0;
public class ServiceOverlay map.setCenter(new GLatLng(51.76, 19.52),
{ 12);
private string _lat; map.addControl(new GLargeMapControl());
private string _lng;
private string _id;
private string _outlook;
private string _type; mgr = new MarkerManager(map);
var batch = [];
public string lat
{
get { return _lat; } for (i = 0; i < dpointsArray.length; i++)
set { _lat = value; }
} {
...
} var Icon = new GIcon("", "", "");
Icon.image = dpointsArray[i].outlook;
Listing 5
Icon.iconSize = new GSize(30, 30);
where _outlook is a custom overlay icon file name and _type Icon.iconAnchor = new Gpoint(0, 30);
is our portal’s overlay type (speed camera, repair, dangerous
Icon.infoWindowAnchor = new Gpoint(5,
point,…). The ServiceOverlay object is not made of other 2);
complex objects, so it’s properties are automatically serialized Icon.transparent = “”;
to JSON format (understood by JavaScript) and we don’t have
Icon.shadow = “”;
to worry about it.
Next, let’s look at JavaScript side of the procedure: var point=new GlatLng(
var dpointsArray = []; dpointsArray[i].lat,
function GetOverlays() { dpointsArray[i].lng);
OverlayService.GetDPoints(InitDPointsArray); batch.push(
} CreateMarker(point,
Listing 6 dpointsArray[i].id,
First, we may want to declare an array for our overlays. Next, Icon,
we have a function GetOverlays which should be called when dpointsArray[i].type)
 1
); OnClientActiveTabChanged
} ="Client_ActiveTabChanged" >
mgr.addMarkers(batch, 10);
JavaScript:
mgr.refresh();
} function Client_ActiveTabChanged(sender,e) {
active_tab_index=sender.get_activeTabIndex();
}
function CreateMarker(point, id, Icon ,type)
{ Listing 10
var marker = new GMarker(point,
Now, we need to assign the dispatcher to the map’s “click”
{icon: Icon,});
event with GEvent object.
marker.value = id;
GEvent.addListener(map, "click",
return marker;}
function(marker, point) {
Listing 8
MapEventDespatch(point);
At the beginning we initialize a GMap2 object, center the map
and add a standard map control. Then, we create a });
MarkerManager object (variable mgr) and a batch array, Listing 11
which holds the overlays for the MarkerManager. Next, we a
An overlay event dispatcher may look like this:
loop through the dpointsArray, adding markers returned by
CreateMarker function to the batch. Our markers have custom function OverlayEventDespatcher(id) {
icons, represented by GIcon object. Its properties are if (active_tab_index == 0)
described on Google Maps API Reference website (see {
references, position 5). Finally, we fill the mgr variable with // browse clicked overlay
batch array¸ by addMarkers function and refresh it to see the }
effect. else if (active_tab_index == 1)
V. HANDLING EVENTS {
To continue with construction of our user interface, we // remove speed camera
must handle the events generated by the map and overlays. }
What we want to do, is to distinguish the events based on else if (active_tab_index == 2)
active tab of our TabContainer control. Among others, that is {
because we don’t want to add repairs on the map while the
// remove repair
speed cameras tab is active and vice versa. When user clicks
}
the map, a map dispatcher should be called:
function MapEventDespatcher(point) { Listing 12
if (active_tab_index == 0) VI. COMMUNICATION
{ To be able to respond properly to each kind of event on
// do nothing your ASP page, You can use hidden fields of form. For
} example, if an overlay is clicked, You can save its ID in a
else if (active_tab_index == 1 hidden textbox and then programmatically press a ASP button
{ from JavaScript:
//add speed camera at clicked point var hidden_txt =
} document.getElementById("hidden_txt");
else if (active_tab_index == 2 var hidden_btn =
{ document.getElementById("hidden_btn");
//add repair at clicked point
} if (hidden_txt != null && hidden_btn != null)
... // and so on {
} hidden_txt.value = ID;
hidden_btn.click();
Listing 9
}
You can find out a TabContainer control’s active tab index
Listing 13
through a function that is called on client-side on each tab
change. It must be previously defined in a TabContainer Using hidden field is the most popular way to communicate
declaration. between JavaScript and .NET. Another possibility is the one
mentioned before. You can respond to control’s events by
ASP.NET:
defining JavaScript functions that will handle the events. If
<ajaxCT:TabContainer ID="TabCtr1" runat="server"

Wrzesień 2009, Łódź

You would like to call some JavaScript function from code- about the communication between JavaScript and .NET and it
behind in .NET, You can use the RegisterClientScript method can be easily established with usage of a WebService, where
of ScriptManager control, which will invoke the script during data serialization is done automatically.
page load.
Our portal is using WebService and WebMethods, because
it is very fast way of exchanging data and can be done in the
background. However, if You want to send some small VIII. REFERENCES
amount of information from .NET to JavaScript, You can also http://www.google.com/corporate/history.html ,
use ScriptManager control and it’s method RegisterArray to http://en.wikipedia.org/wiki/Google_Maps ,
register an array on the page and use its values from the script. http://www.codeplex.com/Wiki/View.aspx?
ProjectName=AjaxControlToolkit ,
VII. CONCLUSION http://gmaps-utility-
When You decide to use Google Maps API in Your
library.googlecode.com/svn/trunk/markermanager/relea
application, then You should come up with o good plan of se/docs/reference.html ,
placing the overlays on the map and handling events. It is http://code.google.com/intl/pl/apis/maps/documentation/refe
most of the work You will have to do. As it was shown in this
rence.html#GIcon
paper, building web applications in .NET technology based on
Google Maps service, is not a difficult process. It is basically

View publication stats