Hi guys. Today I thought we’d take a look at how to easily add Google Maps to your pages. Many of the examples I’ve seen online for how to use the Maps service rely on you being able to get the exact longitude and latitude of your location for the API to figure out where the location you want to show is displayed. I think that this is a little too demanding for any business (or developer) to easily lookup and so I thought I’d share with you a much easier way of getting Maps on your site (whether you want to highlight one location or many)…and all you’ll need is the addresses!

What we’re going to be using for our example is David Hong’s excellent new jQuery Google Maps plugin to create this demo. The best part of the plugin is that it supports you just providing an address or list of addresses to the locations you want to show..and it’ll show you a map with all of them on it.

For example:

var addr = ["10 Downing Street Westminster, London, SW1A 2AA, United Kingdom "]

Pretty cool, right?. So, lets have a little tutorial session.

The first thing I’d like you to do is signup for a Google Maps API key before we get started. You can do this here.   Next, download my tutorial pack for this post and open up maps.html in your favourite text editor.

All you need to do is find the following line and paste your API key over the text in bold, then save.

<script type="text/javascript" src=http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=API_KEY_GOES_HERE></script>

We then include David’s jQuery plugin as well as a copy of jQuery itself. The complete list of includes for the page should then be as follows:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=YOUR_API_KEY"></script>
<script type="text/javascript" src="jquerymaps.js"></script>

If you scroll down the page you’ll see a JavaScript array that looks a lot like the address sample I noted above. Let’s try to render a map that shows us a few of the important landmarks over in London.

var addr = [

“10 Downing Street Westminster, London, SW1A 2AA, United Kingdom”, “Buckingham Palace, London, SW1A 1AA, UK”,

“Big Ben, Bridge St, London, Westminster,SW1A 2, United Kingdom”];

Next, lets create and initiate our map. For this we define a new div element to hold our map (lets call it google maps to keep it simple):

<div id="google-map" class="canvas"></a>

And finally our last step is attach a map to this div which we can do as follows (note that you can also easily set the map zoom and configure whether or not to use labels in your final map).

$(function() {
               $("div#google-map").googlemap({
                   controls: true,
                   labels: true,
                   zoom: 4,
                   addresses: a,
                   debug: true
               });
           })

Thats it!. I hope this tutorial helps you to easily integrate Google Maps into your websites, projects and blogs. Please feel free to Retweet if you liked it.

Related posts:

1. jQuery UI Animation Effects The jQuery UI Effects Core brings a few more...
2. How to add a password strength meter using jQuery in under 5 minutes Hi guys. Today I’m going to show you how...
3. 13 Incredible New JavaScript Projects From Google Labs   This post will introduce you to an excellent...

Related posts brought to you by Yet Another Related Posts Plugin.

If you’re a web developer and you haven’t explored the many ins and outs of Facebook app development so far, I would definitely recommend taking a weekend out just to try it out – you might be surprised at what you might learn (and it always looks good on a resume ;)). What I like about the Facebook platform is that you get a nice steady integrated flow of your friends comments, events, application notices and more made we want to ask the question – how can I build something cool that can use all this data? It’s actually surprisingly straightforward.

Facebook application development comes in five main flavors (some of which you can mix and mash)

1. An iFrame: Where you can load any external content hosted by you. This can be a PHP, ASP.net or even Grails application
2. FBML: Facebook’s own markup language is a one of my favorite parts of their API. It allows you to create something as rich as an Ajax friend selector in less than 2 minutes and other elements such as Modal-windows are a breeze too. You can wrap FBML around other languages (as in #1) but be careful as the FBML canvas doesn’t like pure javascript too much.
3. JavaScript: If you’ve been reading my blog, you might be a jQuery fan. Facebook offers up most of it’s API in JavaScript form through a pack called FBJS. It’s fairly versatile but can take a while to get to grips with. If you’re looking to build an application fast I would suggest trying out a PHP iFrame app with pure jQuery in there.
4. Flex/Flash: My buddy Tomás Lin swears by Flex when it comes to Facebook app development. Adobe released fairly extensive API’s for both of them recently which you can Download here. It’s really a personal preference. Popular apps like YoVille have been successfully made using Flash and the FB API (just bare in mind that you’ll need to code all your own components, something that doesn’t take too long thanks to FQL). You can also find an excellent series on every aspect of Facebook Flex development via this O’Reilly blog.
5. Java/Grails – There’s a fairy solid Java API available for Facebook which you can get here. Although Facebook abandoned official support for their Java API a while back, a community has been supporting and making updates to an unofficial version of the API since then. For a good guide on creating your first Grails Facebook app, I found this site useful.

Okay. So now we know what options are available to create our application, how do we decide which to go for?. It took me a few days to decide but in the end, as my app heavily relied on a PHP backend I opted to go for FBML + PHP my for my solution. It doesn’t really matter what flavor you choose as long as you feel comfortable with it.  To begin go over to developers.facebook.com and sign up for an API Key. There are many great guides to setting up your first app and I would recommend this one.
Now that we’ve selected an implementation choice and have our API key, what else might we need to know before we can start coding?. Facebook and the developers community come with a variety of feature-rich solutions to access their services (most recently the Stream API). Know what resources and tools are out available to you before you begin. It could save you a lot of time.


Useful FBML Facebook components

When I started looking into the Facebook API I didn’t realize just how much I wanted to do was readily available. Here are some of the built-in components that you can use straight out of the box.

• Facebook Drop-down AJAX friend selection.
• Facebook Multi-friend Selection with friend previews
• Facebook Multi-friend input
• Facebook pop-up Modal Dialog box
• Facebook Application Tabs
• Facebook Captcha
• Facebook MP3 Player

FQL – How to use it and why its important

FQL is the Facebook equivalent of mySQL and supports a similar syntax. It effectively allows you to query their web service and databases for information about a given user’s friends, photos and profile details and is a powerful gate to creating your own components which use this data. Whilst FQL is quite extensive, it doesn’t support the entire language-set you would expect with a full on querying language so work-arounds may be required for things such as the “LIKE” string. There’s a good list of FQL sample queries which you can find right here.


My tips on Facebook application development

When it comes to coding Facebook apps, my advice is simple: Think before you do :) That might sound obvious but I would genuinely encourage developers to write down what they would like their application to be capable of before they begin working on it – it helped me a lot. Once you’ve got a basic idea (or Wireframe) in mind, break your FB application down into components. Remember that the Facebook API is essentially a big shelf of information and you can pull anything you want out of it and stick it into a component to achieve something.

This means that if you like a particular jQuery slider, dynamic image grid or an autocomplete plugin – feel free to use it!. Speaking from experience and those of friends, you can find yourself frustrated with the Facebook API at times wondering how best to achieve something that would be trivial using plain HTML and javascript…in the end you’ll realize that there was an easier way to do it, so why not spend some time thinking about it now :)

There’s a whole world of amazing apps you can create with the Facebook API so good luck getting yours started!

Related posts:

1. Creating a Facebook Application – a simple guide for PHP, JavaScript, Flex and Grails developers.  If you’re a web developer and you haven’t explored the...
2. How to create a Facebook Friend Selector using jQuery and PHP or Grails (without FBML) When I first attempting to code up a pure PHP...
3. How to develop a Web Application in 5 easy steps – A guide for web developers and businesses Having developed web applications for a few years now,...

Related posts brought to you by Yet Another Related Posts Plugin.