After a lot of work/research/headaches, etc., I've got my "Local Business Directory" w/ Google Maps script working pretty cool.
Now, I'm stuck. There are a couple of things the app needs to do before it's done.
I need to run a query when someone logs on to the site, so that there is some data displayed in the sidebar... A kind of "Some Local Businesses".
I need some sort of filters to show up in a fixed cell/div at the top of the "sidebar" div. For example, sort by name desc/asc... or only show results that meet some sort of other criteria, only restaurants that offer on-line coupons, or only featured businesses, or only new businesses.
Here is my working script so far:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/gmap_markerwithlabel.js"></script>
<script type="text/javascript">
//<![CDATA[
google.maps.visualRefresh = true;
var map;
var markers = [];
var infoWindow;
var myCenter=new google.maps.LatLng(<?=$gmap_center_point?>);
<!-- FUNCTION -->
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?=$gmap_center_point?>),
zoom: 10,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
});
infoWindow = new google.maps.InfoWindow();
<!-- STICK A CUSTOM PIN IN CENTER LOCATION -->
var center_marker=new google.maps.Marker({
map:map,
position:myCenter,
clickable: true,
icon:'/images/GHV_map_marker.png'
});
center_marker.info = new google.maps.InfoWindow({
content: 'My Location'
});
google.maps.event.addListener(center_marker, 'click', function() {
center_marker.info.open(map, center_marker);
});
center_marker.setMap(map);
}
<!-- This function does the Search based on AddressInput -->
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 -->
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
}
<!-- This function queries the Processing File based on criteria set... radius... search term. etc.-->
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchrequest = document.getElementById('search').value;
var searchUrl = 'search_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius + '&searchrequest=' + searchrequest;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markerNodes.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setZoom(6);
map.setCenter(new google.maps.LatLng(<?=$gmap_center_point?>));
return;
}
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
<!-- GRAB THE VARIABLES ATTRIBUTES FROM PROCESSING FILE AND ASSIGN VAR -->
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var profile_link = markerNodes[i].getAttribute("profile_link");
var featured = markerNodes[i].getAttribute("featured");
var coupons = markerNodes[i].getAttribute("coupons");
var youtube_activate = markerNodes[i].getAttribute("youtube_activate");
var additional_photo = markerNodes[i].getAttribute("additional_photo");
var logo = markerNodes[i].getAttribute("logo");
var number_count = markerNodes[i].getAttribute("number_count");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createSidebarEntry(name, address, distance, i, featured, coupons, youtube_activate, additional_photo, logo, profile_link, number_count);
createMarker(latlng, name, address, profile_link, number_count, distance);
bounds.extend(latlng);
}
map.fitBounds(bounds);
});
}
<!-- This function creates marker and populates the infobubble -->
function createMarker(latlng, name, address, profile_link, number_count, distance, zoom) {
var html = "<b>" + name + "</b> <br/>" + address + "<br/><font color=\"red\">Approx. " + distance.toFixed(1) + " miles away</font><br/>"
<!-- html += '<a class="menu" href="javascript: map.setZoom('+zoom+');">Zoom To</a>'; -->
html += ' <a class="menu" href="javascript:map.set(streetViewControl, true);">Street View</a>';
html += ' | ';
html += ' <a class="menu" href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())+2);">Zoom In</a>';
html += ' | ';
html += ' <a class="menu" href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())-2);">Out </a>';
html += '<br/><br/>'+ profile_link ;
var marker = new MarkerWithLabel({
map: map,
position: latlng,
animation: google.maps.Animation.DROP,
<!-- Label Options Reference http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/examples/-->
labelContent: number_count,
labelAnchor: new google.maps.Point(8, 36),
labelClass: "gmap_labels", // the CSS class for the label
labelInBackground: false
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
<!-- This function . . . -->
function createSidebarEntry(name, address, distance, num, featured, coupons, youtube_activate, additional_photo, logo, profile_link, number_count) {
var div = document.createElement("div");
var html = '<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"5\"><tr><td width=\"20px\" valign=\"top\" align=\"right\">'+ number_count +'</td><td ><b>' + name + '</b> <br/><font color=\"red\">Approx. ' + distance.toFixed(1) + ' miles away.</font><br/>' + address + ' <br/><br/></td></tr></table>';
div.value = num;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
sidebar.appendChild(div);
google.maps.event.addDomListener(div, 'click', function() {
google.maps.event.trigger(markers[num], 'click');
});
google.maps.event.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div ;
}
<!-- This function . . . -->
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);
}
};
request.open('GET', url, true);
request.send(null);
}
<!-- This function . . . -->
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');
}
}
<!-- This function . . . -->
function doNothing() {}
//]]>
</script>