There is always a requirement to use a map in a web application, so by considering the preceding requirement I decided to write this article. So let us learn step-by-step how to integrate Google Maps with an ASP.Net web application.
Key points for integrating Google Maps:
- Google provides the free API to integrate Google Maps in our application.
- You can customize Google Maps depending on your requirements.
- "Start" - "All Programs" - "Microsoft Visual Studio 2010".
- "File" - "New WebSite" - "C#" - "ASP.NET Empty Web Application" (to avoid adding a master page).
- Provide the web site a name such as "GoogleMAPIntegration" or another as you wish and specify the location.
- Then right-click on Solution Explorer - "Add New Item" then Default.aspx page.
Now drag and drop the one div tag from HTML controls and specify the ID as follows:
Now create a CSS class to provide some design to the form as in the following:
Now the entire source code of the Default.aspx page will look as in the following:
Now run the application, the map will look as in the following:
The preceding is the simple Google Maps having functionality to zoom the map in and out. To zoom in and out the following slider is used:
The preceding slider is used to zoom the map in and out. You can also view the satellite view by choosing the following options:
You can also view the street map as in the following:
From all the preceding examples, we have learned how to integrate Google Maps into an ASP.Net web application.
- You need an active internet connection to view the Google Maps.
I hope this article is useful for all readers. If you have any suggestion then please contact me including beginners also.