RSSIntegrating Google Maps to Advertise Listings
By Ryan Ward | October 15, 2008
I’ve been usig some custom Google maps on my website for some time for a standard IDX map search, but, I have found that they can easily be used to integrate an easy to use Open house tool. Here is how I have it implemented to advertise Atlanta open houses on a page of my website:
Here is the code:
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Atlanta Open Houses</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAkGkNKtD-s2q61G6j_APHThQeHGlUq97mBStWwakmxOCYH8eSjhQqcJByc20fLPliGoyayjJT8Ly29A"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 500px; height: 450px"></div>
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
<script type="text/javascript">
//<![CDATA[
// Create our "tiny" marker icon
var startList=function(){
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "http://www.ryanwardrealestate.com/images/house.png";
blueIcon.shadow = 'http://www.ryanwardrealestate.com/images/shadow.png';
blueIcon.iconSize = new GSize(28, 36);
blueIcon.shadowSize = new GSize(60, 30);
// Set up our GMarkerOptions objectmarkerOptions = { icon:blueIcon };
function createMarker(point,html) {
var marker = new GMarker(point, {icon: blueIcon});
// The new marker "mouseover" listener
GEvent.addListener(marker,"mouseover", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(34.085365,-84.297581),12);
// Create the location of each house with lat/long as well as the information to be displayed in the info window
var point = new GLatLng(34.092562,-84.361417);
var marker = createMarker(point,'<table><tr><td><img src="http://www.realestatetestblog.com/wp-content/gallery/open-houses/12695-new-providence.JPG" height="80" width="100"/></td><td>12695 New Providence<br />$369,000 - Sunday<br /> October 19th,<br /> 2 p.m to 4 p.m.</td></tr></table>')
map.addOverlay(marker);
var point = new GLatLng(34.11136,-84.264235);
var marker = createMarker(point,'<table><tr><td><img src="http://www.realestatetestblog.com/wp-content/gallery/open-houses/600-alstonefield.JPG" height="80" width="100"/></td><td>600 Alstonefield Dr<br />$239,900 - Sunday<br /> October 19th,<br /> 2 p.m to 4 p.m.<br /><a href="http://600alstonefield.homesinmiltonga.com/" target="blank"/>View Details</a></td></tr></table>')
map.addOverlay(marker);
}
}
load();
}
window.onload=startList;
//]]>
</script>
</body>
</html>If you have any questions about how to implement this, just reply in the comments, but, make sure that you have a Google maps API key or you won’t get anywhere.
Category: Marketing | No Comments »
