I followed the advice here: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/8cbba324e113df53/e2be32527134110e?lnk=gst&q=store+locator+sidebar#e2be32527134110e When I search for properties that are in my database, I get undefined in the sidebar, null(1.2) in the drop down, and the map doesn't move. I have attached my code. Any help is appreciated. Thanks
-- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/jOFGxvLYAa8J. To post to this group, send email to google-maps-js-api-v3@googlegroups.com. To unsubscribe from this group, send email to google-maps-js-api-v3+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
<html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>Google Maps AJAX + mySQL/PHP Example</title> <script src="http://maps.google.com/maps/api/js?sensor=false"; type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map; var markers = []; var infoWindow; var locationSelect; function load() { map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(40, -100), zoom: 4, mapTypeId: 'roadmap', mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} }); infoWindow = new google.maps.InfoWindow(); locationSelect = document.getElementById("locationSelect"); locationSelect.onchange = function() { var markerNum = locationSelect.options[locationSelect.selectedIndex].value; if (markerNum != "none"){ google.maps.event.trigger(markers[markerNum], 'click'); } }; } function searchLocations() { var address = document.getElementById("addressInput").value; var geocoder = new google.maps.Geocoder(); geocoder.geocode({address: address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { searchLocationsNear(results[0].geometry.location); } else { alert(address + ' not found'); } }); } function clearLocations() { infoWindow.close(); for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers.length = 0; locationSelect.innerHTML = ""; var option = document.createElement("option"); option.value = "none"; option.innerHTML = "See all results:"; locationSelect.appendChild(option); } function searchLocationsNear(center) { clearLocations(); var radius = document.getElementById('radiusSelect').value; var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; downloadUrl(searchUrl, function(data) { var xml = parseXml(data); var markerNodes = xml.documentElement.getElementsByTagName("marker"); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markerNodes.length; i++) { var name = markerNodes[i].getAttribute("name"); var address = markerNodes[i].getAttribute("address"); var distance = parseFloat(markerNodes[i].getAttribute("distance")); var latlng = new google.maps.LatLng( parseFloat(markerNodes[i].getAttribute("lat")), parseFloat(markerNodes[i].getAttribute("lng"))); createOption(name, distance, i); createMarker(latlng, name, address); bounds.extend(latlng); } map.fitBounds(bounds); locationSelect.style.visibility = "visible"; locationSelect.onchange = function() { var markerNum = locationSelect.options[locationSelect.selectedIndex].value; google.maps.event.trigger(markers[markerNum], 'click'); }; }); } //global var var sidebarInfo; function createMarker(latlng, name, address) { var html = "<p><span style='font-weight:bold'>" + name + "</span><br/>" + address1 + "<br />" + address2 + cityStateZip + "<br /></p><p><span style='font-weight:bold'>" + phone + "</span></p>"; // info window contents sidebarInfo+=html; // add this line after the html var declaration: document.getElementById("sidebar").innerHTML=html; var marker = new google.maps.Marker({ map: map, position: latlng }); google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); markers.push(marker); } function createOption(name, distance, num) { var option = document.createElement("option"); option.value = num; option.innerHTML = name + "(" + distance.toFixed(1) + ")"; locationSelect.appendChild(option); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request.responseText, request.status); } document.getElementById("sidebar").innerHTML=sidebarInfo; }; request.open('GET', url, true); request.send(null); } function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); } } function doNothing() {} //]]> </script> </head> <body style="margin:0px; padding:0px;" onLoad="load()"> <div> <input type="text" id="addressInput" size="10"/> <select id="radiusSelect"> <option value="5" selected>5mi</option> <option value="10">10mi</option> <option value="25">25mi</option> <option value="50">50mi</option> </select> <input type="button" onClick="searchLocations()" value="Search"/> </div> <div><select id="locationSelect" style="width:100%;visibility:visible"></select></div> <div id="map" style="width: 75%; height: 80%; float:left;"></div> <div id="sidebar" style="float:right; width: 25%;"></div> </body> </html>
