ASP.NET MVC 3 with jQuery Mobile and Google Maps
— 3 min read
Using ASP.NET MVC I created a mashup with jQuery Mobile and Google Maps. This app reads a list of locations from an xml file and creates a jQuery Mobile page for each location. Each page contains a map with a marker and an info window for displaying the location details.
About jQuery Mobile
With jQuery Mobile you can create a website that has the look and feel of a native mobile app. My favorite feature of the jQuery Mobile framework is the ajax-driven page navigation. After navigating through a few pages on a jQuery Mobile website view the page's generated source and you will see that all subsequent pages have been injected to the homepage's DOM and the navigation is based on hash values. This allows for smooth transitions between pages that have already been loaded. Read more about jQuery Mobile here: http://jquerymobile.com/
How my app works
My ASP.NET MVC 3 project uses jQuery Mobile 1.0 Alpha 3 and Google Maps API 3. My data source is an XML file which contains a list of 10 Information Technology companies in Silicon Valley. A page is generated for each company and their headquarters are displayed on a map. There were a couple of gotchas I came across when implementing Google Maps with jQuery Mobile which I will discuss later on in the post.
First, I created a Location.cs class based on the structure of my Locations.xml file.
I also created a LocationModel.cs class which uses LINQ to read the XML file and append each Location to a List of Location objects.
I have one Controller named HomeController.cs which creates an instance of LocationModel at the class level and returns all locations to the Index View. It also looks up specific locations for the Map View based on the unique ID passed in the url to the Map method.
I am using Google's GeoCoding API to look up the Lat and Long for an address so it can be plotted on the map. I am requesting the results in an xml format and parsing them using LINQ. If the lookupGeoCode() method fails at getting the Lat and Long it returns false and the Map method returns the Error View.
My Index View returns a hyperlink for each location.
I am using Html.ActionLink to generate my hyperlinks and talk to my controller. When publishing this ASP.NET MVC Project to my GoDaddy shared hosting I ran into a problem with my hyperlinks including the directory path aliased to my subdomain name which made the url long and ugly. The relative url returned by Html.ActionLink was including /gregjopa/code/ which is aliased to code.gregjopa.com. So my url originally looked like:
I originally tried to fix this by using the URL Rewrite Module available in IIS 7 but I couldn't get this working with my GoDaddy hosting. So instead I created a helper method to remove the unwanted portion of the url generated by the Html.ActionLink method.
jQuery Mobile rocks! It is easy to develop with and the themes look great. It also provides a standardized user interface across all popular mobile device platforms. So instead of developing a mobile site with custom code for the iPhone, custom code for Android, custom code for the Windows phone, etc... you can just have one mobile site for all platforms.