Tips and tricks for Blogger and Google Maps!

Here are some ideas you can use to make your website better, your blog better and some tools to use the Powerful Google Maps API.

Last update to this page: 09/02/2006

Follow these hyperlinks to find the information you're interested in:

How to rotate different Images each time someone loads the page.
How to display entries from your web blog on your HTML webpage.
How to use Google Maps on your own website.
How to use Google Maps on your own website and Pass a Position by URL.
How Pass a Long List of Information To Google Map.
How to put a Google Map on your Blog and use my PHP script to plot positions.

[RETURN TO HOME PAGE]

How to rotate different Images each time someone loads the page.

First off, you need to have your website running on a host that supports PHP scripts. To test your host's capabilities for PHP create an empty page called "test.php". Inside this file type the following statement:

<?php phpinfo(); ?>

Then upload the file to your host. You can then see if the host is running PHP and what version it is by viewing the file on your site. So in your browser, go to your domain and this file: http://yourdomain.com/test.php and see if it generates a large page full of all kinds of information about your server and php. The only thing to really note is the version of PHP, hopefully either 4.2+ or 5+. What is unique about PHP from HTML and Javascripts is PHP runs on the server, not on the browser. So when you put some php code into a page, it is going to be executed on the host system and the output will then be passed down to client browser. This makes PHP a powerful tool for creating dynamic websites. I recommend this site for more details about PHP scripts.

Ok, so the phpinfo() test worked (if not, you need to talk to your host provider to get PHP installed or enabled for your account). Now you want to create a spot on your website where the image rotates through a list of images stored on your host. I suggest you follow the steps outlined in a detailed article written by the author of the script. However the script is very robust. All you need to do is save this file in a new directory on your website. Rename this file to rotate.php, put your pictures in the directory along with the rotate.php file. Then on the webpage you want to have the changing pictures appear, put this line of code where you want the images:

Save everything, then view the page. Your JPG, GIF and PNG files should automatically be picked up and displayed in a random fashion. The best part is, you don't have to do any maintenance. Just add or delete pictures from this directory and the PHP script will keep track of the changes automatically. This is the tool I used on our home page to rotate the image you see there. Just go to http://www.sailsarana.com and hit refresh a couple of times to see it switch.

In short the steps to get it up and running are:

Save this file your directory with your images to display, but change the name to rotate.php (remove the .txt).
Put your images in the same directory with rotate.php.
On your page you want the images to appear, put in <img src="/path_to_images/rotate.php" />
Upload all the files to your server and test it.

How to display entries from your web blog on your HTML webpage.

If your blog generates an RSS site feed, this tool will help you read it, filter it, and display it in HTML where ever you wish on your website. It's a very power little script a that is free from "Feed for All". In essence, you need to download the php script. Inside the rss2html.php file, there are just a couple of lines you have to configure. Set the URL to the location of where your blog creates your RSS XML file (more info for blogger.com users), and set the location for template file.

Now go to your template file and edit the HTML settings to make it look like how you would like the information from your feed. The combinations are endless. You can read the documentation for more ideas or see our template for a very simple format. The rss2html.php file runs and replaces the ~~~commands~~~ inside the template with the text from your RSS feed. The template only acts as a guide to format the text from your RSS feed.

Once you have the rss2html.php configured, and you have the template file in place, you need to make a window on your html page to import your blog data. Our homepage has a good example. The text box about the Recent Slog Posts is a simple but easy way to import the RSS information. To do this, you need add what's called an inline frame or IFRAME. The following example works for IE, Firefox and Netscape:

The ilayer statement is added for older browsers, but you shouldn't need it. That's about all there is to it. After you view your page with the iframe, you'll probably want to tweak the template fonts, sizes, colors and information. You can add and remove statements in the template to suit your purposes.

In summary:

Download the php script and save the rss2html.php and sample-template.html file to a directory on your website.
Modify the rss2html.php to point to your blog files.
Modify your template as you wish.
Create an IFRAME area on your HTML page where you want to display the blog information as shown above.

How to use Google Maps on your own website.

First you have to go to G oogle Maps and apply for a site key. It's free, quick and easy. Enter in the URL and PATH of where you plan to create your HTML Google Map. They will then generate a long string of characters which is very important for you to keep.

Then create a webpage with the following HTML and insert your site key in the YOURSITEKEYGOESHERE spot:

<!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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=YOURSITEKEYGOESHERE"
            type="text/javascript"></script>

Save this to your host server and view it with your browser and your Google Map will show up, centered on Palo Alto, CA. If you want more examples of how to use the Google Maps API, check out my favorite Google Map API site whose ideas and code I've built upon.

How to use Google Maps on your own website and Pass a Position by URL.

