THAT Agency Web Design Firm
Blog Home | Request Proposal
THAT Agency Design Studio Blog
Posts Tagged ‘Javascript’

Simple Google Map Example part 1

Posted on Jan 25, 2010 by Rich to Web Development

I think the more examples people post out there, the overwhelming some things might get. Google maps and the interaction between the code and the functionality behind it has for the most part, been something that some developers might might a little hard to deal with.

Well I am not trying to add to the confusion, but hopefully shed some light on this matter. I believe this example and straight to the point and pretty easy to understand.

Here we go.

What Does it do?

This example is pretty simple. It will render a map on a web page based on items that it sees in an XML file.

What Do I need?

You will need a couple of things.

1. First you are going to need a Google Map API Key.  Dont worry this is way less complicated than you might think, but remember that an API key is based on a domain.  So if you are testing everything on mysitedev.com  you will need a new API key when you launch live to mysite.com.

2. You will need to get lattitude and longitude coordinates for the location(s) you wish to plot. I do it using google maps itself, but maybe there is something easier out there than you can share?

google-map-example





code for actual map file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map Example</title>
<style>
*{margin:0;padding:0;}
body{background-color:#d9d9d9;text-align:center;}
.mapBox{width:640px;height:480px;display:block;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_API_KEY"></script>
<script type="text/javascript">
//<![CDATA[
function load(lat, lng){
	if (GBrowserIsCompatible())
	{
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.setCenter(new GLatLng(lat, lng), 6);
 
		function createMarker(point, name, address, index)
		{
			// Create a lettered icon for this point using our icon class
			var letter = String.fromCharCode("A".charCodeAt(0) + index);
			var icon = new GIcon(baseIcon);
			icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
			var marker = new GMarker(point, icon);
			GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml("<p><strong>" + name + "</strong><p><p>" + address + "</p>");
		});
		return marker;
	}
	// Create a base icon for all of our markers that specifies the
	// shadow, icon dimensions, etc.
	var baseIcon = new GIcon();
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	baseIcon.infoShadowAnchor = new GPoint(18, 25);
	// Grab actual information from the properties xml to use.     
	GDownloadUrl("properties.xml", function(data, responseCode)
	{
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		for (var i = 0; i < markers.length; i++) {
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
			map.addOverlay(createMarker(point, markers[i].getAttribute("name"), markers[i].getAttribute("address"), i));
			}
	});
	}
}
//]]>
</script>
</head>
<body onload="load(28.551957,-81.419678)" onunload="GUnload()">
    <div id="map" class="mapBox"></div>
</body>
</html>

Please note that the line load(num,num) is the center of the map.

<body onload="load(28.551957,-81.419678)" onunload="GUnload()">


code for properties XML file.

<?xml version="1.0" encoding="utf-8"?>
<markers>
	<marker name="Walt Disney World Resort" address="7100 Municipal Drive Orlando, FL 32819" lng="-81.419678" lat="28.551957" />
	<marker name="Sea World Orlando" address="Orlando, FL 32821" lng="-81.458044" lat="28.420844" />
	<marker name="THAT Agency" address="120 S. Dixie Hwy WPB, FL 33401" lng="-80.049219" lat="26.725144" />
	<marker name="Art Deco Welcome Center" address="1200 Ocean Drive Miami Beach, FL 33139" lng="-80.125952" lat="25.795718" />
	<marker name="Daytona International Speedway" address="1801 W Internatl Speedway Blvd Daytona Beach, FL 32114" lng="-81.058674" lat="29.215856" />
</markers>

Click Here View a Working example using the code noted here

Later on we can look at how to create the properties.xml file dynamically using php as well as some other goodies. Stay Tuned.

Tags: , , ,

Fighting spam from inline email addresses using JQuery Plugin – Version 1.0

Posted on Mar 19, 2009 by Rich to Technology Trends, Web Development

This is a JQuery plugin I have been working on to try to eliminate; if not help, fight spam through bots and such going through websites and scraping email addresses.

Basically it works like this:  You add the emails in a certain way in your code, be it yourname^yourcompany#com or however you want to add it. Then let the plugin work its magic. The code will be shown as above, but will behave as if you had typed in yourname@yourcompany.com. Simple huh? Well here we go:

Javascript

1
2
3
4
5
6
7
8
9
10

<script>
$(document).ready(function(){
// example 1
$('a[rel*=spemail]').spemail('|,:','linkbase');
// example 2
$('#email').spemail('|,:','mailbase');
// example 3
$('#plainemail').spemail('|,:','plainbase');
});
</script>

HTML

1
2
3

<p><strong>Example 1:</strong> <a href="yourname|yourcompany:com" rel="spemail"></a></p>
<p><strong>Example 2:</strong> <span id="email">yourname|yourcompany:net</span></p>
<p><strong>Example 3:</strong> <span id="plainemail">yourname|yourcompany:net</span></p>

