Dynamic Tag | Jacob Emerick's Blog

Google Static Map API Introduction

On several of my previous blog posts I ran into the need to show something on a map. While Google Maps was the initial idea to implement, all I wanted was a single image with a few lines or markers. Embedding a map seemed a bit much for this simple task. My second idea was taking screen shots of a Google Map with the lines/markers displayed, which is probably copyright infringement. This last idea led me to my solution: Google's Static Map API.

I've worked quite a bit with Google Maps in the past and really enjoy their API. It's easy and fun to work with, and the end result is simply amazing. The Static Map API, while being more restrictive in features, is no different.

The first step is signing up for an API key on Google's Site. This key is tied directly to the domain that your project is on, so you'll probably end up creating a few keys. After this is done, you can embed an image on your site just like any other image.

<img src="http://maps.google.com/maps/api/staticmap?
size=500x375&
key=ABQIAAAAveiUK_AIS-m9Su-mKaTx2xTetCaTViHJ4OW2Yk9IU5rIYYQMAxQYRksvMBCFuDLcQvbqJSrKpCR_Ew&
sensor=false" alt="Simple Image" height="375" width="500" />

This image...

• Tags:
• dynamic
• google api

Style Switcher Part B

This post assumes some intermediate understanding of Javascript, stylesheets, and cookies. It will show you how to use cookies with a style switcher to remember a user's preference and load it with their (many) return visits.

In the previous post, I explained a method for allowing users to switch between different stylesheets on your website. However, after they leave your website, there's no way for your site to remember them or which style they preferred. If they liked the 'yellow' stylesheet, they would have to click it each and every time they visited your website. The best way to avoid this problem is to set a cookie when they choose a style, then read the cookie on their return to display the preferred stylesheet.

You can create your cookie as soon as the user clicks on a style, but you'll end up overwriting the cookie several times if the user clicks multiple styles (to check out the different options). A better method is to remember the last style they view before they leave the page.

• Tags:
• cookies
• dynamic
• javascript
• css

Style Switcher Part A

This post assumes some intermediate understanding of Javascript and stylesheets. It will show you how to setup a Javascript-powered styleswitcher that works for individual pages.

One of the huge benefits that CSS, or Cascading Style Sheets, brought to web design was the ability to easily change an entire website's design and layout. Since CSS allows a separation of content and layout, a single style sheet can control all of the pages of a website. Some extra markup in the HTML may be needed for specific layout requirements, but colors, font-size, and normal layout options can be easily modified with a few lines.

This brings up an interesting opportunity: multiple stylesheets for a web site. These different stylesheets can have simple changes: a main one containing layout and general styles with several optional sheets with color information. By attaching the stylesheets to the document with the alternate tag, some browsers will allow users to switch between the sheets under their 'View' menu.

• Tags:
• dynamic
• javascript
• css