Integrating Google Maps into Fancybox--tutorial.jcwcn.com

Step 1 - Downloading FancyBox

FancyBox can be downloaded from ancy.klade.lv, while you are at there website, take a look at the great examples, these show you what you else you can do with FancyBox besides what we are going to do!
When you are done watching those examples click the ZIP icon in the header of the website to download it.

When you downloaded the FancyBox zip file, unzip it, you will see that all files are in the same directory.
I don’t really like this, because its not structured, and makes everything messy.

So lets rearrange that by moving all images into a new folder called img/, the same for all the JavaScript files but these should go in a folder called js/, and last move the CSS file into a new directory called css/

So that looks much better, BUT we still have to make a few edits i the css/fancy.css and change the path’s of all images, because we moved them into a new directory.

If you open fancy.css you will notice some backgrounds have images like:

background: transparent url(fancy_progress.png) no-repeat;

Now you have to replace all image url with new ones, you can simply do a find & replace with your text editor. Find: url( Replace: url(../img/ , this will change all background url’s to:

view plaincopy to clipboardprint?

background: transparent url(../img/fancy_progress.png) no-repeat;

background: transparent url(../img/fancy_progress.png) no-repeat;

Step 2 - Your contact page

We are going to create a simple HTML contact page, this is where the FancyBox + Google Maps will be shown. In this tutorial you will need some basic HTML & CSS knowledge!

view plaincopy to clipboardprint?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Contact Me</title> //Website Title
<style> //Start inline styling
body{ //Style body background and global font type
background:#323232;
font: 11px verdana;
}
#wrap{ //Style the content wrap
background: #FFF; // White background
width: 500px; // 500px in width
margin: 0 auto; // Center the wrap
padding: 10px; // Add some nice space between text and wrap background
text-align:center; // Center the text and images
}
</style>
</head>
<body>
<div id="wrap">
<h2>Contact Me</h2>
<p>Hi there! There is only one way to contact me, and that is by coming to my house!
Just click the globe below and you will see where i live!</p>
<img src="img/globe.jpg" alt="" />
<p></p><small>Psst! Click the globe!</small></p>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Contact Me</title> //Website Title
		<style> //Start inline styling
			body{ //Style body background and global font type
				background:#323232;
				font: 11px verdana;
			}

			#wrap{ //Style the content wrap
				background: #FFF; // White background
				width: 500px; // 500px in width
				margin: 0 auto; // Center the wrap
				padding: 10px; // Add some nice space between text and wrap background
				text-align:center; // Center the text and images
			}

		</style>
	</head>
	<body>

		<div id="wrap">
			<h2>Contact Me</h2>
			<p>Hi there! There is only one way to contact me, and that is by coming to my house!
			Just click the globe below and you will see where i live!</p>

			<img src="img/globe.jpg" alt="" />

			<p></p><small>Psst! Click the globe!</small></p>
		</div>

	</body>
</html>

So the idea is when somebody click’s the globe image, a FancyBox window will open with the correct Google Map location. This is just a simple page, but you can apply this in any of your websites, cms systems or blogs.
This is how the page would look like - Contact page demo

Step 3 - Installing JavaScript & CSS files

Now in order to use FancyBox, we need to load the JavaScript files.
Currently we have these files which came with the FancyBox zip:

jquery-1.2.3.pack.js
jquery.fancybox-1.0.0.js
jquery.pngFix.pack.js

1. This file contains the jQuery framework, you need this because FancyBox is based on this framework and it will and cannot work without it!

2. This is the FancyBox “plugin” written using the jQuery framework, this is the file that allows us to create these great effects.

3. FancyBox uses .PNG images wich have shadows in them, IE6 and lower do not support .PNG transparency, so this file is optional, but i advice you use it!

Ok, so now its time to load the JavaScript into our contact page, we are going to load these files between the <head></head> tags. Almost forgot we also have to load the the FancyBox CSS file!

view plaincopy to clipboardprint?

<head>
<title>FancyBox + Google Maps | XCODETUTS</title>
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.0.0.js"></script>
<script type="text/javascript" src="js/jquery.pngFix.js"></script>
<script type="text/javascript" src="js/xcodetuts.js"></script>
<link rel="stylesheet" href="css/fancy.css" type="text/css" media="screen">
</head>

<head>
  <title>FancyBox + Google Maps | XCODETUTS</title>
  <script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
  <script type="text/javascript" src="js/jquery.fancybox-1.0.0.js"></script>
  <script type="text/javascript" src="js/jquery.pngFix.js"></script>
  <script type="text/javascript" src="js/xcodetuts.js"></script>

  <link rel="stylesheet" href="css/fancy.css" type="text/css" media="screen">
</head>

