Store Locator

[Mike Wellman]

This may be the wrong area for this but not sure where to turn.

I trying out the code from here:
http://code.google.com/apis/maps/articles/phpsqlsearch_v3.html

I split up the database so that state is in it's own column.

The problem that I am dealing with is I would like my listings in the sidebar to Order ASC BY distance (which I got this to do) but also group by state but not do the normal mysql grouping into one.

For instance, this is what it is doing:
Location 1, PA: 18.2mi
Location 2, PA: 20.4mi
Location 3, WV: 25.9mi
Location 4, OH: 31.1mi
Location 5, PA: 52.6mi
Location 6, PA: 78.2mi

What I would like it to do is:
Location 1, PA: 18.2mi
Location 2, PA: 20.4mi
Location 5, PA: 52.6mi
Location 6, PA: 78.2mi
Location 3, WV: 25.9mi
Location 4, OH: 31.1mi

Anyone have any thoughts on this or could point me into the right direction.

I am currently trying to use temp tables in mysql to see if that might help.

Any incite would be appreciated.

Thanks

[usgolfers]

Mike,

I assume you are getting an array of Marker nodes as is done in the code.
If so you could split the create operations and do an array sort prior to option creation

 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")));

    createMarker(latlng, name, address);
    bounds.extend(latlng);
  }
 
markerNodes = markerNodes.sort(fSortOnState);

 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);
  }

function fSortonState(a,b)
{
 if(parseFloat(a.getAttribute("distance")) > parseFloat(b.getAttribute("distance")))
  return 1;

 if(parseFloat(a.getAttribute("distance")) < parseFloat(b.getAttribute("distance")))
  return -1;

 if(parseFloat(a.getAttribute("state")) > parseFloat(b.getAttribute("state")))
  return 1;

 if(parseFloat(a.getAttribute("state")) < parseFloat(b.getAttribute("state")))
  return -1;
 return 0;
}

[Prophet]

For this line: markerNodes = markerNodes.sort(fSortOnState);

I keep getting: fSortOnState is not defined

Is there a reason for this?

-Mike

[Barry Hunter]

On 12 April 2011 21:16, Prophet <mike.w...@gmail.com> wrote:
> For this line: markerNodes = markerNodes.sort(fSortOnState);
>
> I keep getting: fSortOnState is not defined

I imagine its a scoping issue. you probably can fix it by moving the
actual function just above the sort command. The function needs to be
visible, before it can call it.

... but I dont think the function will solve your issue, that function
really just implements "ORDER BY distance,state" which is not what you
want.

Personally I would solve it (and have done in the past for similar
requirements) using associative arrays. This pseudo javascript should
hopefully get you close: (assumes the results are already in distance
order! eg from mysql)

var obj = new Object()

for (var i = 0; i < markerNodes.length; i++) {

var state = markerNodes[i].getAttribute("state");

if (!obj[state])
obj[state] = new Array();

obj[state].push(i);

}

for (state in obj) {
for(q=0;q<obj[state].length;q++) {
i = obj[state][q];

var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");

.......
//do all the other stuff with the marker here.

}
}

[Andrew Leach]

On 12 April 2011 21:16, Prophet <mike.w...@gmail.com> wrote:

> For this line: markerNodes = markerNodes.sort(fSortOnState);
>
> I keep getting: fSortOnState is not defined
>
> Is there a reason for this?

Probably that you haven't defined it. It doesn't appear in your code listing.

usgolfer's post does contain that function though. (The parameter to
"sort" is a function which defines the sort order)

[Prophet]

Yes that is what was I was seeing.

I tried using a mysql temp table to try to help with the issue but
that's a no go.

I'm trying through the push array right now.

Here is my code if either of you see anything:


function initMenus() {
$('ul.menu ul').hide();
$.each($('ul.menu'), function(){
$('#' + this.id + '.expandfirst ul:first').show();
});

$('ul.menu li a').hover(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;

if($('#' + parent).hasClass('noaccordion')) {
$(this).next().slideToggle('normal');
return false;
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($('#' + parent).hasClass('collapsible')) {
$('#' + parent + ' ul:visible').slideUp('normal');
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}

}

);
$('ul.menu ul.menushow').show();
}



google.load("maps", "3", {callback: initialize,
other_params:"sensor=false"});

var map;
var markers = [];
var infoWindow;
var locationSelect;
var sideBar;

function initialize() {

initMenus();
map = new google.maps.Map(document.getElementById("map"), {
center: new
google.maps.LatLng(google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude),
zoom: 5,
mapTypeId: 'roadmap',
panControl: true,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
streetViewControl: true,
mapTypeControl: true,
mapTypeControlOptions: {style:
google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});

infoWindow = new google.maps.InfoWindow();

locationSelect = document.getElementById("locationSelect");
sideBar = document.getElementById("sidebar");



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 radius = document.getElementById('radiusSelect').value;
var stateSelect = document.getElementById("stateSelect");
var stateSelectValue =
stateSelect.options[stateSelect.selectedIndex].value;
var centerPoint = "("+google.loader.ClientLocation.latitude + ", " +
google.loader.ClientLocation.longitude+")";
if (address != "") {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && address != "") {
searchLocationsNear(results[0].geometry.location, radius,
stateSelectValue);
}
});
}else if(address == "" && stateSelectValue != "none"){
searchLocationsNear(centerPoint, 50000, stateSelectValue);
}else if(address == "" && stateSelectValue == "none"){
}else{
alert('Location Not Found');
}
}

function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;

var div = document.createElement("div");
sideBar.innerHTML = "";
/*sideBar.innerHTML = "No Stores";*/
sideBar.appendChild(div);

locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}

