« Google Maps, User Training? | Home | Real Estate online lead generation - Google »
Google Maps….Global Ajax Radio Buttons
By klard | August 25, 2006
I spent the better part of a day trying to figure out how to get a few radio buttons representing some limits on rent prices to integrate with my google maps code. It turns out I was over-thinking it. I got the impression from reading a ton of infomation that I needed to set up an event listener inside the onload to listen for the radio button click. As it turns out all I really needed was to listen for a global event. I am inserting the code…without once again doing a good job of linking back to where I found it. The original code that I modified for both the java script and the html was found here. I have some notes at my office and will be able to clean that up later. Here is the code.
The html code that adds the radio buttons and calls the javascript:
<form method="get">
<p align="left">Rent Less Than</p>
<ul class="formlist">
<li class="rent"><label><input type="radio" value="1000" name="radios" />
onclick="return radioClick (event)" /> $1000</label></li>
<li class="rent"><label><input type="radio" value="1500" name="radios" />
onclick="return radioClick (event)" /> $1500</label></li>
<li class="rent"><label><input type="radio" value="2000" name="radios" />
onclick="return radioClick (event)" /> $2000</label></li>
<li class="rent"><label><input type="radio" value="100000" name="radios" />
onclick="return radioClick (event)" /> Any</label></li>
</ul>
<input type="hidden" disabled="disabled" size="10" class="notify" name="notify" id="notify" />
</form>
And the javascript that handles the event (reminder this is placed outside the onload function)
function radioClick(e) {
var obj = eventTrigger (e);
var notify = document.getElementById &&
document.getElementById ('notify');
if (notify)
rent = obj.value;
getMarkers();
return true;
}
function eventTrigger (e) {
if (! e)
e = event;
return e.target || e.srcElement;
}
After that it is just a matter of adding the rent number back to the query and adding thatas part of the mysql query.
You can see all the code by going to Orlando Rentals and viewing the source.
Topics: Google Maps Mashup, Web Design |
August 28th, 2006 at 11:58 am
The only problem is I see is that you’re using id=”button” multiple times in the same page. The ‘id’ tag should always be unique for a page.
August 28th, 2006 at 4:20 pm
Good point. I removed all the id=”button” tags as I wasn’t using them for anything anyway.