Google labs

Over the weekend I was working with google labs for help with my iterations. According to google With the AJAX Feed API, you can download any public Atom or RSS feed using only JavaScript, so you can easily mash up feeds with your content and other APIs like the Google Maps API. The labs offer a lot of help with google maps like how to add markers and boxes to your maps.

Labs are good for people who have there own websites or blogger. You can integrate feeds on your website easily. I was able to use the Ajax feed and pull information from a blog without using php. The labs also have information on other apis and helps you with JavaScript.

I know javascript is already enough to learn and then you put php on top of it. I don't have much knowledge on php either. So google api could be a bit simpler to integrate. I was testing out the feed control wizard I was able to pull headings from a specific blog. I'm thinking about adding it to my final iteration.

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.

Adding Multiple Google Map Markers into an Array

Some people may ask why you would want to add Google Map markers into an array and I would not have a good answer. Today, however is a new day and for me I wanted to be able to add multiple markers on a map and then remove specific markers with a click of a button.

You could use the command MyMap.clearOverlays() to clear all markers at one time, but this would hinder you if you want to remove only certain markers. To remove certain markers all you need to do is add your markers into an array and then refer to that marker in the array using the command MyMap.removeOverlay(markersArray[i]). Although this looks foreign now, I will take you through adding markers and then removing them.


The first thing you want to do is add a marker into an array. Below is the code







Code Broken Down:
var markersArray = [];
This statement creates an array and then initializes the array with the = []. This will need to be placed outside any functions in order to create a global variable

var point = new GLatLng(42.251012,-83.625011);
var marker = new GMarker(point);
map.addOverlay(marker);
Adds a marker to an exact point on a google map. This code is actually a repeat of the code shown in my previous post Adding a Marker to a Google Map. Please review this post if you need a refresher.

markersArray.push(marker);
This statements pushes your added marker into thearray so you can reference it at a later time

For me I wanted to remove a marker from a google map. Now that I added it to my array all I need to do to reference this marker when I want to remove it from a google maps using the following command.
MyMap.removeOverlay(markersArray[i])

As an added bonus, If you want to see how many markers are in your array you can use the command
alert(markersArray.length);


I have incorporated this into my group project and will show the functionality at work during our presentation.

Enjoy!!

Adding a marker to a Google map

In my last post I detailed the steps of geocoding a given address to a set of coordinates. Using these coordinates you are able to map a point on a Google map and place a marker at that exact location.

The first thing we have to do is add a Google map to our web page, if you are unfamiliar with this step please refer back to my post How to add a basic Google map API to your website. Your basic Google maps code without a marker should look similar to this.




The next step in the process is to add the point to your map with a marker. Here is the code to do that.
var point = new GLatLng(42.251012,-83.625011);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() { alert ("Hello World"); });


Code Broken Down
var point = new GLatLng(42.251012,-83.625011);
This line of code creates a variable called "point", and sets the exact point where you want to place the marker on your map

var marker = new GMarker(point);
Here you are creating a variable called "marker", and then preparing google maps to use the coordinates of your "point" in this marker

map.addOverlay(marker);
This adds the actual marker to the map

GEvent.addListener(marker, "click", function() { alert ("Hello World"); });
As an added bonus, you can add an onclick event handler to the marker and call a function that displays an alert

You can find the final product here, don't foget to click the marker :)

This is a very basic way of adding a point to a Google map, there are many ways to utilize markers into your website. Yelp uses markers to mark business locations, this website uses markers to dynamically show the coordinates of your selected point of the map. I look forward to seeing your creativity at work.

Enjoy!!

Runningman: Gears, Ajax, and Comet

In the GoogleLab API, there are several awesome examples of apps you can build using Gears. For those of you that don't know what Google Gears is, heres a brief history. Google experimented with offline applications and came to a few conclusions. As they developed offline-enabled applications, they typically found the following design flaws:

• isolating the data layer
• deciding which features to implement offline (connection strategy)
• deciding on the app's modality
• implementing data synchronization

What an offline application can do is allow a user to interact with a web-service and to be productive while a connection is unavailable. Gears localizes several server features to give the user as rich of an experience as possible. Items that are localized on the client side include a data switch, server data layer, local data later, database, and a sync engine. While that may seem like a lot of stress to put on the client side, they have modules included that lighten the work load and only marginally decrease the speed of the application. When a connection is made with a server, Gears uses either Ajax or Comet to transfer data.

So back to these cool applications. The one I read into was called Runningman. Runningman is a program designed for the Android OS that allows a runner to time their run and through the use of the phones GPS, track their path on a Google Map. The group working on the mountian biking website might benefit from this example, since they are doing something very similar.

The Runningman application includes Gears and contains a full code sample that you can download and manipulate on your own. They even have a full tutorial telling you have to write the program. Way cool! As you walk through the tutorial, they show you how Gears lets you create a desktop shortcut, use Comet to update data, use the Gears Localsever to operate offline, and much more.

Geocoding and Reverse Geocoding

How many people have a google map implemented into a web page and need to put a marker on an exact address within the map. Over the next two blog posts I will show you how to do this using geocoding. As Google states, "Geocoding is the process of converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers or position the map.


The following geocoding exercise will pull information from google using the address for the college of business which is 300 West Michigan Ave, Ypsilanti, MI

