Google API Help

Displaying Maps Without The API

2010-02-23T17:10:28Z

Google's Map API is great for displaying a map on your web site. However sometimes there is an even easier way. I recently helped PageTronics Wireless with a new blog. They wanted a map on the blog that showed their 4 store locations. Normally I would do this using the Google Map API but today I wanted to show another way that is a little easier.

]]> Go to Google Maps - maps.google.com

Click on My Maps, then Create New Map. You'll have the chance to give it a title and a description.

Then using the blue map marker you can select points on the map. Once you click on the map you can select text to be placed into each bubble.

Once you have your places in the map, click on the Link text in the upper right hand corner then Customize and preview embedded map. You will be given many options to customize the map further. Then by copying and pasting the code you can add to your web site or blog.

To see the final result check a look at PageTronics Wireless's Blog.

Click on Map listener

2009-11-09T17:23:09Z

Today I wanted to share a quick example. You want a specific function to happen when someone clicks on your map. We're not talking about click on a marker to open a info window. Today I'm assuming you want to redirect someone to another page when they click on the map.

To do this we create a listener, it's really easy and will take 40 seconds to explain.

]]> map = new GMap2(document.getElementById("map_canvas"));
GEvent.addListener(map, "click", function() {
top.location = 'http://www.queenannessheriff.org/';
);

You can see the map object is created. Then we use GEvent to call 'addListener'. We say when someone 'clicks' on the 'map' to execute the following. Then we tell the page to load http://www.queenannessheriff.org. Easy enough.

In this case this was a mini map used to show an example of the map. I wanted the user to click on the map to load the full version.

Prediction : Google Music API

2009-10-22T11:46:32Z

Ok this may be kinda obvious of a prediction but I think one day we'll have some sort of Google Music API. Today I just read that Google is coming out with a music search. Makes sense. They index and provide search for just about everything else. The original article is located here. I found it interesting that each artist will get their own page similar to how each company gets their own page on Google Finance.

The end goal of course being to sell music, thats right - a direct threat against Apple's iTunes. I for one absolutely love this idea. Competition breeds excellence. iTunes sucks, I'm sorry but it's true. I don't love the interface and adding new songs is just a plain and I could go on and on. A lot of times friends will ask me to help with them with some iTunes problem. Every time I just cringe. One would have to hope that Google's alternative will be better and cheaper.

I also found this to be very interesting, taken from the original article:

"Although Google won't get a share of song sales, it will collect revenue from advertising that will be shown with the search results, according to the people familiar with the plans"

Hmm, so Google won't be making money on the song sales themselves. That's interesting. So that means the original site will get the money, possibly offering referral money for affiliates? The whole thing sounds good.

Anyway, somehow out of all this I predict some sort of API that will allow us to tap into this Google music goodness. Heres hoping!

JSON to Map

2009-08-11T16:08:39Z

Today we are going to load JSON data thats being served from our Ruby on Rails scaffold. For this lesson I'll just concentrate on reading from JSON and display it on the map. In another lesson we'll show how to setup the scaffold. Then we'll go over how to make the markers and client list clickable. For an example on what this will look like, visit http://www.ccexperts.com/dev/json-map.html or view the image below.

]]> Let's dig into the code!

Easy enough!

As you can see it's pretty straight forward. I left plenty of room to expand on this later such as making the client list clickable to open info windows.

Google Weather API

2009-08-02T12:58:22Z

Every web designer has at one point or another been asked, "How can I get weather on my site?" The old answer was to have a giant ugly weather channel gadget. Something that looked very nasty and you couldn't un-brand it no matter what. Some used an iframe to display external data and have it appear to be on their site. Lastly you could always just have a link that says 'click here for weather'. My goal was to get weather data from an external source and be able to customize how it looks. Fortunately now there are some great resources out there. I'm going with one that is my favorite, something extremely easy to use and customize - Google's Weather API.

]]> To start lets pull up the URL in your browser.

http://www.google.com/ig/api?weather=new+york,ny

If you look in the address you can see the location - New York, NY. Easy enough, let's take a look at the output.

Weather XML Output

Wow check out how easy that was. Now all we did was submit the location and hit enter. Now we have in XML weather data for that area. No advertisements and since the data is in XML we can make it look however we want. Note: I shortened the output to only one day. So what's next? Well in my case I used a PHP script to output this data. Let's take a look at that source code.

PHP Source

function getWeather() {

$requestAddress = "http://www.google.com/ig/api?weather=21619&hl=en";
// Downloads weather data based on location - I used my zip code.
$xml_str = file_get_contents($requestAddress,0);
// Parses XML
$xml = new SimplexmlElement($xml_str);
// Loops XML
$count = 0;
echo '

foreach($xml->weather as $item) {

foreach($item->forecast_conditions as $new) {

echo '
';
echo 'icon['data'] . '"/>
';
echo $new->day_of_week['data'];
echo '
';
}

}

echo '

';
}

getWeather();

I hope this tutorial was helpful! The Weather API is great on so many levels, fast, easy and customizable. To see this live take a look at Jetty Dock Bar's web site where it was used.

Download Source Files

Download weather.php

New Trends - Mashups & Google Base

2009-07-27T11:48:32Z

I wanted to talk about some new trends that have been rising in popularity now. Then we'll go over how to use each of these resources to help your web site. Using these new techologies you can really add some amazing things to your sites. Its not always easy to see how these techologies can be used to increase visits - that's what we'll be going over. So lets get started.

]]> Mashup Sites

