Google Maps API dynamic refresh

[Tinnin]

Hi All,

I'm trying to display a postal area on Google Maps API within it's boundaries. I want to do this dynamically so that everytime someone changes the text in a text field (entering a postcode or part of), it checks the postcode and calculates the boundaries then displays them.

My current issue is that I cannot get the map to refresh after each keyup.

My code is as follows:

var map;
var postCodePlot;
var postCodeBorderCoords = [];

function initialize() {
    //alert("initialize called");
    var mapProp = {
      center: new google.maps.LatLng(51.55777197508853, -0.13395323779611973),
      zoom:14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

    // Construct the polygon.
    postCodePlot = new google.maps.Polygon({
      paths: postCodeBorderCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    postCodePlot.setMap(map);
    //google.maps.event.trigger(map, 'resize');
}

google.maps.event.addDomListener(window, 'load', initialize);

google.maps.event.addDomListener($("#postcodeInput")[0], 'keyup', function() {
    postCodeBorderCoords = [];
    $.getJSON("locateTerritory.php", {postCodeToCheck:$(this).val()}, function(result) {
        $.each(result, function(key, value) {
            var gridRef = new OsGridRef(value['easting'], value['northing']);
            var latLon = OsGridRef.osGridToLatLong(gridRef);
            postCodeBorderCoords.push(new google.maps.LatLng(latLon.lat, latLon.lon));
            //alert(latLon.lat + ", " + latLon.lon);
        });
        postCodeBorderCoords.push(postCodeBorderCoords[0]);
    });
    initialize();
});

Where $("#postcodeInput") is the text field id.

My JavaScript skills are pretty weak so I'm probably making some fairly rudimentary errors here.

Also, if I leave in the alert in the initialize() function, after I close the alert window the map refreshes with the desired result. How to get it working without this...?

I've also tried google.maps.event.trigger(map, 'resize'); but I'm not sure if I'm using it right or if it is even what I need.

Thanks for any help offered.

[Tinnin]

So I guess the question is, what is alert() doing that is reloading the map and how can I get it to do that without calling alert?
From what I understand, it is taking focus away from the window. But when I try window.blur(), window.focus() I still can't get the desired effect.

[Tinnin]

Got it:

$(document).ready(function() {

    function initialize() {

        var mapProp = {
          center: new google.maps.LatLng(51.55777197508853, -0.13395323779611973),
          zoom:14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

        // Construct the polygon.
        var postCodePlot = new google.maps.Polygon({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });

        postCodePlot.setMap(map);

        google.maps.event.addDomListener($("#postcodeInput")[0], 'keyup', function() {
            var path = new google.maps.MVCArray;
            postCodePlot.setPaths(new google.maps.MVCArray([path]));
            $.getJSON("locateTerritory.php", {postCodeToCheck:$(this).val()}, function(result) {
                $.each(result, function(key, value) {
                    var gridRef = new OsGridRef(value['easting'], value['northing']);
                    var latLon = OsGridRef.osGridToLatLong(gridRef);
                    path.insertAt(path.length, new google.maps.LatLng(latLon.lat, latLon.lon));
                });
            });
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

});