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.
Party inside the bubble.
BYOB!
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.
Known bugs.
- (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)
- (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.
/slight/images/feed-icon-16x16.gif){kind=icon}