Integrating the Google Maps API into a Sencha Touch Application



·

Given the mobile nature of phones and other mobile devices, being able to incorporate the Google Maps service is extremely useful. Not only will people most often use maps when they are on the move, but we can access their current location to provide more relevant details. The ability to provide contextual functionality to users is a huge advantage of mobile applications.

You’re likely aware that developers can use the Google Maps API to provide map functionality on web and mobile applications just like this one:

internet http://www.stromleo.de

Fortunately, Sencha Touch supports this functionality by default with the ‘Ext.Map’ class. An example of Google Maps implemented in Sencha Touch comes with the Sencha Touch download package, you can find it by navigating to:

touch-2.x.x/examples/map

The implementation is very advanced in this example though, so in this post I’m going to cover the basics of how to set up the Google Maps API.

Setting up the Google Maps API

First, you’ll have to include the following line in your index.html file right after the microloader is inlcuded:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=panoramio"></script>

You will notice at the end of the URL I’ve included ‘&libraries=panoramio” this is used to include the ‘Panoramio Layer’ which displays user submitted geo-tagged photos of locations over the map. It’s not necessary to include this so feel free to remove it if you wish. We’ll cover setting up the Panoramio layer a bit later.

Now we’re going to create a view that defines our map, I’ll paste the entire file below and talk through it afterwards:

Ext.define('playgrounds.view.PlaygroundMap', {
    extend: 'Ext.Container',
    requires: ['Ext.Map'],
    xtype: 'playgroundmap',

    config: {
        layout: {
            type: 'fit'
        },
        items: [
            {
                xtype: 'map',
                mapOptions: {
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    zoom: 14
                },
                useCurrentLocation: true
            }
        ]
    },

    initialize: function(){
        var me = this;
        me.callParent(arguments);
        this.initMap();
    },

    initMap: function(){

        var mapPanel = this.down('map');
        var gMap = mapPanel.getMap();

        var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
        panoramioLayer.setMap(gMap);

        var marker = new google.maps.Marker({
            map: gMap,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(138.600941, -34.927713)
        });

    }
});

Most of the things in this code should be pretty self explanatory but there’s a few things to talk about. First of all, the mapTypeId defines the type of map that will be displayed. I have it set to ROADMAP but it can be any of the following:

  • google.maps.MapTypeId.HYBRID
  • google.maps.MapTypeId.ROADMAP
  • google.maps.MapTypeId.SATELLITE
  • google.maps.MapTypeId.TERRAIN

As I mentioned before we have the ability to add the ‘Panoramio Layer’. To do this you can see we’re first defining the layer and then setting it on the map. Panoramio is not the only additional layer you can add, you can also add things like bicycle paths and traffic layers. Here’s a full list of layers you can include:

  • KmlLayer
  • HeatmapLayer
  • FusionTablesLayer
  • TrafficLayer
  • WeatherLayer
  • CloudLayer
  • Bicycling Layer
  • PanoramioLayer

For full documentation on each of these layers you can look here in the documentation for a full list.

The last thing you’ll likely notice is the marker declaration. Just simply change the latitude and longitude values to the location of your choice and the marker will be added there. You can also modify other options such as the animation type and the icon that’s used as the marker.

There’s obviously a lot more you can do with the Maps API but hopefully this should get you off to a good start. As always, if you have any advice or questions leave them in the comments below!

 

What to watch next...