Let's say you want to have one Google Map on your site, but you'd like to direct people to certain geographic spots using just a hyperlink. I've written a short Javascript that will parse the URL and then plot the point for you on the google map.

Once you've got google maps up and running it's not very interesting until you make it useful for your viewers. One way to do this is to provide a link to your map which then displays a point on the chart. To see how the tool works click on this link:

http://www.sailsarana.com/maps/map_app_3.htm?47,38.772,N,122,19.91,W,Old Slip,Good Old Gas Works Park

So here's the basic steps to get the job done:

All you have to do is save this file to your server's Google maps directory.
Edit the HTML to insert your Google Maps key. (See G oogle Maps and apply for a site key)
Create a URL link with the the latitude and longitude data and your labels as shown above and away you go.

Your link should look something like this:
http://yourdomain.com/yourpath/map_app.htm?47,38.772,N,122,19.91,W,Old Slip,Good Old Gas Works Park

How Pass a Long List of Information To Google Map.

Another Javascript I've made has the ability to read data from a file on the server and plot points with google map. It uses the URL to pass the name of the file to read the data from and then plots the points. Follow this link to see it in action:

http://www.sailsarana.com/maps/map_load1.htm?anchorages.txt

This Java script takes the information found in anchorages.txt which is located in the same directory as the map_load1.htm file and processes it onto the Google Map. This is a fun way to remember favorite spots on a boating trip or give people a virtual tour of some of the places you've traveled to. The text file is simple and follows this familar format:

23|16.265|N|106|27.255|W|Mazatlan is the best marina in Mexico!|Marina Mazatlan

Just add more lines for more points. Here's the example text file. And here's what you have to do:

All you have to do is d ownload this file and save it to your server's Google maps directory.
Edit the HTML to insert your Google Maps key. (See G oogle Maps and apply for a site key)
Remove the header graphics and extra text instructions and change the formatting as you like.
Create a URL link with the the latitude and longitude data and your labels and away you go.

How to put a Google Map on your Blog and use my PHP script to plot positions.

So maybe you travel a lot and no one knows where you are most of the time. With this tool you can import a Google Map right onto your blog page and have it plot points directly from the text you post in your blog. For example, say you're on a boat in the middle of the Pacific and you send a short email to update your blog (blooger.com instructions for emailing to your blog) with your current position and weather conditions. Well, with this tool running on your website, you can just send a text tag in your email like this:

{GMST}23|16.265|N|106|27.255|W|Waiting out the hurricanes!|Marina Mazatlan{GEND}

So when people view your site, they can read your message, and at the top of the blog, there's a great google map showing your marker with an interactive label. It's sweet and FREE! See my example here.

First off, you need a blog and you need to know the URL of that blog file. Your server also has to be running PHP 4 or higher (see the first part of this document for more information on that).

Follow these steps:

Get a Google Map API Key. (See G oogle Maps and apply for a site key)
Download this file and save it as map_blog.php in your directory where your Google Map API key goes.
Change the Google Map API key in map_blog.php to your key (look for YOURKEYGOESHERE and replace it with your key).
Edit your blogger template at blogger.com. In the template, look for <body> and after the main header, but before <Blogger> comment, insert this code:

<div align="center">
<table border=1 width="200px">
<tr>
<td>
<div id="map" style="width: 320px; height: 320px"> <font size="2" color="#000000">
<p align="center"><br><br>If you don't see a map here try clicking
<a target="_top" href="http://www.sailsarana.com/maps/map_blog.php">here</a> for our new blog page.</p></font>
</div>
</td>
<td width = 20 valign="top" style="text-decoration: underline; color: #4444ff;">
<div id="sidebar" style="width: 111px; height: 23px"><font size="2" color="#000000">
<p align="center"></p></font>
</div>
</td>
</tr>
</table>
You might have to experiment with the placement and the sizes before it fits your template just right. See my template for blogger.com
Save the template. View your original blog location and see if the table appears ok. There won't be a map there yet.
Once you're happy with the template, edit the map_blog.php file to point to your blog file. Look for:
$file = file_get_contents ('PATH/BLOGFILE.HTML'); // this is the location of the blog with empty table where this file inserts the google map and searches for tags
and change the path/blogfile.html to the location of your blog. If you are using blogspot, or a location that is not on the server where you put map_blog.php, include the full URL like http://yourdomain.com/path/yourblogfile.html. (See information on file_get_contents).
Save the map_blog.php changes to your sever, then open your web browser and view the map_blog.php file.
You should now see your blog appear, and the google map will begin to fill in (centered on Mazatlan Mexico, because without any data points in your post, it uses Mazaltlan as a default.)
Now post a message with the proper {GMST} data {GEND} tags and refresh your page. Use the following as a test:
{GMST}48|38.772|N|122|19.91|W|My old slip in Seattle!|Old Slip{GEND}