Recently in Web Design Tutorials Category

Displaying Maps Without The API

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.
google-maps-ppc.gif

Google Maps API on click listener

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.

JSON to Map

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.

json-to-map.jpg


Google Weather API

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.

weather-icons.jpg

Plot points using Google Maps API - Part 2

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.

Plot points using Google Maps API

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.