Welcome!

.NET Authors: Sandi Mappic, Ivan Antsipau, JP Morgenthal, Greg Ness, Yeshim Deniz

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
Explosive growth in connected devices. Enormous amounts of data for collection and analysis. Critical use of data for split-second decision making and actionable information. All three are factors in making the Internet of Things a reality. Yet, any one factor would have an IT organization pondering its infrastructure strategy. How should your organization enhance its IT framework to enable an Internet of Things implementation? In his session at Internet of @ThingsExpo, James Kirkland, Chief Architect for the Internet of Things and Intelligent Systems at Red Hat, will describe how to revoluti...
The Internet of Things will greatly expand the opportunities for data collection and new business models driven off of that data. In her session at Internet of @ThingsExpo, Esmeralda Swartz, CMO of MetraTech, will discuss how for this to be effective you not only need to have infrastructure and operational models capable of utilizing this new phenomenon, but increasingly service providers will need to convince a skeptical public to participate. Get ready to show them the money! Speaker Bio: Esmeralda Swartz, CMO of MetraTech, has spent 16 years as a marketing, product management, and busin...
Samsung VP Jacopo Lenzi, who headed the company's recent SmartThings acquisition under the auspices of Samsung's Open Innovaction Center (OIC), answered a few questions we had about the deal. This interview was in conjunction with our interview with SmartThings CEO Alex Hawkinson. IoT Journal: SmartThings was developed in an open, standards-agnostic platform, and will now be part of Samsung's Open Innovation Center. Can you elaborate on your commitment to keep the platform open? Jacopo Lenzi: Samsung recognizes that true, accelerated innovation cannot be driven from one source, but requires a...
SYS-CON Events announced today that Red Hat, the world's leading provider of open source solutions, will exhibit at Internet of @ThingsExpo, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Red Hat is the world's leading provider of open source software solutions, using a community-powered approach to reliable and high-performing cloud, Linux, middleware, storage and virtualization technologies. Red Hat also offers award-winning support, training, and consulting services. As the connective hub in a global network of enterprises, partners, a...
P2P RTC will impact the landscape of communications, shifting from traditional telephony style communications models to OTT (Over-The-Top) cloud assisted & PaaS (Platform as a Service) communication services. The P2P shift will impact many areas of our lives, from mobile communication, human interactive web services, RTC and telephony infrastructure, user federation, security and privacy implications, business costs, and scalability. In his session at Internet of @ThingsExpo, Robin Raymond, Chief Architect at Hookflash Inc., will walk through the shifting landscape of traditional telephone a...
SYS-CON Events announced today that Matrix.org has been named “Silver Sponsor” of Internet of @ThingsExpo, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Matrix is an ambitious new open standard for open, distributed, real-time communication over IP. It defines a new approach for interoperable Instant Messaging and VoIP based on pragmatic HTTP APIs and WebRTC, and provides open source reference implementations to showcase and bootstrap the new standard. Our focus is on simplicity, security, and supporting the fullest feature set.
BSQUARE is a global leader of embedded software solutions. We enable smart connected systems at the device level and beyond that millions use every day and provide actionable data solutions for the growing Internet of Things (IoT) market. We empower our world-class customers with our products, services and solutions to achieve innovation and success. For more information, visit www.bsquare.com.
How do APIs and IoT relate? The answer is not as simple as merely adding an API on top of a dumb device, but rather about understanding the architectural patterns for implementing an IoT fabric. There are typically two or three trends: Exposing the device to a management framework Exposing that management framework to a business centric logic • Exposing that business layer and data to end users. This last trend is the IoT stack, which involves a new shift in the separation of what stuff happens, where data lives and where the interface lies. For instance, it’s a mix of architectural style...
SYS-CON Events announced today that SOA Software, an API management leader, will exhibit at SYS-CON's 15th International Cloud Expo®, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. SOA Software is a leading provider of API Management and SOA Governance products that equip business to deliver APIs and SOA together to drive their company to meet its business strategy quickly and effectively. SOA Software’s technology helps businesses to accelerate their digital channels with APIs, drive partner adoption, monetize their assets, and achieve a...
From a software development perspective IoT is about programming "things," about connecting them with each other or integrating them with existing applications. In his session at @ThingsExpo, Yakov Fain, co-founder of Farata Systems and SuranceBay, will show you how small IoT-enabled devices from multiple manufacturers can be integrated into the workflow of an enterprise application. This is a practical demo of building a framework and components in HTML/Java/Mobile technologies to serve as a platform that can integrate new devices as they become available on the market.
SYS-CON Events announced today that Utimaco will exhibit at SYS-CON's 15th International Cloud Expo®, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Utimaco is a leading manufacturer of hardware based security solutions that provide the root of trust to keep cryptographic keys safe, secure critical digital infrastructures and protect high value data assets. Only Utimaco delivers a general-purpose hardware security module (HSM) as a customizable platform to easily integrate into existing software solutions, embed business logic and build s...
Connected devices are changing the way we go about our everyday life, from wearables to driverless cars, to smart grids and entire industries revolutionizing business opportunities through smart objects, capable of two-way communication. But what happens when objects are given an IP-address, and we rely on that connection, sometimes with our lives? How do we secure those vast data infrastructures and safe-keep the privacy of sensitive information? This session will outline how each and every connected device can uphold a core root of trust via a unique cryptographic signature – a “bir...
Internet of @ThingsExpo Silicon Valley announced on Thursday its first 12 all-star speakers and sessions for its upcoming event, which will take place November 4-6, 2014, at the Santa Clara Convention Center in California. @ThingsExpo, the first and largest IoT event in the world, debuted at the Javits Center in New York City in June 10-12, 2014 with over 6,000 delegates attending the conference. Among the first 12 announced world class speakers, IBM will present two highly popular IoT sessions, which will take place November 4-6, 2014 at the Santa Clara Convention Center in Santa Clara, Calif...
Almost everyone sees the potential of Internet of Things but how can businesses truly unlock that potential. The key will be in the ability to discover business insight in the midst of an ocean of Big Data generated from billions of embedded devices via Systems of Discover. Businesses will also need to ensure that they can sustain that insight by leveraging the cloud for global reach, scale and elasticity.
WebRTC defines no default signaling protocol, causing fragmentation between WebRTC silos. SIP and XMPP provide possibilities, but come with considerable complexity and are not designed for use in a web environment. In his session at Internet of @ThingsExpo, Matthew Hodgson, technical co-founder of the Matrix.org, will discuss how Matrix is a new non-profit Open Source Project that defines both a new HTTP-based standard for VoIP & IM signaling and provides reference implementations.

