Hi, We are implementing a local search for top up locations (post office, retails stores etc.)
I've reappropriated someone's script (as it was the closest to our requirements - local search post back to same window) and I have a quick question regarding selectors. Currently the script uses dropdowns to differentiate between the store type, but the wish is to have these as radio buttons as we also have to use a streetmap search owing to the database of third party top up locations not having been made available to Google maps as yet. Do you know if it is possible to amend this script so as to use radio buttons rather than the select dropdown? I've given the radio buttons the same ID as select but it takes the first input regardless of selection?! Am I missing something glaringly obvious? Apologies if this is kid's stuff; it's my first foray into the world of Google Maps and my JavaScript knowledge is limited! Kind regards, Darren. <%@ Page Language="c#"%> <%@ Import Namespace="System.Web" %> <!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"; xml:lang="en" lang="en"> <head> <!-- <script type="text/c#" runat="server"> protected void Page_Load(object sender, EventArgs e) { Utility.StoreCode(); } </script> --> <title>Cashplus</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Language" content="en-GB" /> <meta name="copyright" content="All rights, including copyright, in the content of this website are reserved by APS Ltd." /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="css/navigation.css" /> <link rel="stylesheet" href="css/styles.css" type="text/css" /> <link rel="stylesheet" href="css/print.css" type="text/css" media="print" /> <link rel="stylesheet" href="css/store_locator.css" type="text/css" /> <link href="http://www.google.com/uds/css/gsearch.css"; rel="stylesheet" type="text/css"/> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery_print.js"></script> <script type="text/javascript" src="scripts/jqueryslidemenu.js"></ script> <script type="text/javascript" src="scripts/links.js"></script> <script type="text/javascript" src="scripts/z-index.js"></script> <script src="http://maps.google.com/maps? file=api&v=2&key=ABQIAAAAvpPROrX10uPlIRpz8RyStxTXwWDNRt1inUxffpprYQ_kYaD9HRThSeGizjan2qc0NXyCcE_10Jxdtg" type="text/javascript"></script> <script src="http://www.google.com/uds/api? file=uds.js&v=1.0&key=ABQIAAAAvpPROrX10uPlIRpz8RyStxTXwWDNRt1inUxffpprYQ_kYaD9HRThSeGizjan2qc0NXyCcE_10Jxdtg" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ // Our global state var gLocalSearch; var gMap; var gSelectedResults = []; var gCurrentResults = []; var gSearchForm; // Create our "tiny" marker icon var gSmallIcon = new GIcon(); gSmallIcon.image = "http://labs.google.com/ridefinder/images/ mm_20_yellow.png"; gSmallIcon.shadow = "http://labs.google.com/ridefinder/images/ mm_20_shadow.png"; gSmallIcon.iconSize = new GSize(12, 20); gSmallIcon.shadowSize = new GSize(22, 20); gSmallIcon.iconAnchor = new GPoint(6, 20); gSmallIcon.infoWindowAnchor = new GPoint(5, 1); // Set up the map and the local searcher. function OnLoad() { // Initialize the map gMap = new GMap(document.getElementById("map")); gMap.addControl(new GLargeMapControl()); gMap.addControl(new GMapTypeControl()); gMap.setCenter(new GLatLng(51.51809,-0.080423), 13); // Initialize the local searcher gLocalSearch = new GlocalSearch(); gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch); // Execute the initial search } function doSearch() { var post = document.getElementById("postInput").value; var cat = document.getElementById("catInput").value; gLocalSearch.setCenterPoint(post); gLocalSearch.execute(cat); } // Called when Local Search results are returned, we clear the old // results and load the new ones. function OnLocalSearch() { if (!gLocalSearch.results) return; var searchWell = document.getElementById("searchwell"); // Clear the map and the old search well searchWell.innerHTML = ""; for (var i = 0; i < gCurrentResults.length; i++) { if (!gCurrentResults[i].selected()) { gMap.removeOverlay(gCurrentResults[i].marker()); } } gCurrentResults = []; for (var i = 0; i < gLocalSearch.results.length; i++) { gCurrentResults.push(new LocalResult(gLocalSearch.results [i])); } var attribution = gLocalSearch.getAttribution(); if (attribution) { document.getElementById("searchwell").appendChild (attribution); } // move the map to the first result var first = gLocalSearch.results[0]; gMap.recenterOrPanToLatLng(new GPoint(parseFloat(first.lng), parseFloat(first.lat))); } // Cancel the form submission, executing an AJAX Search API search. function CaptureForm(searchForm) { gLocalSearch.execute(searchForm.input.value); return false; } // A class representing a single Local Search result returned by the // Google AJAX Search API. function LocalResult(result) { this.result_ = result; this.resultNode_ = this.unselectedHtml(); document.getElementById("searchwell").appendChild (this.resultNode_); gMap.addOverlay(this.marker(gSmallIcon)); } // Returns the GMap marker for this result, creating it with the given // icon if it has not already been created. LocalResult.prototype.marker = function(opt_icon) { if (this.marker_) return this.marker_; var marker = new GMarker(new GLatLng(parseFloat (this.result_.lat), parseFloat (this.result_.lng)), opt_icon); GEvent.bind(marker, "click", this, function() { marker.openInfoWindow(this.selected() ? this.selectedHtml() : this.unselectedHtml ()); }); this.marker_ = marker; return marker; } // "Saves" this result if it has not already been saved LocalResult.prototype.select = function() { if (!this.selected()) { this.selected_ = true; // Remove the old marker and add the new marker gMap.removeOverlay(this.marker()); this.marker_ = null; gMap.addOverlay(this.marker(G_DEFAULT_ICON)); // Add our result to the saved set document.getElementById("selected").appendChild (this.selectedHtml()); // Remove the old search result from the search well this.resultNode_.parentNode.removeChild(this.resultNode_); } } // Returns the HTML we display for a result before it has been "saved" LocalResult.prototype.unselectedHtml = function() { var container = document.createElement("div"); container.className = "unselected"; container.appendChild(this.result_.html.cloneNode(true)); var saveDiv = document.createElement("div"); saveDiv.className = "select"; saveDiv.innerHTML = "Save this location"; GEvent.bindDom(saveDiv, "click", this, function() { gMap.closeInfoWindow(); this.select(); gSelectedResults.push(this); }); container.appendChild(saveDiv); return container; } // Returns the HTML we display for a result after it has been "saved" LocalResult.prototype.selectedHtml = function() { return this.result_.html.cloneNode(true); } // Returns true if this result is currently "saved" LocalResult.prototype.selected = function() { return this.selected_; } GSearch.setOnLoadCallback(OnLoad); //]]> </script> <script type="text/javascript"> function validateForm(frm) { if (frm.code.value=="") { alert("Please enter your postcode"); frm.code.focus(); return false; } } function checktype(frm) { if (frm.ut1.value=="2") { frm.range.value="-5"; } if (frm.ut1.value!="2") { frm.range.value="30"; } } </script> <link rel="shortcut icon" href="/images/common/favicon.ico" /> </head> <body id="store_locator" onunload="GUnload()"> <!-- OUTER WRAPPER START --> <div id="OuterWrapper"> <!-- INNER WRAPPER START --> <!-- LOGO BAR START --> <!--#include file="includes/header.html" --> <!-- LOGO BAR END --> <!-- NAVIGATION START --> <!--#include file="includes/primary-navigation.html" --> <!-- NAVIGATION END --> <!-- BREADCRUMB START --> <!--#include file="includes/breadcrumb.html" --> <!-- BREADCRUMB END --> <!-- PRINT START --> <!--#include file="includes/print.html" --> <!-- PRINT END --> <!-- LEFT CONTENT START --> <div id="LeftContent"> <h1 class="banner_content"><img src="/images/banners/header_links/ store_locator.jpg" alt="Find your nearest top up branch" />Find your nearest top up branch</h1> <!-- HOMEPAGE CONTENT START --> <p class="intro"> Please enter your postcode, choose the type of top up location you require and click on ‘find’ </p> <div class="store_locator_forms"> <!-- E-PAY LOCATOR START --> <div id="epay_store_search"> <h3>E–Pay Stores</h3> <form id="frmSearch" action="http://www.streetmap.co.uk/sl/ Cashplus.srf?" onsubmit="return validateForm(this);"> <fieldset> <input type="hidden" name="view" value="5"/> <input type="hidden" name="id" value="Cashplus" /> <input type="hidden" name="maxr" value="20" /> <input type="hidden" name="range" value="30" /> <input type="hidden" name="mr" value="5" /> <input type="hidden" name="dates" value="1" /> <input class="searchField" name="code" type="text" value="Postcode" onblur="if (this.value == '') {this.value = 'Postcode';}" onfocus="if (this.value == 'Postcode') {this.value = '';}" /> <select name="ut1" onchange="checktype(this.form);"> <option value="1" selected="selected">retail outlet</option> <option value="2">e-pay outlet</option> </select> <input name="nearest-outlet" type="submit" value="Find" /> </fieldset> </form> </div> <!-- E-PAY LOCATOR END --> <div id="search"> <div id="searchform"> <h3>Post Office and Moneyshop Stores</h3> <fieldset> <input type="text" id="postInput" value="Postcode" onblur="if (this.value == '') {this.value = 'Postcode';}" onfocus="if (this.value == 'Postcode') {this.value = '';}" /> <select id="catInput"> <option value="Post Office">Post Office</option> <option value="Moneyshop">Moneyshop</option> </select> <input type="button" value="Find" id="btn_google" onclick="doSearch()"/> </fieldset> </div> </div> <div class="clear"> </div> </div> <div id="placelist"> <div id="results"> <div id="searchwell"></div> </div> <div id="map"></div> <div id="selected"></div> </div> <!-- HOMEPAGE CONTENT END --> <div class="clear"></div> </div> <!-- LEFT CONTENT END --> <!-- RIGHT CONTENT START --> <div id="RightContent"> <!-- BOX APPLY START --> <!--#include file="includes/promo-boxes/apply_now.html" --> <!-- BOX APPLY END --> <!-- BOX MEMBER LOGIN START --> <!--#include file="includes/promo-boxes/members_area.html" --> <!-- BOX MEMBER LOGIN END --> <!-- BOX ACTIVATE CARD START --> <!--#include file="includes/promo-boxes/activate_card.html" -- > <!-- BOX ACTIVATE CARD END --> <!-- BOX PROMO START --> <!--#include file="includes/promo-boxes/store_locator.html" -- > <!-- BOX PROMO END --> </div> <!-- RIGHT CONTENT END --> <div class="clear"></div> <!-- FOOTER START --> <!--#include file="includes/footer.html" --> <!-- FOOTER END --> </div> <!-- OUTER WRAPPER END --> <!-- GOOGLE ANALYTICS START --> <!--#include file="includes/google-analytics.html" --> <!-- GOOGLE ANALYTICS END --> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Maps API" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/google-maps-api?hl=en -~----------~----~----~----~------~----~------~--~---