The first part of the process is to send the geocoding request using a REST request
http://maps.google.com/maps/geo?q=300+West +Michigan+Ave,+Ypsilanti,+MI&output=xml&oe=utf8&sensor=false&key=ABQIAAAAE7hs30ymlAm_4X305SntMRSvMRu_uxOrKH4eiP-mAjD5A6ggehSGm3tWp7Lc7PqCeEkyzlWZ5b1fww


Code Broken Down

Queried URL
http://maps.google.com/maps/geo?

This is the address that you want to retrieve coordinates for
q=300+West +Michigan+Ave,+Ypsilanti,+MI

This is the type of output file you want the data to be return in
output=xml (If you prefer a JSON format you can replace xml with JSON in this part of the string)

Encoding format of the response
oe=utf8

indicates whether the request is coming from a device embedded with a location sensor
sensor=false

This is where you put in your unique google key that is licensed for your website
key=insert your google key here

The outputted response is shown below:

Here is the XML file that returned from the query, as you can see at the bottom of the XML file the returned coordinates of the college of business is -83.6161001, 42.2411090

Here is the JSON file that was returned from the query, as you can see at the bottom of the JSON file the returned coordinates of the college of business is the same as the XML file

In the next blog post I will show you a basic way to use this coordinate to place a marker at this point on a google map

Enjoy!!

An Online Guide to Parking Spots

I was on Yahoo the other day and ran across some company startup news. I thought this was interesting because it appears to use google maps with mashups. The founder and chief executive of this new startup company, Rick Warner, came up with this idea while looking for a parking space in San Francisco. The company is called ParkingCarma and is based in Flint Michigan which is due to public and private funds that were made available to entrepreneurs who start new businesses in Flint.

It’s not clear if there is a cost involved with using the service because it appears to be free to view available spaces. However, the company does get revenue from ads as well as a percentage of parking fees. The article states that there is an additional fee of $9.99 a year for registered users in San Francisco and San Diego if they want to reserve spaces with their computer, PDA or mobile phone.


The service also offers parking rate information related to hourly or monthly parking and the website lists upcoming events in a few major cities which include: New York, Boston, Los Angeles, Chicago, San Francisco and San Diego. Of course, these events all revolve around the ability or necessity to “find parking”.

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.

Inidividual Project

I have been working on our individual project to add Google maps to my site. I really have had no problem adding the API to my page, but when I do I have problem with the rest of the page. This is my page before I add Google maps:



Basically how I have it set up is the description below the pictures comes up asynchronously when you click on a particular picture. I added information about each of the lakes in case someone may be interested in visiting one of them. I wanted to add the map to the left so that people could either see where the lake was or so they could get directions to each individual lake. The problem that I am running into is when I add the map I have to change the body tag to


in order to allow the page to fully load before the map is placed on the page. As you can see from my current webpage, now that I have the map on my page I can not get the information to come up. The only time that I can get it to come back up is if I change the tag back.

Is there anyone that could possibly guide me on what else I could try to get my asynchronous requests to work? I know that we are supposed to have a proxy pass through for the second iteration, but now that I started to do this it is bugging me why I can't figure it out. I am thinking that I may just need to step away for a moment in order to think about it, but I thought if anyone had anymore experience with Google maps they may know how to remedy the situation.

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!!

How to add a basic Google map API to your website

You are tasked with implementing a google maps API to your website, but don't know where to start. Don't fret, I am going to show you a basic overview of how to add a google map to your website.

First you need to sign up for a google maps API key. Log into your google account and then go to http://code.google.com/apis/maps/signup.html. At the bottom of the page, put a check mark in the terms and conditions box and in the My Website URL text box put your people.emich.edu website address. (ie. http://people.emich.edu/jguest) By putting in this website address, it will allow you to run google maps from any webpage that resides under this pathing structure. (ie. http://people.emich.edu/jguest/google/index.html. Clicking Generate API Key will provide you a page with your own personalized API key to access google maps.

Since we are programming in Javascript, go to the Javascript Maps API Example in the middle of the screen and copy and paste all of the text(including your API key) from the script tag to the /script tag into your webpages header. This will allow you to access the google maps API to implement into your webpage.

The next step will be to program your html page with a map object in order to place the google map into. To do this you will have insert

in the body of the html page. The "id" will be used by the the google maps API to insert the map into this object. The width and height can be set to your desired map size along with the position of the map on your webpage. You can purchase an HTML or CSS stylesheet guide like this one to assist in the setup of this element. http://www.amazon.com/HTML-XHTML-Sixth-Elizabeth-Castro/dp/0321430840/ref=sr_1_1?ie=UTF8&s=books&qid=1254182146&sr=8-1


Next will be to add the javascript to your webpage. For ease of demonstration we can insert the following text directly into the header of your webpage, however when implementing into your project you may want to follow the Head First AJAX books advice and insert the code into a separate javascript file.

Javascript Code Breakdown:
var map = new GMap2(document.getElementById("map_canvas"));
This creates the google map and inserts it into the "map_canvas" object that was created in the body of the html code. Remember, our code has made this map 500px wide and 300px high

map.setCenter(new GLatLng(42.240963,-83.618987), 13);>>
This sets the center of the map to the map coordinates of your choice, in my case I have set the center to the coordinates for Ypsilanti, MI

One final step is to set the javascript to run after the html loads by editing the body tag of the html document as follows. This will initialize the map and place it into the "map_canvas" object.

The final code should look like this:

You can see the map demonstration here:
http://people.emich.edu/jguest//IS449W/google/index.html

As you can see from the final product, the map shows Ypsilanti, MI but doesn't show any map controls. I will address this issue in my next post.

Enjoy!!