SUNNYVALE, Calif., Oct. 20, 2014 /PRNewswire/ -- Spansion Inc. (NYSE: CODE), a global leader in embedded systems, today added 96 new products to the Spansion® FM4 Family of flexible microcontrollers (MCUs). Based on the ARM® Cortex®-M4F core, the new MCUs boast a 200 MHz operating frequency and support a diverse set of on-chip peripherals for enhanced human machine interfaces (HMIs) and machine-to-machine (M2M) communications. The rich set of periphera...

SYS-CON Events announced today that Aria Systems, the recurring revenue expert, has been named "Bronze Sponsor" of SYS-CON's 15th International Cloud Expo®, which will take place on November 4-6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Aria Systems helps leading businesses connect their customers with the products and services they love. Industry leaders like Pitney Bowes, Experian, AAA NCNU, VMware, HootSuite and many others choose Aria to power their recurring revenue business and deliver exceptional experiences to their customers.
The Internet of Things (IoT) is going to require a new way of thinking and of developing software for speed, security and innovation. This requires IT leaders to balance business as usual while anticipating for the next market and technology trends. Cloud provides the right IT asset portfolio to help today’s IT leaders manage the old and prepare for the new. Today the cloud conversation is evolving from private and public to hybrid. This session will provide use cases and insights to reinforce the value of the network in helping organizations to maximize their company’s cloud experience.
The Internet of Things (IoT) is making everything it touches smarter – smart devices, smart cars and smart cities. And lucky us, we’re just beginning to reap the benefits as we work toward a networked society. However, this technology-driven innovation is impacting more than just individuals. The IoT has an environmental impact as well, which brings us to the theme of this month’s #IoTuesday Twitter chat. The ability to remove inefficiencies through connected objects is driving change throughout every sector, including waste management. BigBelly Solar, located just outside of Boston, is trans...
SYS-CON Events announced today that Matrix.org has been named “Silver Sponsor” of Internet of @ThingsExpo, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Matrix is an ambitious new open standard for open, distributed, real-time communication over IP. It defines a new approach for interoperable Instant Messaging and VoIP based on pragmatic HTTP APIs and WebRTC, and provides open source reference implementations to showcase and bootstrap the new standard. Our focus is on simplicity, security, and supporting the fullest feature set.