Google AJAX API's

Looking for a good API, look no further than who else, Google. Google has taken the industry by storm with all of it applications and gadgets within the past couple of years or so. So what else could they come up with, some good AJAX API's. Working on my last individual project, I was stuck and could not get my web page to fix the output format of the feed I was using from the previous individual project. So I do what I usually do when I cannot find something I need, I Google'd API. And in the search results I found googles site for AJAX API's.

Google AJAX APIs

I knew google had the google maps API but didn't think about if they had any more until I looked up in their search engine and to my satisfaction I found what I needed. Google has a range of AJAX API's such as Google Maps, Google Search, Google Feed, Google Book Search and Google language just to name about half of them. These AJAX APIs cover a wide range of applications that you might want to use in the future if you are in that kind of web page creating field.

And to help you out with coding and writing script Google has also given you tools to make your job a little bit easier with Interatctive Code playground. This helps you edit and find mistakes in your code that can help your API run effiecienty. And Google has also provided Google API libraries for Google Web Toolkit and this is a collection of libraries that provide Java language bindings for popular Google Javascript APIs.

Down to the wire

I finally got my iteration3 to work. I had to start over from iteration 2. The older project didn't quite mesh with the newer additions.
I started over using Google's Ajax search API. Using feedcontrol worked great!

var feedControl = new google.feeds.FeedControl();

It allowed me to use several blog feeds and had a handy tabbed feature. my plan from the beginning, was to make a page that I would actually use myself. I have feeds from the several pages that I go to on a day to day basis.

I have learned a lot using that API and will be able to use most of that knowledge on the group project. It isn't up in the dropbox yet because my winzip is out of date on my laptop. It will be submitted when I get home tonight.

Iteration 2

Iteration 2 was not the best thing for me well first I had a hard time figuring out what to do. I didn't really know what apis to use and how to put it all together. I used programmableweb.com for some much needed inspiration. I decided to use a popular api Google maps. It was easy to get the map to display on the web page because google gives you the code to do that.

The problem i had was getting the map to do what I wanted it to do. For my final iteration I want to incorporate google maps using specific city locations, news and weather. When I click on a location in the drop down menu I want the map to display the location a rss feed for news and the current weather conditions.

I am able to do the proxy pass through with a rss feed. now I need to incorporate maps and the weather. I'm using the weather channel api, I registered the it already but i still need to try and implement it. Hopefully I can get it together by the due date.

Google Map API

I was able to play around with the Google Maps API for my Iteration 2 Individual Project. What I found was that the API is very well documented and there are plenty of examples of code for you to choose from. I wanted the map to key off of two coordinates, longitude and latitude and then return the map to my DIV tag called "googlemap" the first thing I had to do was apply for a key from google in order to use the maps. I did that here. Next, once I received the key I had to put in two different script tag elements into the web page.



Once that was done I then had to create the javascript that was necessary in order to grab the coordinates and return the map to my div tag. I wanted a couple different options for users; to be able to zoom in and out of the map and to place a marker at the coordinates given to the api. I found that this was not too difficult to do.

function setupMap(lat, long) {

if (GBrowserIsCompatible()) {
var center = new GLatLng(lat, long);
map = new GMap2(document.getElementById("googlemap"));
map.addControl(new GLargeMapControl());
map.setCenter(center, 09);

var marker = new GMarker(center, {draggable: true});

GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});

GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("Just bouncing along...");
});

map.addOverlay(marker);
}
}

You'll notice that I added a couple variables to pass to the program that were filled in another function based on my user input from the web page.

function getCoord(itemName){

var lat;

var long;

if (itemName == 'snowbird')

{

lat = '40.5768173605448';

long = '-111.651607579098';

}

if (itemName == 'alta')

{

lat = '40.58889';

long = '-111.63722';

}

if (itemName == 'solitude')

{

lat = '40.621159';

long = '-111.592499';

}

if (itemName == 'vail')

{

lat = '39.3944';

long = '-106.2150';

}

if (itemName == 'taos')

{

lat = '36.39';

long = '-105.58';

}

if (itemName == 'kill')

{

lat = '43.6775';

long = '-72.7803';

}

setupMap(lat, long);

}

At the bottom of this function is where I call the setupMap() function. It then returns the following data/picture:

My Iteration 3

For iteration 3 I decided to add Google map markers to my existing Google map. I wanted the markers to represent information about Dogs in the Pinckney area. I added the search to my existing map and was able to input searches and get the results I wanted. However, I found that the search dialog box didn’t show up when I used Firefox! I goofed with that for a long time with no solution so I decided to start over. I grabbed the code to create a map on my page then added the search dialog and that worked with both browsers. I didn’t realize, at the time, that I was using the “local search” feature, but, after I realized that fact I figured it would be good since I wanted a local search.

My goal was to have a couple buttons that a user could click to do predefined searches. In my case they would be for Veterinarians and Kennels. And, actually, that part was easy because it was a basic feature of the local search map. However, I didn’t count on this other “default” feature: “By default, when a search completes, the search results are placed on your map and they are also listed in tabular form above the search form input.” The tabular form obliterated the map points that I was trying to show.

I spent hours looking for a clue about how to get rid of the tabular result list but I couldn’t find anything. I wasn’t even sure what to call that “feature” so it was difficult to search for answers. I finally pasted one of the map URLs into my browser and found what I was looking for.

The nice thing about adding google.maps.LocalSearch() to your Google map is that it allows you to pre-load the search so you can do (in my case) an “execute('veterinarians')” or “execute('kennels')” search by clicking on a button.

// These options will be applied to the search dialog
var options = {

//This text shows in the search dialog

searchFormHint: 'Click a Button or, type here!',

// This stops the initial info window from poping up

suppressInitialResultSelection: true,

//sets the map zoom limit

zoomLimit: 13,

// This suppresses the TAB LIST that obliterates the map points!

resultList : google.maps.LocalSearch.RESULT_LIST_SUPPRESS

};

