Google Maps con Sencha Touch

Anche nelle applicazioni mobile (per non dire sopprattutto) è diventato obbligatorio integrare una servizio di geolocalizzazione / mappa.

Ad oggi quello più usato rimane Google Maps, e noi oggi vedremo come integrarlo in una app creata con Sencha Touch 2.

La prima cosa da fare è richiamare il servizio; quindi aprite il file index.html (quello dove richiamate anche i CSS e Sencha) e mettete questo:

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

In sostanza richiamiamo le librerie di Google Maps, e questo richiede una connessione a internet.

 Poi nel nostro file app.js avremo un panel che racchiude la mappa:

Ext.application({
    name: 'MAPS',
    launch: function() {
        new Ext.Panel({
            layout: 'card',
            fullscreen: true,
            items: [{
                xtype: 'map',
                mapOptions: {
                    zoom: 13,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
                },
                listeners: {
                    maprender: function(extMapComponent, googleMapComponent) {
                        var geocoder = new google.maps.Geocoder();
                        geocoder.geocode({
                            address: 'Viale Marco Polo, 103 00154 Roma'
                        },
                        function(results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                extMapComponent.setMapCenter(results[0].geometry.location);
                                var marker = new google.maps.Marker({
                                    position: results[0].geometry.location,
                                    map: googleMapComponent,
                                    title: 'Maps',
                                    animation: google.maps.Animation.DROP
                                });
                            }
                        }
                        );
                    }
                }
            }]
        });
    }
});

Il panel ha un solo item i tipo map.

Prima impostiamo un pò di opzioni tipo lo zoom, il tipo di mappa, ecc....

Più sotto attiviamo il Geocoder per passare un indirizzo al posto delle coordinate; volendo potremmo passare le coordinate, ma in genere uno conosce gli indirizzi, quindi ho preferito fare l'esempio così.

Ancora più sotto attiviamo il Marker passandogli l'indirizzo.

La cosa più bella di tutto ciò è che le funzioni, gli eventi e in generale il codice è molto simile a quello usato nei normali siti web.

Non dovremmo imparare tutto da zero.

Quindi se volete usare le coordinate basta che vi rifacciate alla documentazione ufficiale di Google Maps!