You are here: Home / Blogging / The Trick To Adding Local Search To Your Website or Blog
post

The Trick To Adding Local Search To Your Website or Blog

By: Reggie · Posted on May 4, 2008 · 10 Comments

Last week I talked about how mapping can help market your sales history (or any data for the matter) on your website or blog using Google Maps. This week I will use maps to showcase local attractions for home seekers on your website. As you know, many buyers care just as much about the neighborhood /community as the home itself! Why not add a page to your website or blog that facilitates buyer neighborhood research without leaving your site. Search ideas are limitless, but to start buyers could search local shopping, restaurants, parks, schools, recreation centers etc.

To accomplish my goal, I will cover two different methods. The first method will be for real estate agents using WordPress, and the second method is for all other platforms or traditional Websites.

For both examples you will need a Google Maps API key. If you do not already have an API Key for your domain, get started here before continuing.

METHOD 1: WordPress Users – Google Maps Plugin For WordPress

You are lucky; this is going to be an easy task. Matt Bercon has built a very slick WordPress Plug-In for adding maps to your blog with local search. Start by downloading the plug-in here. If you need instructions on adding a plug-In to your blog read this. Once you’ve activated the Google Maps plug-In for WordPress, go to Settings then click WP Google Maps. You’ll see where you can insert the Google API key you acquired earlier. Also setup various aspects of the map(s) properties such as neighborhood or city, zoom level, map style, and whether or not to include local search.

If you’ll be including more than one map on your blog, this plug-in will allow you to override the global settings by including any settings you want changed. For example in your post you could include:

[wp-google-maps lat= 37.75999,lon-122.40091,zoom=12,width=450,height=350, zoomcontrol=small,map=true,sat=true,hyb=true,ter=false,searchbox=true]

METHOD 2: Other Platforms or Traditional Websites

OK, this method is pretty easy too! All because of Google’s powerful mapping technology, and their wonderful examples.  Many of which would be valuable on a real estate Website. The map I’m highlighting here includes local search and street view. (Street View although amazing, is not available in all areas.)  All the same ideas mentioned above would apply here. If this is the type of interface you would like to add to your real estate website, follow these steps:

1.) Start by copying the following code into the head of your webpage. Between the <head> and </head>. Also add your API Key we it says REPLACE THIS TEXT WITH API KEY

<script type=”text/javascript” src=”http://maps.google.com/maps?file=api&&v=2.x&key=REPLACE THIS TEXT WITH API KEY”></script>
<script type=”text/javascript”>
//<![CDATA[

var map;
var start;
var panorama;
var markers;
var currentMarkerNum;
var client;

function load() {
if (GBrowserIsCompatible()) {
var opts = { onMarkersSetCallback: processMarkers, resultList : G_GOOGLEBAR_RESULT_LIST_SUPPRESS, showOnLoad: true};
map = new GMap2(document.getElementById("map"), {googleBarOptions: opts});
start = new GLatLng(37.759994, -122.400913);
map.setCenter(start, 13);
map.enableGoogleBar();
map.addControl(new GSmallMapControl());
map.addOverlay(new GStreetviewOverlay());
client = new GStreetviewClient();
}
}

function processMarkers(m) {
markers = m;
for (var i = 0; i < markers.length; i++) {
addListener(markers[i].marker);
}
showPanoramaForMarker(markers[0].marker);
}

function addListener(marker) {
GEvent.addListener(marker, ‘click’, function() {
showPanoramaForMarker(marker);
});
}

function showPanoramaForMarker(marker) {
if (!panorama) {
panorama = new GStreetviewPanorama(document.getElementById(“pano”));
}
client.getNearestPanorama(marker.getLatLng(), onResponse);
}

function onResponse(response) {
if (response.code != 200) {
alert(‘No nearby panorama. Try new search or location.’);
} else if (response.code == 200) {
var latlng = new GLatLng(response.Location.lat, response.Location.lng);
panorama.setLocationAndPOV(latlng);
}
}
</script>

NOTE: You can use this tool to pinpoint the latitude and longitude of your neighborhood. Once you have those numbers, look for the following line in the script above:
start = new GLatLng(37.759994, -122.400913);

Replace 37.759994 with your latitude & -122.400913 with your longitude.

2.) Then look for

<body>

and replace with

<body onload=”load()” onunload=”GUnload()”>

3.) Add the following where you want the local search map and street view to show up.  Change the width and height as needed.

<div id=”map” style=”width: 500px; height: 350px”></div>
<div id=”pano” style=”width: 500px; height: 300px”></div>

Congratulations! If everything went as planned you have local search and mapping on your website. Let me know how these maps have been applied on your site.

About Reggie

Reggie Nicolay is founder of the real estate technology blog MyTechOpinion.com, and is the Vice President of Marketing and Social Media for the Realtors Property Resource “RPR”, a property database for REALTORS®. Reggie was named one of the 100 Most Influential Leaders in Real Estate for 2010 by Inman News.