Click here to close now.

Welcome!

.NET Authors: Elizabeth White, Pat Romanski, Liz McMillan, Jaynesh Shah, Carmen Gonzalez

Related Topics: .NET

.NET: Article

Google Maps and ASP.NET

Building a custom server control

I am sure that most of you have heard about or have had a chance to use Google Maps. It's a great service and I was really impressed by the responsiveness of the application and the ease with which users could drag and zoom maps from a Web browser. It has in many ways heralded the arrival of AJAX (Asynchronous JavaScript and XML), which I am sure will revitalize Web development in the days to come.

What makes the service even better is the availability of the Google Maps API (Application Programming Interface) as a free Beta service. The API allows developers to embed Google Maps in their custom applications. It also allows them to overlay information on the map and customize the map to their needs. As I write this article there are quite a few sites that utilize Google Maps, and more and more of them are appearing by the day.

The API by itself is pretty straightforward and easy to use; however, it requires the developer to have a good command of JavaScript because it extensively relies on client-side Java scripting. In this article we will be looking at building a custom ASP.NET server control that would allow a .NET developer to harness the power of Google Maps in the code-behind model. We will see how to accomplish most of the functionality exposed by Google Maps using this control, and we'll also see how to data bind the control, thereby allowing developers to easily build data-driven custom ASP.NET Web applications. The control would eliminate the need for the developer to write any JavaScript to accomplish most of the Google Map functionality.

Some Google Maps Basics
Before we get into the details of the ASP.NET control, let's look at the basics of the Google Maps API. A detailed description of the API can be found at www.google.com/apis/maps/documentation/. The first step before using Google Maps is to register for a key with Google (www.google.com/apis/maps/signup.html). This is absolutely free and hardly takes a few minutes. Each Web site that uses Google Maps has to have its own key. Make sure that you go through Google's Terms of Use (www.google.com/apis/maps/terms.html) before you start using Google Maps in your application.

Google represents an instance of the map as a "GMap" object. It is rendered as a div tag on the page. Once you have the map, it is possible to add controls to the map. Some of the available controls are the GMapType control that helps to toggle between the different views, namely map view, satellite view, and finally, the hybrid view that is a combination of map and satellite views. The other controls that are usually seen on the map are the ones used to add scrolling and zooming capability to the map. At the time of writing of this article, there are three different controls available:

  • GLargeMapControl: A large control for scrolling and zooming
  • GSmallMapControl: Similar to the previous one, but eliminates the zoom scale bar
  • GSmallZoomControl: Includes only Zooming controls

Once the map has been set up, it is possible to overlay information on the map. The information can be in the form of points or lines, though points are the most common ones. In order to overlay a point on the Google Map, it's necessary to know its longitude and latitude. At this time, Google does not provide any geo-coding services that give the co-ordinates corresponding to an address, but there are a couple of free services available on the internet that do so. www.Geocoder.us is one of them and given a US address, it returns the longitude and latitude for the same. Once the longitude and latitude have been obtained, create an instance of a GPoint (which is Google's representation of a point on the map), then create a GMarker using this point and add the marker to the instance of the Google Map. In order to Center and Zoom on a point, the GMap Object exposes a method ZoomandCenter that takes the point and the level of zoom required as the parameter. Just like points, it is possible to overlay lines on the Map. Those of you who have used Google Maps for directions will be familiar with the lines used to depict the route. In order to add a line to the Google Map, we need to create an instance of a GPolyLine object and pass in an array of GPoints to plot it. It is also possible to assign color, width, and opacity to the line. Another useful feature in Google Maps is the ability to show a pop-up window when the user clicks on a Marker. Google Calls this pop-up window by the name "InfoWindow."

