RSS« Featured Homes Using NextGen Gallery | Main | Blog Themes Coming Back Soon »
Integrating 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 |