As you can see i also loaded js/xcodetuts.js, this is the file where we are going to write some jQuery to active the FancyBox, so just add that link and we will start working on it in the next step.

So what we did is, loading all required JavaScript and the FancyBox stylesheet.
For anyone who does not know what the fancy.css file does, it takes care of all images included in FancyBox, like the shadows and of course the close button.

Step 4 - Configuring FancyBox

So what we need to do know is create js/xcodetuts.js in the previous step we added the link so it will be loaded, but we still need to create it. Now we are going to start of with the following code:

view plaincopy to clipboardprint?

$(document).ready(function() {
//Our code will come here
}

$(document).ready(function() {
   //Our code will come here
}

The code above means, when everything loaded, run the code between the 2 brackets.

view plaincopy to clipboardprint?

$(document).ready(function() {
$("a#maps").fancybox(); //Activated FancyBox when #maps has been clicked
}

$(document).ready(function() {
   $("a#maps").fancybox(); //Activated FancyBox when #maps has been clicked
}

So lets go back to our contact page, and add the following link around the globe image:

<a id="maps" href="#googleMaps"><img src="img/globe.jpg" border="0" alt="" /></a>

So, we gave the link a #maps ID, wich will active the FancyBox.
Ok, so now it’s time to grab the Google Maps iFrame block, so go to maps.google.com, and enter your home or any other address. When your address is loaded, click the Link button on the top right corner and copy the iFrame code.

Now paste the code at any place of your contact page, but add the following div around it:

view plaincopy to clipboardprint?

<div style="display:none" id="googleMaps">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&hl=en&geocode=&q=1600%2BPennsylvania%2BAve%2BNW%2BWashington,%2BDC%2B20500,%2BUnited%2BStates&sll=37.0625,-95.677068&sspn=30.171443,67.675781&ie=UTF8&t=h&z=14&iwloc=addr&ll=38.908601,-77.032356&output=embed&s=AARTsJqckjdDad6tPeDRH4s3w57t5bbS6A"></iframe>
<br /><small><a href="http://maps.google.com/maps?f=q&hl=en&geocode=&q=1600%2BPennsylvania%2BAve%2BNW%2BWashington,%2BDC%2B20500,%2BUnited%2BStates&sll=37.0625,-95.677068&sspn=30.171443,67.675781&ie=UTF8&t=h&z=14&iwloc=addr&ll=38.908601,-77.032356&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>

<div style="display:none" id="googleMaps">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=1600%2BPennsylvania%2BAve%2BNW%2BWashington,%2BDC%2B20500,%2BUnited%2BStates&amp;sll=37.0625,-95.677068&amp;sspn=30.171443,67.675781&amp;ie=UTF8&amp;t=h&amp;z=14&amp;iwloc=addr&amp;ll=38.908601,-77.032356&amp;output=embed&amp;s=AARTsJqckjdDad6tPeDRH4s3w57t5bbS6A"></iframe>
<br /><small><a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;geocode=&amp;q=1600%2BPennsylvania%2BAve%2BNW%2BWashington,%2BDC%2B20500,%2BUnited%2BStates&amp;sll=37.0625,-95.677068&amp;sspn=30.171443,67.675781&amp;ie=UTF8&amp;t=h&amp;z=14&amp;iwloc=addr&amp;ll=38.908601,-77.032356&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>

What this div does, is hiding the code by default, and if you take a look at the id af that div “googleMaps” you can see that the href in the url points to that div “#googleMaps”, this means these are connected using FancyBox.

Now when you click the image, you will see that FancyBox is working, live example of step 4 can be found here

Now as you can see, its not working properly, the FancyBox is way to big which creates white space between the map and the FancyBox border. So we need to adjust the FancyBox frame width and height.

So let’s get our xcodetuts.js file and edit that.

view plaincopy to clipboardprint?

$(document).ready(function() {
$("a#maps").fancybox({
'frameWidth': 425, //frameWidth = Default width for iframed and inline content
'frameHeight': 350 //frameHeight = Default height for iframed and inline content
});
});

$(document).ready(function() { 

    $("a#maps").fancybox({
                'frameWidth': 425, //frameWidth = Default width for iframed and inline content
                'frameHeight': 350 //frameHeight = Default height for iframed and inline content
    });

});

As you can see, we have set the FancyBox width and height using the FancyBox settings.
Now if you are wondering how i know the excact size of the Google Maps iFrame, well the start of the iFrame code says it:

view plaincopy to clipboardprint?

<iframe width="425" height="350"

<iframe width="425" height="350"

You can adjust the size of the Google Maps iFrame and the FancyBox to make it larger.
And that’s the end of this tutorial! I hope you liked it, and if so please use any of the promote links below.

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]