Set Sencha Touch Map Location

Question

Set Sencha Touch Map Location

Hi All, I am trying to simply set the Sencha Touch 2 map object to a specific zipcode. I an setting the config to to {useCurrentLoction: true} which works fine but after hours of research I can't seem to find a way to tell the map object to reposition to another city, or address or specifically a zipcode somewhere else in the US.

It looks like the Google API has these features but this include:

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

Doesn't recognize the api calls that Google is using in their docs. Google says to get am API access key but this needs to run from multiple locations so I was hoping to achieve this without needing to get a key.

Has anyone been able to reposition the Sencha Touch 2 map object with the API accessed by the above (maps.google.com/maps/api/js?sensor=true) ?

Thanks!

Ashray P. Shetty Ashray P. Shetty · Accepted Answer · 2013-04-30T07:28:26

Just include <script src="http://maps.google.com/maps/api/js?sensor=true"></script> in your HTML file

Then in your view create a xtype map, and then in the listener add an event painted like this:

listeners: 
{
    painted: function( component, eOpts ) {
        console.log("Entered paint");
        gotoAddress();
        var map = Ext.getCmp('mymap');
        map.setMapCenter(addr);
    }
}  

// Location function add the parameter as desired address to navigate.
// This also includes showing mapper and info window

function gotoAddress() {

    var address = "enter the address required";
    var map = Ext.getCmp('mymap');

    var geocoder = new google.maps.Geocoder();    
    geocoder.geocode( { 'address': address}, function(results, status) {      
        if (status == google.maps.GeocoderStatus.OK) {

            addr= results[0].geometry.location;
            map.setMapCenter(results[0].geometry.location);

            marker.setMap(map.getMap());
            marker.setPosition(results[0].geometry.location);

            infowindow.setContent(address);

            infowindow.open(map.getMap(),marker);

        } else {
          alert('Sorry Address could not be traced: ' + status);
        }
    });
}

Note: Paint is the event that gets called every time you navigate to page where you have used the map. Initialize event will be created only once when you create this page.

Set Sencha Touch Map Location

Set Sencha Touch Map Location

1 Answers