API на Google Maps: Създайте локатор на магазин

Днес се опитвам да направя локатор на магазини, използвайки API на Google Maps. Локаторът на магазина трябва да бъде настроен по следния начин: две области, едната с карта, съдържаща всички магазини в дадена област (измерена в избираем радиус от централна точка), и една област със списък на всички магазини на карта, тяхната информация и, разбира се, връзка към техния уебсайт. Когато човек щракне върху името на магазина в списъка с магазини, той се центрира върху магазина на картата и отваря информационен прозорец над маркера на магазина.

Имам javascript променлива, към която се постарах да присвоя някои json данни от php скрипт (който избира тези данни в движение от база данни)

locations = [{"siteurl":"http:\/\/localhost.localdomain\/5","address":"260 Test St","city":"Brooklyn","state":"New York","zip_code":"11206"},{"siteurl":"http:\/\/localhost.localdomain\/4","address":"3709 Testing St.","city":"Austin","state":"Texas","zip_code":"78705"}]; 

Сега знам, че има 5 различни функции, които трябва да изпълня, изброени по-долу с очевидната им употреба:

1. geocoder.getLocations: Използва се за преобразуване на адресни данни (от json обект) в обект с данни за географска ширина и дължина
2. addElementToList : Използва се за добавяне на адресна информация към списъка с магазини и обвързване на функцията centerOnStore към onclick
3. centerOnStore когато се щракне върху елемент от списъка с магазини в областта на списъка, тази функция се намира в центъра на магазина, върху който е щракнато в областта на картата. Тази функция също отваря информационен прозорец над центрирания магазин.
4. placeMarker функцията за поставяне на маркер върху картата, извиквана след като геокодерът върне обекти latitudeLongitude
5. eventListener това е свързано по някакъв начин с щракването върху елемент от списъка и допълнително центрира картата върху въпросния магазин

Е, аз съм извън моята класа, изглежда. Тъкмо сега научавам за затварянията на javascript и мисля, че те може да са необходими, но не мога да ги разбера напълно. Трябва да измисля някакъв начин да приведа всички тези функции в работещ ред, като предавам информация напред и назад една на друга и създам локатор на магазин

.

Ето какво имам досега, но нещо много не е наред с него.

    var map = null;
    var geocoder = null;
    var locations = null;
    var center_on = null;
    var zoom_level = null;
    var markerList = [];

    function initialize()
    {
            if(GBrowserIsCompatible())
            {
                    // Assign vars
                    map = new GMap2(document.getElementById("map_canvas"));
                    geocoder = new GClientGeocoder();
                    locations = <?php echo(json_encode($my_vars['locations'])); ?>;
                    center_on = "<?php echo($my_vars['center_on']); ?>";
                    zoom_level = <?php echo($my_vars['zoom_level']); ?>;
                    var currentLocation = 0;

                    geocoder.getLatLng(center_on, function(myPoint)
                    {
                            map.setCenter(myPoint, zoom_level);
                    });
                    map.setUIToDefault();


                    var list = document.getElementById('center_list');

                    for(var i = 0; i < locations.length; i++)
                    {
                            var address = locations[i]['address'] + ', ' + locations[i]['city'] + ' ' + locations[i]['state'] + ', ' + locations[i]['zip_code'];
                            geocoder.getLocations(address, addAddressToMap);
                    }

            }




            function addAddressToMap(response) {

                    if (!response || response.Status.code != 200) {
                            currentLocation++;
                    } else {
                    var place = response.Placemark[0];
                    var point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
                    marker = new GMarker(point);
                    GEvent.addListener(marker, 'click', function(){
                            this.openInfoWindowHtml("<strong>" + place.address + "</strong><br /><a href='/bg" + locations[currentLocation]['siteurl'] + "'>" + locations[currentLocation]['siteurl'] + "</a>");
                    });
                    map.setCenter(point, 13);
                    markerList.push(marker);
                    map.addOverlay(marker);
                    li = document.createElement('li');

                    li.innerHTML = "<strong>" + place.address + "</strong>";
                    li.setAttribute('onclick', 'center_on_center(' + place.Point.coordinates[1] + ',' + place.Point.coordinates[0] + ')');
                    li.setAttribute('id', 'center_');
                    li.style.fontSize = '1.4em';
                    document.getElementById('center_list').appendChild(li);
                    // alert(currentLocation) here says 0,0,0,0
                    currentLocation++;
                    // alert(currentLocation) here says 1,2,3,4
                    }
            }
    }

Съжалявам за стената от код. Не мога да мисля повече. Нямах представа, че ще е толкова трудно. Никаква представа.

ако предупредя currentLocation в реда, преди да го увелича, винаги е 0. но ако го предупредя в реда, след като го увелича, това е "1,2,3,4" и т.н. Това противоречи на всичко, което знам за компютрите.