I’ve decided to start exploring JavaScript –not frameworks ontop of JavaScript– in order to better understand what I use but do not understand. First candidate: Creating-map-previews-with-jQuery-and-Googles-Static-Map-API

My job is not to directly emulate what is going on in Ray’s Post, but to explore ways to do this in just JavaScript no pesky script tags above your raw code. The only tricky part is tracking onkeyup, I refer to http://www.quirksmode.org/js/keys.htmlfor browser compliance.

Here she goes!

<textarea cols="30" rows="2" id="address">Type address here</textarea>
<br/>
<img width="400" height="400" title="Map!" id="map" />

(function(){
    var base = "http://maps.google.com/maps/api/staticmap?zoom=12" +
        "&size=400x400&maptype=roadmap&sensor=false&center=",
        map = document.getElementById("map"),
        area = document.getElementById("address"),
        virgin = true;

    area.onfocus = function(ev){
      if( virgin ){  //Touched for the very first time?
        virgin = false;
        this.value = '';
      }
    }
    area.onkeyup = function(ev){
      //All sorts of broken things with detecting keycodes,
      //I'm just looking for value
      map.src = this.value.length > 4 ? base + escape(this.value) : '';
    };
})();

However, seeing is believing

This should work in all browsers, I don’t have Windows to test this though :)