Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Exercise 2-9a: Geocoding Addresses

Page of 168

Overview

During this lab, you will load the Google Maps API and invoke its methods to geocode street addresses.

  • Load the Google Maps API
  • Interactively call the Google Geocoding Service

Steps

Load the Google Maps API

  1. Open Sencha Architect
  2. Open the following project:
    /path/To/arch101/mobile/lab/exercise9/exercise9.xds.

    Note: This is the solution from the prior exercise.
  3. From the Toolbox, drag the Google Maps API component and drop it onto the Resources category of the Project Inspctor.
Geocode a Street Address
  1. In the Project Inspector, click on Views > Main > Friends > friendForm> buttonContainer > btnGeoCode
  2. In the Config panel, click on the [+] adjacent to Event Bindings and select Basic Event Binding.
  3. Choose tap from the select list.
  4. In the Project Inspector, right-click on the onBtnGeoCodeTap event handler and select Convert to Action > Friends
  5. Click on the Code button
  6. Enter the following code to geocode the street address in the form and place the results into the lat and lng fields:
Ext.Viewport.setMasked({
 xtype:'loadmask', 
 message:'Geocoding, Please Wait...'
});

// get pointer to form
var formPanel =  this.getFriendForm();

// get all form values
var formvalues = formPanel.getValues();

// geocode street address + zip
var address = formvalues.address + " " + formvalues.zip;
var geocoder = new google.maps.Geocoder();

geocoder.geocode({ 'address': address }, function(results, status) {
 Ext.Viewport.setMasked(false);
 if (status == "OK") {
   formPanel.down("textfield[name=lat]").setValue(results[0].geometry.location.lat());
   formPanel.down("textfield[name=lng]").setValue(results[0].geometry.location.lng());
 } else {
  Ext.Msg.alert("Geocoding failed","Please check the address");
 }
});
  1. Click Save
  2. Click Preview
  3. Test your application by adding a new contact and pressing the Geo button at the bottom of the form.

-- End of Exercise --

Page of 168
comments powered by Disqus