October 2007 - Posts
Dispite my negetive feelings about Google Map API, I still rushed to set up a website and created a bunch of rudimentary Google maps, out of the urgent need to jump on the Google broadwagen and real practical reasons. I have a little girl who is four and who will go to kindergarten next year, so I am trying all my might to find a good school for her. So as a web techie and a mom, I had to search low and high and map out all the options.
So much for the small talk. Here is the map of Chicago Elementary Schools. And the url is http://www.codexd.info/googlemaps/chicagoschools.htm
There are a few functions worth noting:
1) GDownloadUrl
I use the function to dynamically loaded chicago schools data and in the same time, passed as literal the function to process it and add the points to the map. As the following
/load chicago school data
GDownloadUrl(
"schools.txt", process_it);
// === Define the function thats going to process the text file ===process_it = function(doc, responseCode) {
// To ensure against HTTP errors that result in null or bad data,
// always check status code is equal to 200 before processing the dataif(responseCode == 200) {
// === split the document into lines ===var lines = doc.split("\n");
// lines.sort();var parts;
var schoolList=document.forms[0].schoolList;for (var i=1; i<lines.length; i++) {
//only elementary schoolsif (lines[i].length > 1 && lines[i].indexOf("ELEM")>0) {
parts = lines[i].split(",");
var lat = parseFloat(parts[4]);var lng = parseFloat(parts[3]);
//var html = "To be added";var label = parts[0];
// Add option to the bottom of the list
schoolList[schoolList.length] =
new Option(label, lat + "," + lng);
// alert( label + " " + lat + " " + lng);
var point = new GLatLng(lat,lng);var marker = createLabelMarker(point, label, "Coming Soon");
map.addOverlay(marker);
bounds.extend(point);
centerMap(i);
}
}
}
else if(responseCode == -1) {
alert(
"Data request timed out. Please try later.");} else { alert("Request resulted in error. Check XML file is retrievable.");
}
}
The process_it is an umbralla function that has covered layers of operations and procedures. First, it checks to ensure the httprequest for remote data has a valid return; then it parses the comma delimited text file into seperate fields and take in information such as lat, lon, school name, etc.; then it creates map markers and adds it to the basemap; and point by point, it expands the map extent and adjust the map center and zoom level.
Isn't it confusing? Deep breath.
I stole this function for centering and zooming a map dynamically by addresses.
function centerAndZoomOnBounds(bounds){
var center = bounds.getCenter();var newZoom = map.getBoundsZoomLevel(bounds);if (map.getZoom() != newZoom){
map.setCenter(center, newZoom);
}else{
map.panTo(center);
}
}
This map also includes a function for local search. And the search function is directly lifted out of the Google Map API website. The local search takes three steps, first, get the address being searched; second call the Geocoder to get the lat, and lon; third, locate the address on the map.
function showLocation() {var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap);
}
// findLocation() is used to enter the sample addresses into the form.function findLocation(address) {
document.forms[0].q.value = address;
showLocation();
}
Later, I hope my maps will go beyond and deeper.
These days, I found myself have chunks of free time to spare, so I experimented on Google Maps. While Google seems to be king of Internet now, I have some bad first impressions about the Google Map API.
1. Documentation is thin, too thin to be helpful beyond the first dummy map. It is nothing compared to the all-comprehensive and bulky MSDN library with its trees, branches, leaves of classes, methods, properties. Google people probably think everyone out there is a tech wizard who can get the gist with a touch of magic wand. I, for one, am not.
2. Remember the joke about Microsoft? A guy got lost in his airplane. He circled around and spotted a building, he asked "Where am I?" and was answered "You are on an airplane". The guy then realized that he was on the sky above Microsoft headquarter. Ha, technically correct, but not helpful. I have the same impression regarding the Google Map API. The bony documentation offers not much beyond tech. jargon.
3. With the loud noise of Google-Map-Mash-up-this-and-that, you think there would be a swarm of smart-asses on the web giving tutorials, explaining things, showing examples as to how to map this and that. But, no, no. My searched turned out more questions than answers. There is only one tutorial on the basics of the map api, then there are only scattered exchanges of questions and answers regarding the how-tos
I am very disappointed.
But I did make some maps I wanted, I will come back to talk about the maps tomorrow.
Every blogger needs Technorati tags to generate traffic. I am doubtful of the claim. However, since it is incredibly annoying that you have to type so much to put those darn technorati tags in your blog and it is so incredibly easy to write a simple web program to automate the task, so I decide to write one myself.
(Sure there are quite a few online, however, they always shamelessly carry their brand or ask you download and install something.)
Anyway, this is my javascript code
<script language="javascript">
<!--
//Generate Tags and copy to clipboard
function GetTags()
{
var tags=document.TagGenerator.tagtext.value.split(",");
var html="";
for (var i=0; i < tags.length-1; i++)
{
//trim leading and trailing spaces
tags[i]=tags[i].replace(/^\s+|\s+$/g, '');
html +='<a href="http://www.technorati.com/tag/' + tags[i]+ '" rel="tag">'+tags[i]+'</a>'+" ,";
}
//trim leading and trailing spaces
tags[i]=tags[i].replace(/^\s+|\s+$/g, '');
html +='<a href="http://www.technorati.com/tag/' + tags[i]+ '" rel="tag">'+tags[i]+'</a>';
document.TagGenerator.taghtml.value =html;
// Copied = document.TagGenerator.taghtml.createTextRange();
// Copied.execCommand("Copy");
}
//Select everything in the textarea
function SelectAll()
{
TagGenerator.taghtml.focus();
TagGenerator.taghtml.select();
}
//Generate Tags and copy to clipboard
function EnterToGetTags()
{
if (window.event && window.event.keyCode == 13)
GetTags();
}
function Focus()
{
document.TagGenerator.tagtext.focus();
}
//-->
</script>
And the working web page is @
Technorati Tag Generator
