In this chapter we will discuss the technology details when developing map service and Facebook service for FuLinMen. The map service offered by FuLinMen is based on Google Map,which provides basic map control. But some application specific data are added in, such as geocoding of the location of the restaurant. In the future, it will include the traffic information and the route planning feature as well. On the other hand, Facebook development is more simple, since Facebook has provided a large number of applications. More work is on the web page update and interaction with the customers.
It is required that before getting ready to develop a Goole Maps applications, the developer will need to sign up for an API key. Two premises exist when signing up for an API key. First, the developer must specify an URL address that will be used to host the development. A unique keycode will be generated by Google Map for the directory that specified when the developer sign up for the key. You must use this keycode in each script that accesses the Goole Maps API. Second, the developer must also sign up a Google Account to get the key.
Unfortunately, there are several limitations regarding the Maps API key. For example, a single API key is valid for a single directory or domain. Other additional limitations associated with the key include the limitation on number of pages viewing per day. Recently, Google also began requiring that the developer should tell whether the application will use a sensor such as a GPS to determine the user's location.
Goole Maps Documentation
Google also provides detailed documentation for Google Map to get you started, including full description of the classes, methods, and events available for the Maps objects as well as code examples. In addition, a forum and discussion group for additional information on using the API is run by Google. These are all the useful resources for developer to start.
4.1.2 Creating a basic Map
After signing up with Goole Maps as mentioned above, Google Map will generate an API key. This API key is very important. It is needed for all Goole Maps applications that are developed for that particular URL address. For example, the API key may look like:
Fig 2. Google Map API Key
In Figure 2 there is also a code example for generating a simple map. As mentioned before, Google requires the developer to specify whether the application will use a sensor or not.
Fig 3 Code example
This code example is written in Javascript. The <script> tags indicate the begin and end of JavaScript code. The first <script> tag in Figure 3 imports the Goole Maps library. The next section is the API Key that just generated in Figure 2.
The full code used to generate the basic Goole Map is presented here..
Figure 4 Full code for a basic map
Besides what we have discussed, here comes up with more new contents. The <div> tag indicates the place for the map. The id attribute gives the tag its name. In this case we've simply named our placeholder "map". The statements below the <div> tag are actually creating the map.
First, we can see
Var map= new Gmap2(document.getElementById("map"));
This line creates the Goole Map. We simply pass the placeholder 'map' to the constructor for GMap2, telling where the map will appear.
Then
map.setCenter(new GLatLng(30.609682,-96.340264),16);
This statement centers the map at a particular latitude, longitude and zooms to the level specified. In regard to zoom levels, it is a 17 point scale with level 0 showing the entire world and zoom level 16 zoomed to the street level. Here we use 16, meaning the street level.
Now that we have a basic map, showing street level for a particular location. Next step, we will add the navigation and map type components, so that we can perform control on the map. We do this through the addControl( ) method on the GMap2 object.
Figure 5 Code for add control
Notice that we've added two controls to our map in Figure 5.
One is:
map.addControl(new GlargeMapControl());
GLargeMapControl adds a zoom control, so that the user can change the zoom level of the map. In default, this control is always located on the left hand side of the map.
The other is:
map.addControl(new GMapTypeControl());
GMapTypeControl adds a type control, so that the user can change between the Map, Satellite, and Hybrid views. In default, this control is located on the top right hand corner of the map.
Combining Figure 4 and Figure 5, we now have a fully functional web mapping application with just a few lines of code. We can move, zoom in and out, and change the display style of the map.
4.1.3 Points of Interest
We want to clearly indicate FuLinMen's location on the map, so that customers can easily get to the restaurant. This is so called points of interest. One of Google Map's commonly function is to plot points of interest on a map. In fact, this may be the true power of Google Maps, since it gives user the opportunity to supplement Goole Maps with the own user specific data sets. With Google Map, as we will see later, the task of creating web based mapping applications is simplified and at a mere fraction of the cost in both monetary and human resource terms. Goole Maps API has classes and methods that allow users to read their specific data from an XML file, making it extremely easy to plot user specific data. This ablility has greatly changed the web mapping applications, because before Google Map, other mapping applications are very complicate and can only be afforded by large organizations which have the adequate resources to support the infrastructure necessary to run these applications.
Two requirements must be met to plot points of interest. First, we must get the address for each point of interest. These could be the latitude, longitude coordinates. Google provides a mechanism to determine this. This mechanism is called geocoding. In geocoding, by interpolating the geographic location (latitude, longitude) of an address, the coordinates for that address are hence generated.
Supposed that we have FuLinMen located at 69 High Street. Now we want to determine the geographic coordinates for this address. Assumed that in the real world, High Street is with an address range from 1 to 100. What geocoding in Google Maps do is to get the relative location of 69 High Street. in relation to the whole High Street that runs from 1 to 100. So in this simple case, 69 High Street. would be interpolated by geocoding as being approximately two thirds from the beginning of High Street. Geocoding will then assign a latitude, longitude coordinate to this address. After an address has been geocoded it can then be plotted as a map overlay in Goole Maps where multiple addresses have been geocoded and plotted on the map.
The GClientGeocoder object in Goole Maps API offers geocoding functionality. The user can use this function through two ways: either to submit addresses for geocoding via JavaScript; or to access this functionality via HTTP requests directly from a client browser.
If using JavaScript, an instance of GClientGeocoder is created in the following of code:
geocoder= new GclientGeocoder();
Then the geocoder will ask the Google servers to fulfill geocoding requests. Geocoder has two methods that can be used to send an address to Google for geocoding: getLatLng( ) and getLocations( ). The use of getLatLng( ) is as follows
Figure 6 Code for Geocoding
After getting coordiantes for points of interest, the next requirement is to attach an info window that we'll use to display attribute information about the point. We can do this in two ways. One is in Figure 6, we simply call the method of openInfoWindowHtml( ). Or we can add an event listener. So that each time we click the point of interest, the intended information will pop up. Here is the code for the second method.
Figure 7 Code for adding infomation
4.1.4 Using AJAX
Traditionally, the web mapping application works like Figure 8. The user's interaction trigger an HTTP request, which is then sent back to a web server. The server does some processing, like retrieving the data, doing some computations, or making a database request, and then returns an HTML page to the client. This model works perfectly well. The problem is that this approach forces the user to wait a long time, while the server is doing the above processing. And each time the new web page is returned, the client browser refreshes the display with a new page. Long time waiting and constant refreshing deteriorate the user experience.
Figure 8 classic web application
In contrast, AJAX gives the user a highly interactive, rich, and responsive web applications experience.In fact, AJAX (Asynchronous JavaScript + XML) isn't a single technology. Instead it is several technologies combined. The technologies used in AJAX include:
XHTML and CSS for standards-based presentation
Document Object Model (DOM)
XML and XSLT for data interchange and manipulation
XMLHttpRequest for asynchronous data communication
AJAX changes the traditional web application model by introducing a middle layer, called the AJAX engine, between the user and the server, seen Figure 9. Rather than loading a whole new webpage each time, the browser loads an AJAX engine at the start of the session. This AJAX engine is written in JavaScript and is hidden in the frame. This engine does two things. First, it is responsible for generating the interface the user sees. Second, it communicates with the server on the user's behalf.
Figure 9 AJAX application
As seen from the name AJAX(Asynchronous JavaScript + XML), so what is asynchronous? Asynchronous means the user's interaction with the application happens asynchronously, independent of communication with the server. Because it is the AJAX engine in the middle that communicates with the server. So the user can always use the application. Staring at a blank page and long time waiting for the server to respond will not happen in AJAX. Therefore, an AJAX application gives the user a friendly and rich experience.
Another important thing of AJAX, like the name 'X', is the XMLHttpRequest object. This object makes asynchronous communication with the server. Simply speaking, the XMLHttpRequest object provides a method for JavaScript on the client side to make HTTP requests. But do not get confused by the name. Although the object is called XMLHttpRequest, it is not only being used with XML, but can request or send any type of document.
In Goole Map API, the XmlHttpRequest is implemented by the GXmlHttp object. Compared to XmlHttpRequest, GXmlHttp is more powerful, because it is cross browser compliant. That is, it can be used independent of browsers. In the following code, we create an instance of GXmlHttp, download and read the XML file, and then plot these coordinates on a map.
Figure 7 Code for AJAX
4.1.5 Goole Maps for Mobile
FuLinMen provides the map service for its customers, who can access the service through computer or cell phone. With the popularity of mobile phones in China, more and more people are using their phones. Customers can use FuLinMen's map service from their phones. However, it does not works with every type of phones, but some Java-enabled (J2ME) mobile phones.And customers have to do the following things:
1. Download Maps for mobile to the mobile phone. Customers can open
http://www.google.com/gmm on their phone's web browser.
2. After successfully downloading Maps for mobile, the installation process will begin automatically.
3. Go to the mobile phone's downloads or applications and select "Goole Maps" to begin. Notice that since Maps for mobile requires mobile Internet access, your phone may ask you to confirm your Internet connection at startup.
4.1.6 Future Development: Transportation Features
In near future, FuLinMen is going to implement the addition of some new transportation related features including traffic overlays and driving directions on its map services.
Traffic Overlays
Traffic information for major cities can be displayed in the form of color-coded polyline data by the GTrafficOverlay object. These data represent the current traffic speeds of major highways in these areas. Developers use the GMap2.addOverlay() method to add traffic information to the map. The GTrafficOverlay object implements the GOverlay interface. It has two methods (hide() and show()) for display of the traffic overlay. Code example is here.
Figure 8 Code for traffic overlay
Driving Directions
Driving direction functionality is provided through the GDirections object and the supporting GStep and GRoute objects. GDirections is used to query for driving directions and display the results on a map and/or text panel. The returned information can include a map with polyline routes and/or textual information. Requests for directions can be either a query string or provided as latitudes/longitudes (e.g. "40.712882, -73.967257 to 41.943181,-87.770677"). Here is a code example of the former:
Figure 9 Code for driving direction
Once directions are returned, the GDirections object will internally store results which you can retrieve using the getPolyline( ) and/or getRoute(i:Number) methods. Steps within a route can be retrieved using the GRoute.getStep(i:Number) method and the HTML summary of that step can be retrieved using GStep.getDescriptionHtml( ).
The GDirections object also supports multi-point directions, which can be constructed using the GDirections.loadFromWaypoints( ) method. This method takes an array of textual input addresses or textual lat/long points. Each separate waypoint is computed as a separate route and returned in a separate GRoute object, each of which contains a series of GStep objects.
4.2 Facebook Development
4.2.1 Getting Started
In developing a Google Map application, the developer needs to have a Google account. Likewise, the developer needs to get a Facebook account before hand. But unlike Google Map, after setting up the developer account, it is necessary to install the Facebook developer application as well. Without this little tool, it is impossible to generate the application profile and get an API key.
Facebook has fully detailed documentation and a useful php library. The developer can take advantage of the library without writing a lot of extra code. The PHP version of the library is at developers.facebook.com/resources.php. Download the 'PHP (4 and 5) Client Library' and unzip it into a folder. In the folder is the entire Facebook PHP Client Library (3 folders: client, footprints, php4client).The footprints folder is an example application.
4.2.2 Facebook Application
The Facebook Client Library provides you with an easy to use wrapper for the Facebook API REST interface. All of the API calls are available under the $facebook->api_client object (after you initiate the $facebook object). Many of the calls will require that the user has either added or logged into the application. Here's an example call that would retrieve the user's About Me text from their profile:
$fb_user = $facebook->user;
$about = $facebook->api_client->users_getInfo($fb_user,'about_me');
Now, with the above knowledge, let's create a really simple first application that just says hello to the current Facebook user. Here's the code for the Hello Facebook! application:
<?php
/* include the PHP Facebook Client Library to help
with the API calls and make life easy */
require_once('facebook/client/facebook.php');
/* initialize the facebook API with your application API Key
and Secret */
$facebook = new Facebook(YOUR_API_KEY,YOUR_SECRET_CODE);
/* require the user to be logged into Facebook before
using the application. If they are not logged in they
will first be directed to a Facebook login page and then
back to the application's page. require_login() returns
the user's unique ID which we will store in fb_user */
$fb_user = $facebook->require_login();
/* now we will say:
Hello USER_NAME! Welcome to my first application! */
?>
Hello <fb:name uid='<?php echo $fb_user; ?>' useyou='false' possessive='true' />! Welcome to my first application!
<?php
/* We'll also echo some information that will
help us see what's going on with the Facebook API: */
echo "<pre>Debug:" . print_r($facebook,true) . "</pre>";
when a user hits the Canvas Page URL, the require_login() call will produce a screen like this for the user:
If you change require_login() to require_add() the user will get a page that looks like this:
After the user logs into or adds the application they will get the canvas page with the "Hello…" text. It should look something like this:
