Buy now and get:

90 days Free Support
90 days Money Back Guarantee
100% Rebrandable
10% off at Template Monster

Easily add and update realty listings on your website

Price:	~~$299.96~~ $199.96 (ends October 23rd)

Includes:	Version 2.52, free support, free upgrades for 90 days, and our 90-day, unconditional money back guarantee.

Create Your Own Realty Manager Demo
Find out for yourself why thousands of people from all over the world use Realty Manager to update their real estate listings. Get started now with your very own 30-day demo.

Try an online demo >>

Realty Manager Tutorial: Display full listings with Google Maps

size="1" noshade="noshade" color="CC0000" align="left"> Update: Added error checking into the template javascript code so that listings without longitude and langitude entered will not generate an error. size="1" noshade="noshade" color="CC0000" align="left">
This tutorial outlines setting up a Google Map with all of your property listings represented by markers in the map. You can this in action in this example: Listings Map View example

Let us know if you need assistance setting this up. You can post to the forum or fill out a support request, or even give us a call.

Note: If you want to simply link to a Google Map of a single property from the individual listing detail pages (similar to the Yahoo Maps links in the default templates), refer to this forum post:

/iforum/_P42271

We also offer a Priority Consulting service if you would prefer for us to setup a Google Map to display all your listings. To inquire, send us an email or call 1-800-752-0455.

1. XHTML strict and iframes

Copy the code below and save it as _google_map.html. Before uploading it into your template directory, there are a couple key areas in this template that you'll want to adjust for your own websites (see the following steps).

_google_map.html template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

.bubble_text{

font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px; 
	color: #656565;
	white-space:pre;
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->

</style>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<base target="_top">
<body>

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

// Set the center point of your map and set the zoom
// use http://mapki.com/index.php?title=Get_Lon_Lat to get a center point
map.centerAndZoom(new GPoint(-123.07159423828125,49.19067925930702), 8);

</script>

</div>
		</body>
</html>

<script>
//----------------------------------------------------------------------------

// Grab the longitude and latitude for this listing
	var longitude = getLongitude();
	var latitude = getLatitude();

// these two functions are used so that listings with no coordinates don't break the map :).
function getLongitude()
{
	return $lfield8_je$;
}

function getLatitude()
{

return $lfield9_je$;
}

// Create a marker whose info window displays the given number.
function createMarker(point, html) {
  var marker = new GMarker(point);

// Show this marker's index in the info window when it is clicked.
  var output = html;
  GEvent.addListener(marker, 'click', function() {

marker.openInfoWindowHtml(output);
  });

return marker;
}

// the variable html is what will actually appear in the popup bubble.  Make sure that any HTML you use here is XHTML strict
	var html = "<div class='bubble_text'><table valign='top'><tr><td><img src='$listing_url$/images/$thumbnail$' width='$thumbnail_width$'></td><td valign='top' style='padding-top: 5px;'> <b>$lfield3$</b> - $lfield2$<br/> $lfield10$<br/><br/><a href='$listing_url$/$listing_file$'>More Details</a></td></tr></table></div>";

if (longitude && latitude)
{

// the variable point is the longitude and latitude value of a listing.  In this example, it is being passed from lfield8 and lfield9.  You can use whatever fields you like though.
 var point = new GPoint(longitude,latitude);
  var marker = createMarker(point, html);
  map.addOverlay(marker);
}

//----------------------------------------------------------------------------
  	</script>

// Grab the longitude and latitude for this listing
	var longitude = getLongitude();
	var latitude = getLatitude();

// these two functions are used so that listings with no coordinates don't break the map :).
function getLongitude()
{
	return $lfield8_je$;
}

function getLatitude()
{

return $lfield9_je$;
}

// Create a marker whose info window displays the given number.
function createMarker(point, html) {
  var marker = new GMarker(point);

// Show this marker's index in the info window when it is clicked.
  var output = html;
  GEvent.addListener(marker, 'click', function() {

marker.openInfoWindowHtml(output);
  });

return marker;
}

if (longitude && latitude)
{

//----------------------------------------------------------------------------
  	</script>

<script>
//----------------------------------------------------------------------------

// Grab the longitude and latitude for this listing
	var longitude = getLongitude();
	var latitude = getLatitude();

// these two functions are used so that listings with no coordinates don't break the map :).
function getLongitude()
{
	return $lfield8_je$;
}

function getLatitude()
{

return $lfield9_je$;
}

// Create a marker whose info window displays the given number.
function createMarker(point, html) {
  var marker = new GMarker(point);

// Show this marker's index in the info window when it is clicked.
  var output = html;
  GEvent.addListener(marker, 'click', function() {

marker.openInfoWindowHtml(output);
  });

return marker;
}

// the variable html is what will actually appear in the popup bubble.  Make sure that any HTML you use here is XHTML strict
	var html = "<div class='bubble_text'><table valign='top'><tr><td valign='top' style='padding-top: 5px;'> <b>$lfield3$</b> - $lfield2$<br/> $lfield10$<br/><br/><a href='$listing_url$/$listing_file$'>More Details</a></td></tr></table></div>";

if (longitude && latitude)
{

//----------------------------------------------------------------------------
  	</script>

<script>
//----------------------------------------------------------------------------

// Grab the longitude and latitude for this listing
	var longitude = getLongitude();
	var latitude = getLatitude();

// these two functions are used so that listings with no coordinates don't break the map :).
function getLongitude()
{
	return $lfield8_je$;
}

function getLatitude()
{

return $lfield9_je$;
}

// Create a marker whose info window displays the given number.
function createMarker(point, html) {
  var marker = new GMarker(point);

// Show this marker's index in the info window when it is clicked.
  var output = html;
  GEvent.addListener(marker, 'click', function() {

marker.openInfoWindowHtml(output);
  });

return marker;
}

// the variable html is what will actually appear in the popup bubble.  Make sure that any HTML you use here is XHTML strict
		var html = "<div class='bubble_text'><table valign='top'><tr><td valign='top' style='padding-top: 5px;'> <b>$lfield3$</b> - $lfield2$<br/> $lfield10$<br/><br/><a href='$listing_url$/$listing_file$'>More Details</a></td></tr></table></div>";

if (longitude && latitude)
{

//----------------------------------------------------------------------------
  	</script>

2. Google Maps API Key

The API key is a unique number generated specifically for your website. You can generate your own API key here:

http://maps.google.com/apis/maps/signup.html

Once you've generated it, you'll need to paste your key into line 6 of the sample template:

3. Map Centering and Zoom

Line 46 of the template tells the map to center on a specific point in the world. You specify that point using longitude and latitude coordinates and then tell it a zoom level. In the example you'll see this:

map.centerAndZoom(new GPoint(-123.07159423828125,49.19067925930702), 8);

-123.07159423828125 is the longitude
49.19067925930702 is the latitude

The best way to find the longitude and latitude for your desired center point is using the utility in the web page below (just click a point on the map and its coordinates appear at the bottom):

http://mapki.com/index.php?title=Get_Lon_Lat

Once you have those coordinates, you'll need to experiment with the zoom level to find something that suits your listings - the appropriate level depends on how wide an area your listings are in.

4. Template Cells - popup bubbles

Each "templatecell" in the example has a line that starts with "var html". This controls the content that appears in the info bubble that appears above each listing on the map. There are two very important things to note:

a) the content here also needs to be XHTML strict
b) the scripting is within double quotes, so quotes used here must be single quotes

In the example, the preview image (when there is one available), the price ($lfield3$), the address ($lfield2$) and a brief comment ($lfield10$) are being passed to the popup bubble. One thing to keep in mind here is that any text you use isn't going to wrap to the next line automatically. You'll need to use <br/> and <p/> tags. You can use any field in here you like but just remember the two points mentioned above.

After you have finished modifying the template, upload it into your Listings Manager template directory.

5. Template Cells - longitudes and latitudes for each home

Similar to the "center and zoom" line you looked at in step 3, the coordinates of each house on your map are done with longitude ($lfield8$) and latitude ($lfield9$). These two fields should be configured in Listings Manager to store the coordinates (if you use different field numbers than 8 and 9, modify the _google_map.html template to reflect your alternative field numbers).

To set these up:

Logon to Listings Manager and go to Setup Options : General.
Click the Setup button beside Setup Listings Fields to go to the field editor.
Enable a "display only" field with a link for one of the geocoder sites. Enter the code below as the "field name":

Field code for US Addresses:
Find coordinates: <a href="http://rpc.geocoder.us/demo.cgi">http://rpc.geocoder.us/demo.cgi</a>

Field code for Canadian Addresses:
Find coordinates: <a href="http://geocoder.ca/">http://geocoder.ca/</a>
Enable two new text fields (preferably 8 and 9) - one for Longitude and one for Latitude.
Sort the new Display field just above the two new coordinate fields.
If necessary, update the _google_map.html template so that occurances $lfield8$ and $lfield9$ reflect the field numbers you've used for Longitude and Latitude.

To appear in the map, a listing will need the Longitude and Latitude values. Listings without coordinates simply won't show up.

When adding coordinates to a listing, the fields will look something like this:

Find coordinates: http://rpc.geocoder.us/demo.cgi
Longitude:
Latitude:

6. Search Query to dynamically create your listings map

As the last step, add an iframe (with a search query using the _google_map.html template) to the pages that you want to display the map in. For example, you could put it somewhere in your Listings Index template, or even on a web page outside of Realty Manager.

Here is an example of the iframe code to use (update the code with your path to search.cgi):

And that's about it. By using the _google_map.html template shown above, the map will be dynamically updated as listings are added or removed.

For all the advanced users out there, Google has an excellent resource for the Google Maps API site. It has tones of examples and the discussion groups have some amazing add-ons you may want to try out:

http://maps.google.com/apis/maps/

Have a go at it and let us know what you all think. We are here to help too so feel free to send in any questions you have about this. We also offer a Priority Consulting service if you would prefer for us to get the map setup for you. To inquire, send us an email or call 1-800-752-0455. size="1">

Did this "How to" make sense? Send us your feedback, or let us know if you're using something like this on your installation of Realty Manager and we'll link to it as an example.

More Information: Buy Now | Questions or Comments?