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.

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.
How to put a Google Map on blogger.com

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 old home page to rotate the image you see there. I've since written my only tool to do the banner rotation. It works in a similar fashion, and if you hit refresh and watch the banner you'll notice it pick new random photos.

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. 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:

<iframe src="http://yourdomain.com/yourpath/rss2html.php" width="95%" height="80" align="center" frameborder=0 marginheight="2">
    <ilayer src="http://yourdomain.com/yourpath/rss2html.php">
    </ilayer>
</iframe>

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.

Our site doesn't use this script anymore, we have our own custom scripts that reads blogger.com and imports all the data into a MySQL database. From there we use PHP to manipulate the blog. The reason we still use blogger.com is for the large amount of image storage space they allow for free. But the above script works great for a quick solution.

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&amp;v=2&amp;key=YOURSITEKEYGOESHERE"
      type="text/javascript"></script>
<script type="text/javascript">
    function load() {
      if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(37.4419, -122.1419), 13);
	  }
    </script>
</head>
<body onload="load()" onunload="GUnload()">
   <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

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.svsarana.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

NOTE: Recently Google changed their API. So if your old code just shows a street map centered on Mazatlan Mexico then you need this fix:
Change the parameter G_SATELLITE_TYPE to G_SATELLITE_MAP. All the code on our site now reflects this update, so you can download the code to look at the change for yourself.

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.svsarana.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.

If you like this tool and find it useful, feel free
to make a secure donation to help us keep on cruising!

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{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 Google 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"> 
         <p align="center"><br><br>Loading Google Map...</p>
        </div>
        </td>
        <td width = 20 valign="top" style="text-decoration: underline; color: #4444ff;">
        <div id="sidebar" style="width: 111px; height: 23px">
        <p align="center"></p><
        </div>
        </td></tr>
    </table>
</div>

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 Mazatlan 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}

How to put a Google Map on blogger.com! (Now using API V3)

To put a Google Map on blogger.com all you need is to modify the HTML of your template. Once you've modified your template any post you make to blogger.com with the following location strings will appear on your map:

{GMST}23|16.265|N|106|27.255|W|Waiting out the hurricanes!|Marina{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 FREE! If you would like to see an example of the Google Map in action see Nakia's Website.

Follow these steps:

Right click and SAVE this text file to your desktop. Then open it with notepad
Then open your template and edit the HTML in blogger.com (it's a good idea to copy and paste the text from your template and save it as backup now) and scroll down to where you see </head>. Make sure it says exactly </head> (NOT <head>!) and insert all the text from Step 1 BEFORE the </head> line.
Now right click and SAVE this text file to your desktop again. Now open it with notepad and copy and paste it into your template right AFTER the two lines that look like this:

<div id="main"><div id="main2">

And right BEFORE the <Blogger> statement in the template. NOTE: for newer blogger templates put this block of html BEFORE the line that looks like this:
<b:section class='main' id='main' showaddelement='no'>
As a last step change the <body> to <body onload="start_map()">
NOTE: Newer blogger templates will look more like this: <body expr:class='"loading" + data:blog.mobileClass' onload='start_map()'>
Now save your template and view your blog.
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 posts, it uses Mazatlan 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}
Did you get lost along the way? Here's a full template example to look at how it is done.

Do You Have Suggestions?