Got out of the house today for a quick bite to eat at the Early Girl Eatery.  It’s a well documented fact that Andie MacDowell eats there from time to time. Anyway, it was nice to get out of the house, even if I didn’t run into any of Hollywoods elite.

A local girl recently changed her legal name to a CutOutDissection.Com. This is the kind of dedication I’ve come to expect from most of the folks here in Asheville.  My only complaint, the site redirects and defaults to a classic asp page ( .asp ) which is so old school server technology.

After researching a few implementations of Google Maps with Wordpress and not finding one that seemed to fit, I decided to roll my own solution. My basic idea was to keep everything tag based and as simple as possible. Ideally I should be able to place a DIV tag on a page, fill out some basic attributes and then let Javascript pick up the work from there. I was able to integrate a few features that many people may find useful with a tag based google map.

First is a basic map loaded based off an address, really pretty simple.

Above is the result from the code below.

<div class="googlemap gmsmall"
address="Patton Ave, Asheville, NC"></div>

Here is an enhanced version of the same map with some additional controls added based on some optional attributes. These settings control the map controls and manually sets the zoom level. Also, any HTML you put inside the DIV will be pushed to the popup bubble on the map.

Above is the result from the code below.

<div class="googlemap gmmedium"
address="Patton Ave, Asheville, NC"
zoom="10"
pan="yes"
scale="yes"
type="yes">
<h3>Party inside the bubble.</h3>
<b>BYOB!</b>
<img src="http://www.ragingsmurf.com/(...)/party.gif"
alt="Party Gif"
title="party"
width="100"
class="alignnone size-medium wp-image-108" />
</div>

Also, I included a way to generate driving directions between to points. A couple thing to keep in mind, first you need to specify a directions attribute where turn by turn directions will be funnelled and this needs to be a DIV with the same name somewhere on the page. Also, the zoom doesn’t need to be specified since the google api takes care of that.

Driving Directions

Above is the result from the code below.

<div
class="googlemap gmlarge"
fromaddress="Asheville, NC"
toaddress="West Asheville, NC"
directions="route" pan="yes"></div>
<h3>Driving Directions</h3>
<div id="route"
class="googleroute"></div>

Implementing this on your Wordpress Blog.

1) Add the following styles to your Stylesheet (style.css) under Theme Editor.

.googlemap {
border: 1px solid black;
}
.googleroute {
border: 1px solid black;
width : 300px;
}
.gmsmall {
width: 200px;
min-height: 200px;
height: 200px;
}
.gmmedium {
width: 300px;
min-height: 300px;
height: 300px;
}
.gmlarge {
width: 400px;
min-height: 400px;
height: 400px; }

You can of course modify the above styles to accommodate your preferences and Wordpress theme.

2) Sign-up for a Google Map Key.

You can sign up for a free google map key, you then need to get access to the Header.php in your sites current theme folder.

3) Add Javascript References to the Header.php file

<script
src="http://maps.google.com/maps?
file=api&v=2&key=YOUR_MAP_KEY"
type="text/javascript"></script>

<script type="text/javascript"
src="<?php bloginfo('template_directory'); ?>
/scripts/maps.js"></script>

4) Finally, download the Maps.js

Save this file into your theme Scripts folder.

• Google Maps for Wordpress (1.5 KB)

Known bugs.

1. (10/13/2008) If two or more DIV tags contain the same exact addresses, only the first map will load. So if you have a need for two or more maps with the same address, adjust the address every so slightly. i.e. (Patton Ave, Asheville, NC) and (Patton Ave, Asheville NC)
2. (10/13/2008) Wordpress hates recognizing HTML when there are carriage returns, so when you are creating your DIV tags make sure their all in one line.

Final thoughts

This is a very basic implementation of the Google Maps API, I can imagine there are a lot more features that can be added to this script while still keeping it’s implementation simple. If you have some feedback, please feel free to contact me or leave a comment.

Subscribing to many different RSS feeds, some for educational value and some for entertainment. I’ve seen a reoccuring theme where the landing page is 90% ads, having the link to the real article being buried somewhere in the middle of the page. This gets pretty annoying having to eyeball for the real content, especially on a mobile device. On a side note, it also makes me less likely to share these links on my blog or forward them to friends. Can we all convert to inline RSS ads for easier usability?

A handy gmail setting that allows you a sobriety check before sending off any email.  I recently recall an email where I used the “the stars have aligned” in one such email to a boss. I will of course be turning this feature on.

 

 

 

 

 

“Select the days and times when you’re likely to need Gmail to step in and double check that you want to send that email.”

After walking for about 2 miles in a snake like pattern that covered most of the Asheville High School campus, I was given preferential seating since I have a broken ankle.  

Overall his speach was pretty directed at the medical policies that he planned for his administration.  It was well presented but I felt like he was pandering a bit.

Finally made it to the Obama rally line.

By far my favorite piece culinary equipment.