State name to abbreviation script?

Hello… new user here

I need to write a piece of JS code that will do the following..? any help in the direction I need to go would be greatly appreciated!

I setup a Google Api map that returns a company name/coordinates XML string that gets loaded into my map and plotted.

I have a clickable list of companies on the right hand side of the map with state abbreviations pulled from the XML… my question is how do I put the state name at the top of the company list and everytime the state changes in the list it changes the state name

like this:

[U][B]Arizona:[/B][/U]

Company A, AZ
Company B, AZ
Company C, AZ

[U][B]Kansas:[/B][/U]

Company B, KS

[CODE]<cfxml variable=”xmlObject” casesensitive=”yes”>

<markers>
<cfoutput query=”mapquery”>
<marker lat=”#XmlFormat(lat)#” lng=”#XmlFormat(lng)#” html=”&lt;b&gt;&lt;center&gt;#XmlFormat(companyname)#&lt;/b&gt;&lt;br&gt;#XmlFormat(address)#, &lt;br&gt; #XmlFormat(city)#, #XmlFormat(state)# #XmlFormat(postalcode)# &lt;br&gt; #XmlFormat(phone)#&lt;/center&gt;” label=”#XmlFormat(companyname)#”></marker>
</cfoutput>
</markers>

</cfxml>

<cffile action=”WRITE”
file=”#ExpandPath(‘data.xml’)#”
output=”#ToString(xmlObject)#”>

<script type=”text/javascript”>
//<![CDATA[

if (GBrowserIsCompatible()) {
// this variable will collect the html which will eventually be placed in the side_bar

var side_bar_html = “”;

// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var htmls = [];
var i = 0;

// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the side_bar
gmarkers[i] = marker;
htmls[i] = html;
// add a line to the side_bar html
side_bar_html +='<a href=”javascript:myclick(‘ + i + ‘)”>’ + name + ‘</a><br>’;
i++;
return marker;
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}

// create the map
var map = new GMap2(document.getElementById(“map”));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(38.9, -93.8), 4);

// Read the data from data.xml
var request = GXmlHttp.create();
request.open(“GET”, “data.xml”, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName(“marker”);

for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute(“lat”));
var lng = parseFloat(markers[i].getAttribute(“lng”));
var point = new GLatLng(lat,lng);
var html = markers[i].getAttribute(“html”);
var label = markers[i].getAttribute(“label”);
// create the marker
var marker = createMarker(point,label,html);
map.addOverlay(marker);
}
// put the assembled side_bar_html contents into the side_bar div

document.getElementById(“side_bar”).innerHTML = side_bar_html;
overflow: auto;
}
}
request.send(null);
}

else {
alert(“Sorry, the Google Maps API is not compatible with this browser”);
}

</script>[/CODE]

Thanks in advance for any help!!

Also in #JavaScript _↴