I tried incorporating your code but I keep getting fSortonState is not a
variable.
Here is my code any thoughts on what could be happening?
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 Thu, Mar 31, 2011 at 5:34 PM, usgolfers <usgolf...@gmail.com> wrote:
> 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;
> }
>
> --
> 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-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.
>
--
__________________________________
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
--
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-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.