function searchLocationsNear(center, radius, stateSelectValue) {
clearLocations();
var address = document.getElementById("addressInput").value;
if (address != "") {
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() +
'&lng=' + center.lng() + '&radius=' + radius + '&state=' +
stateSelectValue;
}else{
var searchUrl = 'phpsqlsearch_genxml.php?&radius=' + radius +
'&state=' + stateSelectValue;
}
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes =
xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
if(markerNodes.length == "0"){
map = new google.maps.Map(document.getElementById("map"), {
center: new
google.maps.LatLng(google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude),
zoom: 5,
mapTypeId: 'roadmap',
panControl: true,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
streetViewControl: true,
mapTypeControl: true,
mapTypeControlOptions: {style:
google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});

alert("Please enter a new Zip Code.");
}else{

for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");

var city = markerNodes[i].getAttribute("city");

var state = markerNodes[i].getAttribute("state");

var zipcode = markerNodes[i].getAttribute("zipcode");
var lat = markerNodes[i].getAttribute("lat");
var lng = markerNodes[i].getAttribute("lng");

var distance =
parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));

createSideBar(name, distance, address, city, state, zipcode, i);
createOption(name, distance, i);
createMarker(latlng, name, address, city, state, zipcode,
distance);
bounds.extend(latlng);
}
$('#sidebar div.AL:first').before('<div><h1>Alabama Locations</h1></
div>');
$('#sidebar div.AK:first').before('<div><h1>Alaska Locations</h1></
div>');
$('#sidebar div.AZ:first').before('<div><h1>Arizona Locations</h1></
div>');
$('#sidebar div.AR:first').before('<div><h1>Arkansas Locations</h1></
div>');
$('#sidebar div.CA:first').before('<div><h1>California Locations</
h1></div>');
$('#sidebar div.DE:first').before('<div><h1>Delaware Locations</h1></
div>');
$('#sidebar div.FL:first').before('<div><h1>Florida Locations</h1></
div>');
$('#sidebar div.GA:first').before('<div><h1>Georgia Locations</h1></
div>');
$('#sidebar div.ID:first').before('<div><h1>Idaho Locations</h1></
div>');
$('#sidebar div.IL:first').before('<div><h1>Illinois Locations</h1></
div>');
$('#sidebar div.IN:first').before('<div><h1>Indiana Locations</h1></
div>');
$('#sidebar div.IA:first').before('<div><h1>Iowa Locations</h1></
div>');
$('#sidebar div.KY:first').before('<div><h1>Kentucky Locations</h1></
div>');
$('#sidebar div.LA:first').before('<div><h1>Louisiana Locations</
h1></div>');
$('#sidebar div.ME:first').before('<div><h1>Maine Locations</h1></
div>');
$('#sidebar div.MD:first').before('<div><h1>Maryland Locations</h1></
div>');
$('#sidebar div.MA:first').before('<div><h1>Massachusetts Locations</
h1></div>');
$('#sidebar div.MI:first').before('<div><h1>Michigan Locations</h1></
div>');
$('#sidebar div.MN:first').before('<div><h1>Minnesota Locations</
h1></div>');
$('#sidebar div.MS:first').before('<div><h1>Mississippi Locations</
h1></div>');
$('#sidebar div.MO:first').before('<div><h1>Missouri Locations</h1></
div>');
$('#sidebar div.MT:first').before('<div><h1>Montana Locations</h1></
div>');
$('#sidebar div.NE:first').before('<div><h1>Nebraska Locations</h1></
div>');
$('#sidebar div.NV:first').before('<div><h1>Nevada Locations</h1></
div>');
$('#sidebar div.NH:first').before('<div><h1>New Hampshire Locations</
h1></div>');
$('#sidebar div.NJ:first').before('<div><h1>New Jersey Locations</
h1></div>');
$('#sidebar div.NM:first').before('<div><h1>New Mexico Locations</
h1></div>');
$('#sidebar div.NY:first').before('<div><h1>New York Locations</h1></
div>');
$('#sidebar div.NC:first').before('<div><h1>North Carolina
Locations</h1></div>');
$('#sidebar div.ND:first').before('<div><h1>North Dakota Locations</
h1></div>');
$('#sidebar div.OH:first').before('<div><h1>Ohio Locations</h1></
div>');
$('#sidebar div.OK:first').before('<div><h1>Oklahoma Locations</h1></
div>');
$('#sidebar div.OR:first').before('<div><h1>Oregon Locations</h1></
div>');
$('#sidebar div.PA:first').before('<div><h1>Pennsylvania Locations</
h1></div>');
$('#sidebar div.RI:first').before('<div><h1>Rhode Island Locations</
h1></div>');
$('#sidebar div.SC:first').before('<div><h1>South Carolina
Locations</h1></div>');
$('#sidebar div.SD:first').before('<div><h1>South Dakota Locations</
h1></div>');
$('#sidebar div.TN:first').before('<div><h1>Tennessee Locations</
h1></div>');
$('#sidebar div.TX:first').before('<div><h1>Texas Locations</h1></
div>');
$('#sidebar div.UT:first').before('<div><h1>Utah Locations</h1></
div>');
$('#sidebar div.VT:first').before('<div><h1>Vermont Locations</h1></
div>');
$('#sidebar div.VA:first').before('<div><h1>Virginia Locations</h1></
div>');
$('#sidebar div.WA:first').before('<div><h1>Washington Locations</
h1></div>');
$('#sidebar div.WV:first').before('<div><h1>West Virginia Locations</
h1></div>');
$('#sidebar div.WI:first').before('<div><h1>Wisconsin Locations</
h1></div>');
$('#sidebar div.WY:first').before('<div><h1>Wyoming Locations</h1></
div>');
map.fitBounds(bounds);

locationSelect.style.visibility = "visible";
sideBar.style.visibility = "visible";

locationSelect.onchange = function() {
var markerNum =
locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
}
});
}

function createMarker(latlng, name, address, city, state, zipcode,
distance) {
function delquote(str){
return (str=str.replace(/["']{1}/gi,""));
}

var address_filled = document.getElementById('addressInput').value;
var userInput = escape(address_filled);
var addressspace = address + "%20" + city + "%20" + state + "%20" +
zipcode;
var fullAddress = addressspace.replace(/\s/g,"%20");

if(address_filled == 0){
var html = '<strong>' + name + '</strong>' + ' <br/>' + address +
", " + city + ", " + state + " " + zipcode +'<br/> <a href=http://
maps.google.com/maps?saddr=&daddr=' + delquote(fullAddress) + '
target=_black>Get Directions</a>';
}else{
var html = '<strong>' + name + '</strong>' + ' (' +
distance.toFixed(1) + ') <br/>' + address + ", " + city + ", " + state
+ " " + zipcode + '<br/> <a href=http://maps.google.com/maps?saddr=' +
delquote(userInput) + '&daddr=' + delquote(fullAddress) + '
target=_black>Get Directions</a>';
}


var marker = new google.maps.Marker({
map: map,
position: latlng

});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
$(".gmnoprint img[src='http://maps.gstatic.com/intl/en_us/mapfiles/
iws3.png']").each(function(){
$(this).css('display','none');
$(this).hide();
});
});
markers.push(marker);

}

function createOption(name, distance, num) {
var option = document.createElement("option");
var address_filled = document.getElementById('addressInput').value;
option.value = num;
option.innerHTML = name + " (" + distance.toFixed(1) + ")";
if(address_filled == 0){
option.innerHTML = name;
}else{
option.innerHTML = name + " (" + distance.toFixed(1) + ")";
}
locationSelect.appendChild(option);
}
function createSideBar(name, distance, address, city, state, zipcode,
num) {
var div = document.createElement("div");
div.id = num;
div.className = state;
var address_filled = document.getElementById('addressInput').value;
if(address_filled == 0){
var html = '<strong>' + name + '</strong> <br/>' + address + ", " +
city + ", " + state + " " + zipcode;
}else{
var html = '<strong>' + name + '</strong> (' + distance.toFixed(1)
+ ')<br/>' + address + ", " + city + ", " + state + " " + zipcode;
}
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';

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';
});
sideBar.appendChild(div);
}

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);
}

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() {}





On Apr 12, 4:42 pm, Andrew Leach <andrew.leac...@gmail.com> wrote:

[Prophet]

for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");

var city = markerNodes[i].getAttribute("city");
var state = markerNodes[i].getAttribute("state");
var zipcode = markerNodes[i].getAttribute("zipcode");
var lat = markerNodes[i].getAttribute("lat");

var lng = markerNodes[i].getAttribute("lng");

var distance =
parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));

[Mike Wellman]

Still doesn't seem to work. Not sure what the problem could be. :/

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Barry Hunter]

I suggest you ask a clairvoyant, not sure we can help you any further either.

(unless there is a clairvoyant among us?!)

Posting a link to your map, may help somewhat.

[Mike Wellman]

I managed to do it by wrapping the information like so while the php ordered the distance to xml:

Did this for each state:

$('#sidebar div.PA').wrapAll('<div class="PA" />');

$('#sidebar div.PA:first').before('<div><h1>Pennsylvania Locations</h1></div>');

__________________________________
Mike Wellman
Senior Multimedia Programmer

GatesmanMarmionDrake, Inc.
60-15th Street, Southside, Pittsburgh, PA 15203

Main: 412.381.5400 x110
Cell: 724.630.1339
http://www.GMDDadvertising.com

[davie]

Hi
I may be a bit late on this thread but you can order on multiple
columns
SELECT *
FROM table
ORDER BY state, distance ASC
Regards Davie

[Mike Wellman]

Ha Thanks Davie.  Yeah I tried that and it wasn't working how I needed it to.  Thanks though.