Mashup Sites are sites that take 2 or more data sources and put them together to form a new site. My favorite example is Housingmaps.com. This site takes Craigs List data from their housing ads and then uses Google's Maps API to display the data. Its geniuis! Mashup sites can be really inspirational. Now more than ever there are amazing resources and APIs out there. Coming up with creative uses is both the hard and fun part.

API's

We'll talk a lot of about API's. API's are Application Programming Interfaces in our above example the owner of housingmaps.com used Google's Maps API to display points on a map. Its a way we can talk directly to a program and use it for what we need it to do. For example anyone could go to Google Maps and search for houses for sale, however using the API we can make our own map and have things displayed exactly how we want them. Lets take a look at just a few of Google's API's (if you can't tell by now - yes I'm very partial to Google).

Google Maps

As described in its most basic form you can have your own map and post points. We'll go into some really cool uses for this in the future.

Plot points on a map using Google Map API - Part 1 - Part 2

Google Base

This is another amazing resource. Google Base allows you to upload your own content - anything you want. For now we'll go over the most popular sections. Housing, Personals, Jobs, Recipes - these are all categories of Google's base. The uses for this are so incredibly large. First of all you can post your own items into Google's base. Have you ever searched on Google and it recommend Products to you? What about Google's Real Estate search? We'll go over how to add your own products and services into Google's base for all the world to see. We'll also go over how you can query Google's base and use others peoples items on your own site.

Yahoo Pipes & Microsoft's Popfly

Yahoo Pipes & Microsoft's Popfly allows you to create really quick mashup sites. To take a quick example you can query Yahoo's Traffic API and place the accidents on a map. Both of these utilities are great, free and available on the web - no downloads are required.

We'll go over how to use all of these great resources in the future. More importantly we'll see how to not only use these resources but ways you can use these resources to help increase visits to your site.

I'll also go over how to do some cool stuff using Google Base. For the longest time if you wanted to search for cars, you had to go to the biggest car web site to do so. Which one to go to? cars.com? craigslist? Well now finally Google base allows anyone to add data into their database. Then anyone can pull that data and display it on their web site. Everyone adds into it - and everyone wins. I'll show you how you can query Google base to display some cool stuff on your own web site including:

Real estate listings
Products for sale
Events
Jobs
Vehicles
Personals

There's even more than that. The idea is to have all this awesome data on YOUR web site. No more linking so the viewer can leave or using a frame. Stay tuned!

Plot points using Google Maps API - Part 2

2008-12-29T12:44:38Z

Hey everyone! Sorry for the delay in posting this. It’s been a busy time lately. I’m spending half my time in New York which means I’m more than double behind. Anyway I previously wrote about how to quickly geocode a bunch of addresses using JavaScript. Then I would copy and paste those results into a new file that I named clients.xml. Warning : this is pretty inefficient I must say. If a new addresses was added you would have to go back and geocode all of them then copy and paste into clients.xml. I know this isn’t the best practice. The real answer would be to have a PHP script geocode an address and write into a database. However in the beginning I had 1000 addresses to geocode and not a lot of time to write an application. So this is really me just doing a quick mash up.

]]> This example I use the following method to plot my points.

All addresses are already geocoded in my clients.xml file - (See part one to see how I mass geocoded the addresses to get them in there.)
Use GDownloadUrl to open clients.xml via AJAX
Loop over each entry and add to map

Ok so our clients.xml file should look something like this (I'm just posting a few lines).

123 Dundee Drive, Grasonville, MD 21638" lat="39.119173" lng="-76.614295"/>
435 Easy street, Chester, MD 21619" lat="38.951795" lng="-76.529299"/>

Easy enough, got the address and the cords that's all we need. Note: Again I am guilty for not putting enough information, I really should have put the persons name, etc.
GDownloadUrl - from XML to our Map
Here is the relevant code that we'll be looking at. We use the Google function GDownloadUrl to open our XML file. The output is directly passed to the adjorning function with the variable 'doc'. We then use GXml to parse the downloaded file 'doc', that is saved as xmlDoc. We then read the elements named 'marker' which is in this case our entire file, that is saved as 'marker'.
GDownloadUrl("clients.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
}
Loop It
We now do a loop over all the markers returned. This will loop over every address we have geocoded. You can see we use getAttribute to extract the latitude and longitude values from the markers. They are extracted then saved to point using the GLatLng function. You can see also I extract the attribute for 'html' and 'label'. In my example I never put any values into these attributes. I would recommend that you do so. You could put in the persons name or whatever information you need.
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
map.addOverlay(marker);
}
So really that's it! The hard work of geocoding was already done in my last example, then I saved it to XML, now this map just loops over the XML file and displays it. If anyone has any questions about pretty much anything relating to Google's Map API please post a comment. In the future I'll do more tutorials and probably some videos.
Here is this example live so you can see it work and view the full source.

Plot points using Google Maps API

2008-11-15T12:42:01Z

In this tutorial I wanted to go over how to take raw data from just about any source and then plot the points on a Google map. This process can be done in any number of ways, I know myself I have done a little differently each time - mainly due to constraints or a customers request. In this particular request I had very limited time. I was asked to take data from their client management system and then place it on a Google map. Let's see how we should start such a process.