// This creates the Search Object "mySearch" with the above options

map.addControl(mySearch = new google.maps.LocalSearch(options));

// These are the onClick events for the search buttons which use
//mySearch object and the execute method

function displaySearch(search_string) {

if (search_string == "vet")

{

mySearch.execute('veterinarians');

}

else if (search_string == "kennel") {

mySearch.execute('kennels');

}

}
// HTML Buttons that preform a "predefined" search when clicked

This isn't a detailed description of exactally what you need but, it may give you some ideas of what you can do with Google Maps. I was very surprised to learn how much you can do to customize your map and really amazed at all the Methods and Options.

Working with Google Maps

We have plans to use the Google Maps API in our group project, so I have decided to try it out in this simple web page.

I got a lot of great information from Joshua Guest's blog post which was a wonderful explanation and detailed process for setting up this API and the Google Maps API reference site.

So far I have been able to display the map with some functionality that allows the user to zoom in and out, change view from standard to satellite, hybrid, or terrain, and show the starting location as Michigan.

I am off to a good start and excited about incorporating this API in our group project.

Our group-project -> Buy-lingu.al

After I posted the main secrets of our group work, I will post something about the project and our solved and unsolved problems.
We started by working parallel. One part of the group designed the website layout. The others researched how to get the api's running.
The first idea was to use eBay’s and Google’s JavaScript files. These display the results in their div-tags. We implemented them and had them running. At Iteration I we presented a website that translated a keyword and, after checking an alert box, searches eBay and displays the results on our website.
The next step was to understand the eBay JavaScript files to hook into that part with our retranslation. We found a possibility to get the title of the eBay items and give them to the retranslation part of our JavaScript file and integrate the translated title back into the result page.
We thought we were almost done, only fixing some bugs:
- removing the alert Box that shows the translation result causes that the scripts work parallel: eBay is searched before we had a result from google translate.
- removing the alert Box after the retranslation causes that the results were displayed without title.
These problems showed us the main problem: The different functions in the script do not wait for each other. We tried to find the solution in the scripts but we were not able to identify our problem.
When we got to the class when we talked about proxies, we researched the eBay and Google developer sites again and found the already posted solutions.
We threw our almost working code over and started again using the proxies.

Our actual code showed us that, in JavaScript, a sequence of functions are not running successively but parallel. We realized that the second function has to be started at the end of the first function.
Maybe somebody knows another way to assure that function b starts only after function a has ended?

Another problem that we have is to get the Amazon api running. If somebody has experience how to handle it, please let us know!

Google Translate API

I already revealed one secret of our group project. This post will explain how we used Google Translate to translate the user's keyword into english. I will simplify it by assuming the user speaks german.
Google's webservice returns not XML but text that might be (it looks like) a JSON object.
The needed url is:
http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&format?html&q=YOUR_KEYWORD&langpair=de%7Cen

There is no userkey or application id needed. It is necessary to change the "YOUR_KEYWORD" part with your keyword.
Once again, we splited the string into two parts and recombined them with the passed keyword:

$ur1 = 'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&format?html&q=';
$ur2 = '&langpair=de%7Cen
$uri =$ur1.$rk.$ur2

The langpair describes the source and the result language (in this case de -> german to en-> english).

The result looks like this

{"responseData": {"translatedText":"Bicycle"}, "responseDetails": null, "responseStatus": 200}

In order to get the plain result, we decided to work on this data as string.

var text = request.responseText;
       // returning string gets shortend only to the keyword
       y=text.split(":"); // splits the text into different parts after a :
       z=y[2].split("}");     // only the second part is intersting. we split it again at every }
       z=(z[0]);              // Now the first part is the translated keyword, surrounded by quotation marks
       var l=z.length;        // l has now the lenght of the string.
                                  // The last letter of the string we want is the length -1, the first one is the letter at position 1
       trans=z.substring(1,(l-1)); // trans has the translated word

We use the translated keyword to pass it to the ebay-search funktion.
The work on the return data is not elegant, so we are lucky to get other ways to do it better from you.
Hope this will help some of you! If there are questions, feel free to ask

Edit:
This is the link where you can get your code formated:
http://formatmysourcecode.blogspot.com/

Google Maps Continued . . .

Building on my last post on how to add a google map api to your website, I now want to show some of the many options you can use to configure the api to your personal preference. As shown below, this is the mininum code for your map to be created. To add an option to the map, you will need to use googles map classes and add a new line to your code. You can find all of the google map classes on the google maps api reference website.

var map = new GMap2(document.getElementById("map_canvas"));

map.setCenter(new GLatLng(42.240963,-83.618987), 13);

map.setCenter(new GLatLng(42.240963,-83.618987), 13);
This option sets the center location of the map and must be configured with the latitude and longitude of the location you want the map to default to. An easy to use website to get your desired coordinates is http://www.getlatlon.com/.

map.setUIToDefault();

This option sets the user interface to googles predefined settings. The clickable map types and the map navigator and zoom function comes standard with this option.

map.setMapType(map type );

Using this command will set the default map type to either map, satellite, hybrid, or terrain. To set the map type insert one of the following desired map types inside the parentheses.

G_NORMAL_MAP

G_SATELLITE_MAP

G_HYBRID_MAP

G_PHYSICAL MAP

map.enableGoogleBar()

Adding this option to your code will add a search bar to your machine. In my example I typed in Toledo, Oh and the map centered on my location with a google marker.

These are just a few of the configurable options when implementing a google map into your website. I highly recommend visiting the google map api reference documentation to familiarize yourself with all the options there are to offer

Enjoy!!