2/29/2012 Locations on Google Maps, Part 1

Ever since Google Maps started in 2005, users have wanted to display data on the maps. This data ranges from single points (locations of addresses or buildings that they want to visit), to multiple points (restaurants in an area, bank branches nearby), to polygons (color towns by recycling rate, shade census tracts by income level). I want to learn as much as I can along these areas – it looks like the Google Maps/Google Earth platforms are going to be with us for quite some time. Although there are a number of web sites that allow the display of various types of information, I want to “do it myself” and program my own maps. Google Maps makes this possible with free use of their Google Maps API (API stands for application programming interface, and allows a user to write their own code to generate Google Maps). As you can imagine, the code that was useful a few years ago is no longer valid (it has been “deprecated”, to user programmer-speak). The latest version is Google Maps JavaScript API V3 – and that is about as technical as I will get in this blog.

Five years ago I programmed Google Maps to display multiple points – I think these are branch locations for Bank of America from 2008

I had geocoded the addresses, and been able to include the longitude/latitude coordinates in a list:
function onLoad() {
if (GBrowserIsCompatible()) {
map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-71.0725,42.3308), 5);
addmarker(-71.13642,42.36013);
addmarker(-71.05263,42.35275);
addmarker(-71.03902,42.37128);
addmarker(-71.05625,42.35898);
addmarker(-71.14736,42.33747); …

Starting with a new account, and new code, I coded in 3 of the old points to see if it works – success!


I then coded in all 169 branches.


Unfortunately, I think these markers are unattractive. It used to be relatively easy to select another icon, but those days are gone. I created a smallreddot icon (in Paint Shop Pro) with a transparent background, and saved it to the Icons folder on my website. The Google Maps code to access that icon is
var image = 'http://dixonspatialconsulting.com/icons/smallreddot.png';
and then I have to specify
icon: image
for each position (I’m sure there are easier ways, but it is pretty brute force for now).

and then this is what it looks like when I use Bank of America’s logo:


Next Steps include
- get “real” Google Maps in this blog – the images above are only pictures
- generating smaller logos at larger geographies (I would like to see more differentiation between the logos above)
- work with Google Fusion Tables (as a database), allowing me to display FusionTablesLayer on a map. Queries can be made of the data, and rendering is performed on Google servers rather than within my user’ browsers, thereby increasing performance dramatically.