Display Google Map Using JQuery Mobile and MVC4

Introduction:

In this article we will see how to display the Google map using J-query mobile and MVC4. In my last article related to MVC4 I've discussed what is new in MVC4 where we saw that MVC4 supports mobile web-site development using J-query mobile and HTML5. In this article I'm using same j-query mobile and displaying the Google map on the View. So let's start to display the map step-by-step.

Step1:

Create a new project of MVC4 mobile website. Add the Action in home controller and simply return the view.

Step 2:

Now  you need to download the J-query Mobile. After downloading j-query mobile, copy the following given scripts and CSS files and paste them into your application directory.

• query.mobile-1.0.1.min.css

• jquery.js

• jquery.mobile-1.0.1.min.js

• map.js and map.css

Step 3:

Now add the reference to the above listed files (like below) in that for the first three files i.e. jquery.mobile-1.0.0.min.js and css and jquery.js keep in the head section while map.js and css in the body section.

<link href="../../ScriptAndCss/jquery.mobile-1.0.1.min.css" rel="stylesheet"
        type="text/css" />
    <script src="../../ScriptAndCss/jquery.js" type="text/javascript"></script>
    <script src="../../ScriptAndCss/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>      
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

Step 4:

After adding a reference to the above scripts and css files now create the body content which will load our map but before that add the reference to map.js and css files like below.

<div data-role="page" class="page-map">    
        <script src="../../ScriptAndCss/map.js" type="text/javascript"></script>
        <link href="../../ScriptAndCss/map.css" rel="stylesheet" type="text/css" />
<div data-role="header"><h1>Map View</h1></div>
<div data-role="content">
<div id="map-canvas">
                                               
<!-- map loads here... -->

</div>
                       
</div>

</div>

Step 5:

Now our Google map is ready to load. In the above we have created a div tag having id as map-canvas where we will load our Google map.

Step 6:

Now run your application and see the Google map loaded in your application.

In last article we discussed mobile web-site development using j-query mobile and html5. This map script is given for displaying maps in mobile.

Conclusion

In this way for our mobile website we can use j-query mobile and html5 to display a  Google map in our application.