Welcome!

Microsoft Cloud Authors: Nick Basinger, Kevin Benedict, Pat Romanski, Liz McMillan, Lori MacVittie

Related Topics: Microsoft Cloud

Microsoft Cloud: Article

Google Maps and ASP.NET

Building a custom server control

Overlaying Markers and Pop-Up Windows
Another cool feature of Google Maps is the ability to display markers on the map and attach pop-up windows to these markers on the click event. It is possible to display formatted HTML containing links and images in these pop-up windows. Let us see how to do the same using the GMap ASP.NET control. Let's take the previous example and modify it to add two markers. One would be a plain marker and the other would have a pop-up window that would display some text. The GMap ASP.NET control has an overloaded method called OverlayMarker that takes the formatted HTML as a string parameter. If the overloaded method is called and some HTML is passed to the method, a click event is automatically passed to the marker and the info window is displayed. Listing 4 shows the code to overlay two markers and Figure 4 shows the output of the same.

Overlaying Custom Markers
Google gives us the flexibility to replace their standard marker icon with any custom icon that we specify. The same functionality is provided by the GMap ASP.NET control. In order to do so, we need to define a GIcon class with at least the following properties:

  • URL of the image that would represent the GIcon
  • URL of the shadow image
  • Size of the image
  • Size of the shadow
  • The point at which the icon is to be anchored to the icon

In case info windows are used, it is also necessary to specify the point where the info window is to be anchored to the map. For this example we will be borrowing the icons from the Google Ride Finder application. Let's take the same two points that we used in the marker example and replace the standard marker icons with these custom icons. The code in Listing 5 is same as that of Listing 4, except for the use of custom icons. Figure 5 shows the output.

Overlaying Lines
In this section we will see how to overlay a line on a Google Map. Lines can be overlaid on maps to denote routes, boundaries, or some other specific purpose a developer may deem necessary. As in the Google Maps API, the GMap ASP.NET control also allows overlay of lines. In the GMap control, the GLine class represents a line and takes a collection of GPoints to plot a line through them. It is also possible to set the color, width, and opacity of the line. While the Google Maps API requires color to be passed in as a Hex value, the GMap control takes in a System.Drawing.Color structure, thereby making it easier to set the color by name. Listing 6 shows the code and Figure 6 shows the rendering.

Using Multiple Google Map Controls in a Page
So far in all of the examples, we have dealt with one instance of the control in a page. It is possible to have any number of GMap controls in a single page and have granular control over each one of them. In this example, we have four instances of the control and will center and zoom them on four different cities. Listing 7 shows the code and Figure 7 shows the output in the browser. It is possible to have markers or lines on any of these controls.

Binding Data to the Control
The GMap ASP.NET control supports data binding and it is possible to bind it to any data source that implements the IEnumerable interface, hence it can bind to most of the commonly used sources such as data tables, datasets, and collections. As of now the control only supports overlaying of standard markers via data binding. The control exposes the following properties that need to be set before data binding:

  • MarkerLatitudeField: Property used to specify which field from the data source will bind to the latitude field of each marker in the control
  • MarkerLongitudeField: Property used to specify which field from the data source will bind to the longitude field of each marker in the control
  • MarkerText: Property used to specify which field from the data source will bind to the Text field of each marker in the control (this is optional)
  • DataSource: Property used to set the source of data

In this example we will first populate a table with a point and then bind it to the GMap control. Listing 8 shows the code involved in the example and Figure 8 shows the output.

Conclusion
The Google Maps API is very versatile. I hope this control will make it easier for .NET developers to harness the potential of this API.

References

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.


IoT & Smart Cities Stories
The Japan External Trade Organization (JETRO) is a non-profit organization that provides business support services to companies expanding to Japan. With the support of JETRO's dedicated staff, clients can incorporate their business; receive visa, immigration, and HR support; find dedicated office space; identify local government subsidies; get tailored market studies; and more.
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
AI and machine learning disruption for Enterprises started happening in the areas such as IT operations management (ITOPs) and Cloud management and SaaS apps. In 2019 CIOs will see disruptive solutions for Cloud & Devops, AI/ML driven IT Ops and Cloud Ops. Customers want AI-driven multi-cloud operations for monitoring, detection, prevention of disruptions. Disruptions cause revenue loss, unhappy users, impacts brand reputation etc.
Atmosera delivers modern cloud services that maximize the advantages of cloud-based infrastructures. Offering private, hybrid, and public cloud solutions, Atmosera works closely with customers to engineer, deploy, and operate cloud architectures with advanced services that deliver strategic business outcomes. Atmosera's expertise simplifies the process of cloud transformation and our 20+ years of experience managing complex IT environments provides our customers with the confidence and trust tha...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
As you know, enterprise IT conversation over the past year have often centered upon the open-source Kubernetes container orchestration system. In fact, Kubernetes has emerged as the key technology -- and even primary platform -- of cloud migrations for a wide variety of organizations. Kubernetes is critical to forward-looking enterprises that continue to push their IT infrastructures toward maximum functionality, scalability, and flexibility. As they do so, IT professionals are also embr...
In his general session at 19th Cloud Expo, Manish Dixit, VP of Product and Engineering at Dice, discussed how Dice leverages data insights and tools to help both tech professionals and recruiters better understand how skills relate to each other and which skills are in high demand using interactive visualizations and salary indicator tools to maximize earning potential. Manish Dixit is VP of Product and Engineering at Dice. As the leader of the Product, Engineering and Data Sciences team at D...
As you know, enterprise IT conversation over the past year have often centered upon the open-source Kubernetes container orchestration system. In fact, Kubernetes has emerged as the key technology -- and even primary platform -- of cloud migrations for a wide variety of organizations. Kubernetes is critical to forward-looking enterprises that continue to push their IT infrastructures toward maximum functionality, scalability, and flexibility.
Today's workforce is trading their cubicles and corporate desktops in favor of an any-location, any-device work style. And as digital natives make up more and more of the modern workforce, the appetite for user-friendly, cloud-based services grows. The center of work is shifting to the user and to the cloud. But managing a proliferation of SaaS, web, and mobile apps running on any number of clouds and devices is unwieldy and increases security risks. Steve Wilson, Citrix Vice President of Cloud,...