leto.net/code: Geopress with Google Local Search

blog
code
freebsd
gitweb
math
pics
travel
writing

So you want to add those nifty search boxes to the google maps on your
Wordpress blog (like on www.ucfmap.com) how do you do it?

Geopress uses the javascript library Mapstraction, which puts a
layer of abtraction between Geopress and the actual map code. It has support
for many different mapping technologies, but basically it can only implement
the intersection of their features. Since local search is not available for all
mapping services, Mapstraction currently does not support it, but it only takes
about five lines to slap it on there, in a non-abtract way that is.

To get localsearch working with Geopress, you need to manually edit two
files which live in wp-content/plugins/geopress . The first is
mapstraction.js, near line 185 ( all line numbers here refer to Geopress v2.3) you should see

case 'google':

if (GMap2) {

if (GBrowserIsCompatible()) {

this.map = new GMap2(c);

Directly after that last line, insert the following:

var options = { suppressInitialResultSelection : true,  searchFormHint : "this is the search hint" };

searchControl = new google.maps.LocalSearch(options);    this.map.addControl(searchControl);

You are half way there! Note that I have also chosen the option not to select the first result of the LocalSearch list and I have provided a search hint that will show up in the search box before it is clicked on.
Now we need to edit a few lines in geopress.php. At line 1040 you should see

if($google_apikey != "") { $scripts .= "n".'<script type="text/javascript" />'; } $plugindir = get_bloginfo('wpurl') . "/wp-content/plugins/geopress"; $scripts .= "\n".'<script type="text/javascript" src="'.$plugindir.'/mapstraction.js"></script>'; $scripts .= "\n".'<script type="text/javascript" src="'.$plugindir.'/geopress.js"></script>';

Add this directly below those lines:

// add Google Local Search $scripts .= "\n".'<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>'; $scripts .= "\n".'<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key='.$google_apikey.'"type="text/javascript"></script> <style type="text/css"> @import url("http://www.google.com/uds/css/gsearch.css"); @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css"); #map { border : 1px solid #979797; width : 400px; height : 400px; } #map .gmls { width : 100px; } </style> ';

You should be ready to go!

Jonathan Leto - jonathan at leto dot net

Generated Monday 06th of October 2008 07:31:37 AM