Google MapSearch Widget
Google Map Search is an embedded AJAX version of Google Maps that can be searched without ever leaving the webpage.
Based on the Map Search template code for Typepad from Mark Lucovsky and the Hello World skeleton widget from Kaf Ive managed to put together a Google Map Search widget for Wordpress.
As this is fresh of the press so to speak, it includes enough default widget options (I hope!) to get a working Google Map Search integrated into your sidebar.
download the google mapsearch widget here
How to Install:
Assuming you already have widget supported wordpress theme (there’s a list of them here), and the widget plugin (download here) already installed.
1. Get a Google Ajax Serarch API key.
Goto code.google.com , register your site for Google Ajax Search and generate an API key.
Save the generated key somewhere for later.
2. Download & install and activate the Google MapSearch widget.
3. In the Wordpress Admin, goto Presentation/Sidebar Widgets, and Drag n’ Drop the Google MapSearch widget onto the AJAX sidebar.
4. Open Up the widget options, enter you API key into the Google API key textbox and save changes.
All the other parameters in the widget options have been set to default values which you can change later.
5. View you site and you should see the Google Map Search widget in the sidebar.
Map Search Widget Configuration:
Google Map Width:
The chances are your sidebar won’t have the same width as the widget default setting (240px) so you’ll probably have to set this manually.
There are a few limits though. Google state that none of the text displayed on the map should be truncated so I’d say the smallest width is about 220px, and if you want to use Map Controls then for the map to display without truncation its at least 260px. When entering the width only enter the numerical value (e.g. 200, not 200px)
Google Map Height:
As the height of the widget doesn’t seem to have any major impact on the sidebar layout (my experience anyway) is a purely personal choice and you can set it to whatever takes your fancy. I’ve defaulted the value to 400px but its really up to yourself.
Google API Key:
You should have this already set from the install. If not you’ll have a nice little box where the widget should be telling you where to find an API key.
If you have entered the API incorrectly a popup will appear from Google telling you roughly the same thing.
Set Google Map Zoom Level:
This parameter sets the default ZOOM level for the Map.
Experiment around with this a bit until you get the right initial distance for the map to display when the page loads.
The values run from +3 (close up) to -9 (far away) . The default is set to -3.
I’m not sure exactly what the full range is but when I get round to finding out I’ll update the widget.
Widget Title:
This is the text which appears above the Widget, default is set to blank but you can set it to whatever text you like.
Initial Map Location:
The Initial Map Location option sets primary location of the map when the user loads the page.
To set this value just enter the exact same string you would use to find the location in google maps.
e.g. If you wanted Dublin City in Ireland to be the primary location set the option to Dublin, Ireland.
Whatever string you use to find a place in the map search box that’s the string to use.
I’ve set the default to Barcelona, Spain purely because its a lovely place.
Initial Map Location Title:
This is the text that is displayed on the initial location marker within the map.
It describes the current location. You should be able to set this text to whatever you like.
Initial Map Location URL:
This is the URL for initial location marker, displayed just below the location title.
You only need to set the URL (don’t need to use http://).
e.g. www.waxbrush.com/widgets
Enable Google Map Controls:
This option selects whether or not you want to have the Google Map Controls on the Map.
The Controls let you select either to have satellite, map or hybrid display options.
This takes up a little more width on the screen than just the map alone so change the width to match the controls to avoid truncation.
That’s about it really….
There’s still quite a lot of functionality I’ve yet to add (such as hotspots) whenever I get the chance, but hopefully I’ll be able to get a standard plugin version out this week sometime.
Don’t forget if you do change the width make sure that the sidebar width is at least the width of the map.
You may have to adjust your style.css file for the content and width areas to match.
As this widget has so far been tested by a force of one (myself) and only on Wordpress 2.0.4,
so if you do install the widget please let me know how you get on.
For more info check out the Google AJAX apisearch blog article on Map Searches here.