Posted on by & filed under Content - Highlights and Reviews, Mobile Development.

The combination of a mobile device and maps seems to be a perfect match. Until the release of Google Maps API in June 2005, mapping solutions were expensive and complicated. The API has had three major releases since then with the last one, API 3, released in May 2010 being a complete re-write.

Whose got the key?

Google recommends that you use an API key when communicating with maps. Maps works without one, but the interface will only allow a maximum of 25000 map loads per day. Google’s definition of a map load is when a map is initialized on a web page. For a small site, like the demo we our going to build in this tip, 25000 is plenty, but if you are building a bigger site, be sure to get a key. For more information go to https://developers.google.com/maps/documentation/javascript/tutorial.

The heart of Maps is its JavaScript plug-in. Unlike other plug-ins you may have used before, this one isn’t downloadable. In fact there is no JavaScript file to download. It is actually a server call to Google. It uses HTML’s tag to get around the browser cross-domain issue, and it will return JavaScript to your site. This is how Maps looks different depending upon which device and browser it is loaded from. Don’t believe me? Take a look at the photos: one shows Maps on an iPhone, the other on a Nexus One. Notice how on the iPhone there is no Scale control. This is because the Maps on the iPhone supports pinch to zoom. Therefore it doesn’t need the Scale control.

Implementation

It is amazingly simply to put a map into a jQuery Mobile app. So easy that our demo app only needs about a 100 lines of code. You of course need to include the script file to load Maps after the normal jQuery and jQuery Mobile includes. The only other modification necessary to our HTML is to give our content area an id, which we’ll call “map”.

We need a little bit of CSS. We could add it to our HTML file, but even in small demos, I hate mixing concerns. So we will put it into its own file, style.css. All the CSS does is to remove the padding from the content area and allow it to fill out the width.

Finally we move to our app.js file. The Dimensions object holds the method which dynamically determines the height of the content area. The page1 object hooks the pageshow event handler. When it is invoked, it will initialize the Dimensions object, use it to determine the content area dimensions, then set the content area’s height. The final thing it does is instantiate the Map object, which will render itself.

Summary

That’s all there is to putting a Google Map on your jQuery Mobile website. There is bad news for those who use Windows Phone 7 however, Internet Explorer mobile is not supported and I don’t know if this will change in the future.

Safari Books Online has the content you need

Take advantage of these jQuery mobile resources in Safari Books Online:

Pro jQuery Mobile will teach you how to create themable, responsive, native-looking applications for iOS, Android, Windows Phone, Blackberry, and more.
jQuery Mobile provides a practical approach to using jQuery Mobile to quickly develop web-based applications for mobile devices.
jQuery Mobile First Look will show you the features of the jQuery Mobile framework, what they do, and how they can be used.
jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples is a practical “cookbook” packed with realistic, easy-to-use solutions for making the most of jQuery Core, jQuery UI, and jQuery Mobile.

About this author

A designer and developer of software since 1979, Troy began his career writing games in assembly and C. Since then he has written code in C++, C#, Objective-C, Java, JavaScript and even a smidgen of Python. Along the way, some of his titles have won awards, he became a Microsoft Certified Solution Developer, and in 2012, he won a developer challenge at a local Microsoft Windows Phone Unleashed event. His passion since 2007 has been mobile and mobile web development. In 2011, he joined the mobile development team at Kelley Blue Book. His small team is responsible for the KBB.com application for iPhone, Android, and Windows Phone 7 and the mobile versions of KBB.com. Troy also spends time talking to developer groups and maintaining his blog, The Rock n Coder.

Tags: android, CSS, Google, iOS, Javascript, jQuery Mobile, Maps,

Comments are closed.