The Google Maps ASP.NET Control (GMAP Control)
The main aim of this control is to allow .NET developers to utilize the functionality of Google maps as a server-side control by writing little to almost no JavaScript at all. It is more of a .NET wrapper around the Google API; however, because it is a full-fledged ASP.NET server-side control, it is possible to bind data to the control, thereby increasing the usability of Google Maps. In the following sections we will see how to use this control to implement most of the common functionality of Google Maps. Before we do so, let's take a look at the control. The principal class of the control is the "GMapControl" class. This class in turn references the following classes (most of these classes are the .NET equivalents of the classes used by Google):

  • GPoint: This is the class representation of a geographical point and exposes latitude and longitude as its two properties.
  • GPoints: This class represents a collection of GPoint objects.
  • GIcon: Represents a custom icon that is used as an overlay on the map. The GIcon class exposes the following properties: the Image URL, which as the name suggests, is the URL of the image used to represent the icon; ShadowImageURL is the URL of the shadow associated with the icon; IconSize and ShadowSize represent the size of the icon and the shadow, and the last two properties are IconAnchor and InfoWindowAnchor, which specify the point where the icon should be anchored to the map relative to its top-left corner and the point where the Info window should be anchored to the map.
  • GLine: This is a line that the user wishes to overlay on the map. By default it takes a collection of points (GPoints) as an argument in its constructor. It is also possible to set the color of the line as well as its weight and opacity through an overloaded constructor.
  • GMarker: This is the .NET representation of the Google Maps class GMarker. The default constructor accepts an instance of a GPoint class. It also has an overloaded constructor that takes a GIcon along with the GPoint in case the developer wishes to use a custom icon to represent the marker.
  • GSize: Represents a two-dimensional size measurement.
  • JScriptGenerator: This is an internal class and has more of a helper function. It generates most of the JavaScript functions that are needed by the control.
  • HelperColorConvertor: This class is used to convert a color into its equivalent Hex value. This class is marked as internal.
  • HelperDataResolver: This is an internal class that helps in data binding and has just one method. The method casts a datasource object into an object that implements the IEnumerable interface. The help file that describes in detail the different methods and properties of the classes involved is available as a download.

Getting Started in ASP.NET
Before we use the ASP.NET control in our application, there are a few things that need to be taken care of to ensure that it works as desired.

Web.config File
The GMAP control renders itself as a DIV tag, however for non-Internet Explorer Browsers, ASP.NET renders the div tag as tables. If you want the page to render the GMAP control properly in other browsers such as Netscape and Firefox, include the browser cap section shown in Listing 1 into the Web.config file of your application.

Page Configuration
Google has certain recommendations for the HTML standards on pages that contain the map to make sure that the layout is predictable across different browsers. A detailed description of the same can be found in the Google maps documentation. It is imperative that you follow these standards, especially if you plan to overlay lines on your map. For lines to be rendered on the map, you need to include the VML namespace in the HTML page for Internet Explorer browsers. Make sure that you don't forget to do this, because otherwise the lines will not be displayed in Internet Explorer. The HTML tag of your page should at the minimum look like the snippet below:

<HTML xmlns:v="urn:schemas-microsoft-com:vml">

Adding to the Toolbar
This step is optional; however if you are using Visual Studio .NET as your IDE, I would recommend that you go ahead and add the GMap control to your toolbox. The advantage of doing so is that you can easily drag and drop the GMap control onto an ASPX page like any other ASP.NET control, and Visual Studio will automatically register the control on your page. Figure 1 shows the GMap control on the toolbar.

Creating a Basic Map Using the Control
Since we are done with the setup, let's go ahead and create a simple example using the control. We will add the GMap control to the page, set its dimensions, and make it center and zoom at a particular point. For the sample application used in this article, I have saved the map key in the Web.config file and will be setting the GoogleMapKey property of the control from the config file. I will be setting the map type of the control to be that that of "Map." In case no map type is specified, the control defaults to the preset "Map." The GMap Control also supports satellite and hybrid map types. Make sure that you center and zoom at a point, otherwise all that will show up will be a grey area. Listing 2 shows the code for this example and Figure 2 shows the output.

Setting the GMap Control Properties
Let's go ahead and set some properties to the basic example we just created. The GMap control exposes a set of properties that allows the developer to customize the control to his or her needs. If we wish to give the user the flexibility to change the view, we set the ShowMapTypeControl property of the control to true. By default, the user is able to drag the map, however, if we do not wish the user to drag the map around, we can set the EnableDragging property to false. To allow the user to be able to scroll or zoom, set the ScrollControlType property of the control. There are three different options: "large," "small," and "zoom only," to correspond to the controls offered by Google. Listing 3 shows the source code and Figure 3 shows the output in the browser.

More Stories By Jeevan Murkoth

Jeevan Murkoth is a Microsoft Certified Solutions Developer (MCSD) in .NET (Early Achiever) and a Microsoft Certified Application Developer (MCAD) in .NET. He currently consults for Tennessee Valley Authority and lives in Chattanooga, TN. He has an MS in Management Information Systems from Texas Tech University.

