Chapter 9. Maps and media

 

This chapter covers

  • Using the map component
  • Using the image component
  • Exploring multimedia

So far in this book you’ve learned how to create and lay out components and retrieve data from a backend to populate data views and lists. Feels pretty good to get this far, doesn’t it? Let’s push a bit further and see what you can do with Sencha Touch and modern mobile devices. This chapter explores maps and how to use the Google Maps API, the simple Img (image) component, and the Media class and its subclasses, Audio and Video. First up is the map component.

9.1. Maps in your application

Google Maps are often used in mobile applications. Have a “Contact Us” section of your application? It could be a smart decision to have a map to show your users the location of your business. In figure 9.1 you see an application that uses Google Maps markers to show house listings in the Houston, Texas area. What you may not know is that the functionality to add markers is surprisingly easy. You may think that it’s difficult, but with Sencha Touch’s map component and Google Maps and its API it’s not that hard. In this section you’ll take a look at the Sencha Touch map component, create a simple map, and dive into using the Google Maps API to add markers.

Figure 9.1. This example shows a map using markers for points of interest. This application was created by the Houston Association of Realtors to show housing listings.

9.1.1. Maps under the hood

9.2. Handling images

9.3. Mastering media

9.4. Summary