This software will let you easily render Google Maps anywhere on your blog as a web service. It also includes code for easy integration with WordPress blogs, but what the code does best can actually be used with any other blog system or plain web page. This plugin will let you easily create from simple maps with one marker and a text balloon, to complex multimarker maps with hypertext balloons as this page.

Installation on WordPress Blogs

Install it as any other plugin (unziping plugin files under [WORDPRESS_ROOT]/wp-content/plugins directory and activate it in WP Plugins admin tool). Then go to the Google Maps API key signup page, get an API key for your website, and install it in the plugin's admin page under Options.

Google Maps WP admin page

Creating Simple Maps

This is the easy part.

Go to Google Maps, find the spot you want to show, select Map, Satelite or Hybrid view buttons, use zoom, and double-click on the most important point on the map to centralized it.
On the left-top corner of the map, click on the "Link to this page" link, and copy your browser's location to the clipboard.
While creating the post, select the text that will be displayed on the map marker, and create a link with it.
Paste the map URL on the Link URL field, and on Title write "googlemap".
Continue editing your post and publish.

You are done. This example will render a map like this (don't forget to click on the marker to see the balloon):

This will be a map's marker text with an image.

Passing Parameters

You may have noticed that on the Title field above we used other commands. In fact you can use the following switches, separated by ";" to control the way the map will appear in your site.

googlemap: Instructs the plugin to transform this link into a Google Map area. If not used, the plugin will not work on the link and you'll get a plain link to the Google Maps site.
nocontrol or nocontrols: Renders a map without the zoom and scale controls
nomarker or nomarkers: Renders a map without the marker with the information baloon.
w:SIZE_IN_PIXELS and h:SIZE_IN_PIXELS: Defines the size of the map area in pixels.
w:PERCENT% and h:PERCENT%: Defines the size of the map area relative to full width and height.

Since other plugins may use the title attribute, you can also put these commands in the rel attribute and activate this functionality in the plugin configuration dialog. Some examples for the Title (or rel) field:

googlemap: Renders a map with controls, marker an default sizes, as specified in the plugin's admin page, under WP Options.
googlemap;nocontrols;w:300;h:200: Renders a 300x200 map with marker but no zoom controls.
googlemap;nomarker;nocontrols;w:100;h:100: Renders a small 100x100 map without marker and zoom controls.
googlemap;nomarker;nocontrols;w:100%;h:300: Renders a maps that fills the full width available with a 300 pixels height, without markers and zoom controls.

Creating Complex Maps

This procedure requires some HTML knowledge, but will let you create maps with multiple markers, and results as good as on this post. The proccess consists of creating a definition list (<dl> XHTML element) of a center point and markers with their text balloons. Learn by example. Pay attention to the following complex map, and select all its markers to see the text inside their balloons:

Center of map
map: Center of São Paulo
map: Flea market
map: Traditional market
balloonless marker
map: Japanese town

It was generated by this (X)HTML code:

<dl title="googlemap;w:100%;h:400">
	<dt><a href="http://maps.google.com/?z=15&ll=-23.550887,-46.631985&om=1">Center of map</a></dt>

	<dt><a href="http://maps.google.com/?ll=-23.550592,-46.633122">map</a></dt>
	<dd><strong>Center of São Paulo</strong></dd>

	<dt><a href="http://maps.google.com/?ll=-23.547563,-46.631041">map</a></dt>
	<dd>Flea market</dd>

	<dt><a href="http://maps.google.com/?ll=-23.54535,-46.627693" title="marker">map</a></dt>
	<dd>Traditional market</dd>

	<dt><a href="http://maps.google.com/?ll=-23.54715,-46.637263">balloonless marker</a></dt>

	<dt><a href="http://maps.google.com/?ll=-23.555195,-46.635547" title="marker">map</a></dt>
	<dd>Japanese town</dd>
</dl>

So the structure must folow these rules:

Create a definition list (<dl>) and put map-related commands and parameters on title= attribute as specified above.
First definition term (<dt>, first green line) must contain only a link to Google Maps site, to define its center and other map parameters. The text for the link is ignored when a map is generated, so use a text like "Center of Map" so people accessing your posts outside your blog (for exemple, through feed readers) will have a clue what is this link for.
The rest is a pair of terms and definitions (<dt> and <dd>) with the marker position (as a Google Maps URL) and the text on the balloon respectivelly.
You can create a balloonless markers specifying only a <dt> without a <dd>.
Whatever you put inside the <dd> block will appear inside the balloon. Put links, images, lists, tables, etc.

Positioning and Style Possibilities

To have better control over the map positioning and overall look, you can manually edit the HTML code while posting, including style and class attributes. Find the <a> or <dl> tag for your link and use this examples to get some clues:

<a style="float:left; width:300px; height:300px;" title="googlemap" ... Renders a 300x300 map floating on left of the paragraph. See example.
<a class="photo" style="float:right;" title="googlemap" ... Renders a map with default dimensions floating on the right of the paragraph, with style class photo, that in my theme defines some margins and borders.
<dl style="visibility: hidden;" title="googlemap" ... Using style="visibility: hidden" will make the browser hide the map definititon text while loading the page. Seconds later, when the plugin renders the maps on your page, the hidden blocks will finaly appear as maps.

The HTML attributes id=, style= and class= you specify will be inherited by the generated map. In addition, a CSS class called map will be added to all maps, and to all balloons a CSS class named balloon will be assigned. This way you can define your own style for these elements.

No WordPress ?

If you use other blogging systems, or just want a simple way to create maps on your pages you can still take advantage of this plugin. Download the plugin, unzip, install its content somewhere on your server accessible from the web. Then edit the HTML source of the pages you want to render maps, find the <head> block, and include the following code inside of it:

<!-- Google Maps Plugin (begin) -->
<!-- http://avi.alkalay.net/2006/11/google-maps-plugin-for-wordpress.html -->

<!-- Google Maps API -->
<script src="http://maps.google.com/maps?file=api&v=2&key=MY_API_KEY" type="text/javascript">
</script>

<!-- Google Maps Plugin for WordPress logic -->
<script src="http://my.site.com/path/to/plugin/googlemapsPlugin.js" type="text/javascript"></script>

<!-- Google Maps Plugin for WordPress initialization -->
<script type="text/javascript">
	//<![CDATA[

	MapPluginInit(
		/* Default maps width  */          500,
		/* Default maps height */          300,
		/* Use rel instad of title? */     false);
	//]]>
</script>

<!-- Google Maps Plugin (end) -->

Change the red parts to fit your needs. Every page containing the above block will be able to render simple and complex maps as described.

About

This plugin was inspired on Macdiggs Google Maps plugin, but was completely redesigned, rewritten and made more user friendly, has cleaner code and is more standards oriented. The former Macdiggs' plugin will not receive updates anymore so this is the plugin you should be using.