Comments (78)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@ThingsExpo Stories
The worldwide cellular network will be the backbone of the future IoT, and the telecom industry is clamoring to get on board as more than just a data pipe. In his session at @ThingsExpo, Evan McGee, CTO of Ring Plus, Inc., discussed what service operators can offer that would benefit IoT entrepreneurs, inventors, and consumers. Evan McGee is the CTO of RingPlus, a leading innovative U.S. MVNO and wireless enabler. His focus is on combining web technologies with traditional telecom to create a new breed of unified communication that is easily accessible to the general consumer. With over a de...
Disruptive macro trends in technology are impacting and dramatically changing the "art of the possible" relative to supply chain management practices through the innovative use of IoT, cloud, machine learning and Big Data to enable connected ecosystems of engagement. Enterprise informatics can now move beyond point solutions that merely monitor the past and implement integrated enterprise fabrics that enable end-to-end supply chain visibility to improve customer service delivery and optimize supplier management. Learn about enterprise architecture strategies for designing connected systems tha...
Cloud is not a commodity. And no matter what you call it, computing doesn’t come out of the sky. It comes from physical hardware inside brick and mortar facilities connected by hundreds of miles of networking cable. And no two clouds are built the same way. SoftLayer gives you the highest performing cloud infrastructure available. One platform that takes data centers around the world that are full of the widest range of cloud computing options, and then integrates and automates everything. Join SoftLayer on June 9 at 16th Cloud Expo to learn about IBM Cloud's SoftLayer platform, explore se...
SYS-CON Media announced today that 9 out of 10 " most read" DevOps articles are published by @DevOpsSummit Blog. Launched in October 2014, @DevOpsSummit Blog offers top articles, news stories, and blog posts from the world's well-known experts and guarantees better exposure for its authors than any other publication. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to wait for long development cycles that produce softw...
15th Cloud Expo, which took place Nov. 4-6, 2014, at the Santa Clara Convention Center in Santa Clara, CA, expanded the conference content of @ThingsExpo, Big Data Expo, and DevOps Summit to include two developer events. IBM held a Bluemix Developer Playground on November 5 and ElasticBox held a Hackathon on November 6. Both events took place on the expo floor. The Bluemix Developer Playground, for developers of all levels, highlighted the ease of use of Bluemix, its services and functionality and provide short-term introductory projects that developers can complete between sessions.
From telemedicine to smart cars, digital homes and industrial monitoring, the explosive growth of IoT has created exciting new business opportunities for real time calls and messaging. In his session at @ThingsExpo, Ivelin Ivanov, CEO and Co-Founder of Telestax, shared some of the new revenue sources that IoT created for Restcomm – the open source telephony platform from Telestax. Ivelin Ivanov is a technology entrepreneur who founded Mobicents, an Open Source VoIP Platform, to help create, deploy, and manage applications integrating voice, video and data. He is the co-founder of TeleStax, a...
The Internet of Things (IoT) promises to evolve the way the world does business; however, understanding how to apply it to your company can be a mystery. Most people struggle with understanding the potential business uses or tend to get caught up in the technology, resulting in solutions that fail to meet even minimum business goals. In his session at @ThingsExpo, Jesse Shiah, CEO / President / Co-Founder of AgilePoint Inc., showed what is needed to leverage the IoT to transform your business. He discussed opportunities and challenges ahead for the IoT from a market and technical point of vie...
With major technology companies and startups seriously embracing IoT strategies, now is the perfect time to attend @ThingsExpo in Silicon Valley. Learn what is going on, contribute to the discussions, and ensure that your enterprise is as "IoT-Ready" as it can be! Internet of @ThingsExpo, taking place Nov 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 17th Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal an...
The 3rd International @ThingsExpo, co-located with the 16th International Cloud Expo – to be held June 9-11, 2015, at the Javits Center in New York City, NY – is now accepting Hackathon proposals. Hackathon sponsorship benefits include general brand exposure and increasing engagement with the developer ecosystem. At Cloud Expo 2014 Silicon Valley, IBM held the Bluemix Developer Playground on November 5 and ElasticBox held the DevOps Hackathon on November 6. Both events took place on the expo floor. The Bluemix Developer Playground, for developers of all levels, highlighted the ease of use of...
Grow your business with enterprise wearable apps using SAP Platforms and Google Glass. SAP and Google just launched the SAP and Google Glass Challenge, an opportunity for you to innovate and develop the best Enterprise Wearable App using SAP Platforms and Google Glass and gain valuable market exposure. In his session at @ThingsExpo, Brian McPhail, Senior Director of Business Development, ISVs & Digital Commerce at SAP, outlined the timeline of the SAP Google Glass Challenge and the opportunity for developers, start-ups, and companies of all sizes to engage with SAP today.
Enthusiasm for the Internet of Things has reached an all-time high. In 2013 alone, venture capitalists spent more than $1 billion dollars investing in the IoT space. With "smart" appliances and devices, IoT covers wearable smart devices, cloud services to hardware companies. Nest, a Google company, detects temperatures inside homes and automatically adjusts it by tracking its user's habit. These technologies are quickly developing and with it come challenges such as bridging infrastructure gaps, abiding by privacy concerns and making the concept a reality. These challenges can't be addressed w...
The industrial software market has treated data with the mentality of “collect everything now, worry about how to use it later.” We now find ourselves buried in data, with the pervasive connectivity of the (Industrial) Internet of Things only piling on more numbers. There’s too much data and not enough information. In his session at @ThingsExpo, Bob Gates, Global Marketing Director, GE’s Intelligent Platforms business, to discuss how realizing the power of IoT, software developers are now focused on understanding how industrial data can create intelligence for industrial operations. Imagine ...
SYS-CON Events announced today that Liaison Technologies, a leading provider of data management and integration cloud services and solutions, has been named "Silver Sponsor" of SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York, NY. Liaison Technologies is a recognized market leader in providing cloud-enabled data integration and data management solutions to break down complex information barriers, enabling enterprises to make smarter decisions, faster.
The 17th International Cloud Expo has announced that its Call for Papers is open. 17th International Cloud Expo, to be held November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, brings together Cloud Computing, APM, APIs, Microservices, Security, Big Data, Internet of Things, DevOps and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding business opportunity. Submit your speaking proposal today!
Hadoop as a Service (as offered by handful of niche vendors now) is a cloud computing solution that makes medium and large-scale data processing accessible, easy, fast and inexpensive. In his session at Big Data Expo, Kumar Ramamurthy, Vice President and Chief Technologist, EIM & Big Data, at Virtusa, will discuss how this is achieved by eliminating the operational challenges of running Hadoop, so one can focus on business growth. The fragmented Hadoop distribution world and various PaaS solutions that provide a Hadoop flavor either make choices for customers very flexible in the name of opti...
Cultural, regulatory, environmental, political and economic (CREPE) conditions over the past decade are creating cross-industry solution spaces that require processes and technologies from both the Internet of Things (IoT), and Data Management and Analytics (DMA). These solution spaces are evolving into Sensor Analytics Ecosystems (SAE) that represent significant new opportunities for organizations of all types. Public Utilities throughout the world, providing electricity, natural gas and water, are pursuing SmartGrid initiatives that represent one of the more mature examples of SAE. We have s...
The Internet of Things will put IT to its ultimate test by creating infinite new opportunities to digitize products and services, generate and analyze new data to improve customer satisfaction, and discover new ways to gain a competitive advantage across nearly every industry. In order to help corporate business units to capitalize on the rapidly evolving IoT opportunities, IT must stand up to a new set of challenges. In his session at @ThingsExpo, Jeff Kaplan, Managing Director of THINKstrategies, will examine why IT must finally fulfill its role in support of its SBUs or face a new round of...
The 4th International Internet of @ThingsExpo, co-located with the 17th International Cloud Expo - to be held November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA - announces that its Call for Papers is open. The Internet of Things (IoT) is the biggest idea since the creation of the Worldwide Web more than 20 years ago.
Wearable devices have come of age. The primary applications of wearables so far have been "the Quantified Self" or the tracking of one's fitness and health status. We propose the evolution of wearables into social and emotional communication devices. Our BE(tm) sensor uses light to visualize the skin conductance response. Our sensors are very inexpensive and can be massively distributed to audiences or groups of any size, in order to gauge reactions to performances, video, or any kind of presentation. In her session at @ThingsExpo, Jocelyn Scheirer, CEO & Founder of Bionolux, will discuss ho...
The true value of the Internet of Things (IoT) lies not just in the data, but through the services that protect the data, perform the analysis and present findings in a usable way. With many IoT elements rooted in traditional IT components, Big Data and IoT isn’t just a play for enterprise. In fact, the IoT presents SMBs with the prospect of launching entirely new activities and exploring innovative areas. CompTIA research identifies several areas where IoT is expected to have the greatest impact.