As you can see in the examples above, the code in the DOM, will handle specific email pieces based on their ID or rel. Try it out and see. It works well.

Check out a live example of Fighting spam from inline email addresses using JQuery

or

Download the Fighting spam from inline email addresses using JQuery Plugin – Version 1.0 source files

Tags: , , ,

Internal Links with Favicon using jQuery

Posted on Mar 9, 2009 by Rich to Technology Trends, Web Development

After thinking about doing something with favicons and links, I came up with this very simple jQuery Plugin that would allow all the internal links in your website to actually have your own favicon implemented on the left side of the link.

First of course, you will need jQuery, which you can always download on the jQuery website.

Then you will need the internalFavLink plugin.

Here are some screen shots:

DOM

Add to your DOM Call

Add to your DOM Call

RESULTS

Shown Results

Shown Results

So some things I thought about before adding this to the blog.

1. What if I don’t have a favicon? Well, then either create one from an image and use this favicon creator tool from Dynamic drive, add it to your site and you will be able to use this plugin.

2. What if my favicon is a .png and not an .ico file as in the plugin? This is simple as well, just find the code in the javascript file called favicon.ico and change it to yours.

3. What if I want the favicon to be after the link? This is also simple; in the plugin javascript, just change where it says “prepend” to “append”.

The plugin is very simple. So if anyone has any ideas on how to improve please let me know.

You can also see the Internal Favicon Link jQuery Plugin in action!

Tags: , , , ,

Up and Down slider using JQuery

Posted on Feb 2, 2009 by Rich to Web Development

To tell you the truth, I wish I could remember where I originally found this example because I would like to give credit where credit is due, but I really dont remember. Anyhow, this person’s example was a cool slider effect that stuck to the top of the page. Well I decided to take that and turn into into the same basic concept; only this time coded in JQuery. Oh Yes. I love JQuery.

The examle is pretty straight forward. So if you have any comments or concerns, definitley drop me a comment and I will try my best to answer them.

Here are the screen shots:

Slider in the "Off" Position

Slider in the "Off" Position

Slider in the "On" Position

Slider in the "On" Position

I kept the same colors and such from the other example so if anyone knows where the original was from, please let me know.

Click Here to see this example in action.

Want to download the code? Of course you do, click here.

Originally seen @ (Antonio Lupetti’s moo-tools example)

Tags: , , ,

Developer: jQuery Foundation .js

Posted on Jan 29, 2009 by Rich to Technology Trends, Web Development

As developers we always keep our little things that we always use or start a project in the same mannerisms. Coming up later, I will write about how we lay the foundation for a project with our project template. But for now, I would like to show you how we have our jQuery foundation file layed out. Above and beyond the scope of this base file, everything past this point is decided by the individual project.

We have done many websites and somethings always seem to arise.   So I decided “Why not just have them in the base file from the beginning.”  Right? of course.

So here is the file that we use for just such a thing.

So here is “jQuery Foundation .js”

JQuery:

This has quickly become my norm when dealing with a javascript framework. It is light, flexible and above anything else, easy to learn and implement.

When I use this, I have a set of things I always place inside the code that executes on the DOM.

1. External Links

Now many people do not like to use the target=”_blank” anymore, since it’s not standard anymore. Well why not use jQuery to make it happen.

1
2
3
4
5
6
7
8
9

$('a[rel="external"]').click( function() {
        window.open( $(this).attr('href') );
        return false;
});
// or
$('a[id="externalLink"]').click( function() {
        window.open( $(this).attr('href') );
        return false;
});

2. PDF’s

PDFs should open up without sending the visitor flying to a new window and all sorts of shenanigans like that.

1
2
3
4

$("a[href*=.pdf]").click(function() {
		$(this).attr({"target":"_self"});
		return false;
});

3. Confirm a Click event

This was just something that I add because well, sometimes you hit a link or a button or submit something by accident right? of course! we all do. Adding this little bit of code will help you try to avoid that, or at least deal with it a little better.

1
2
3
4
5
6
7
8
9
10
11

// IN DOM
$('a[rel="confirmDelete"]').click(confirmTheClick);
// OUTSIDE DOM
function confirmTheClick()
{
	var agree="Are you sure you wish to perform this action?\nCheck your work!";
	if ( confirm( agree ) )
		return true;
	else
		return false;
}

You can also download the quick and easy jQuery Foundation  javascript file right here, so you can see it.

Do you have anything that you use? Drop us a comment we would love to see what ideas you have!

Tags: , ,

THAT ServicesTHAT Marketing THAT Case Study THAT Client List THAT SolutionTHAT Agency THAT Contact Site Map Privacy

Copyright ©2006-2010 THAT Agency, LLC, a web design firm and web develelopment company. All Rights Reserved.
Partner website: THAT SEO Agency