Question

I’m trying to display an array of postcodes onto a google map using PHP and using the Symfony Framework (1.0)

The main problem I am having, is that there is some text associated with each marker, i.e when you click the marker a popup appears.

The main problem is that the text should point to the correct postcode/marker on the map, but for some reason this doesn’t seem to be the case:

<?php
$addresses = array();
foreach($contents->getResults() as $content):
    $addresses[] = array(
        'postcode'=>sprintf('%s',str_replace(' ','',$content->getPostalCode())),
        'html'=>escape_javascript(get_partial('property/propertyList',array('content'=>$content))),
    );
endforeach;
?>

<?php
echo javascript_tag("
var map;
var localSearch = new GlocalSearch();
var center = false;
var icon = new GIcon();
icon.image = 'http://www.google.com/mapfiles/marker.png';
icon.shadow = 'http://www.google.com/mapfiles/shadow50.png';
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(10, 34);
var delay = 100;
var bounds = new GLatLngBounds();

var addresses = ".json_encode($addresses).";

var nextAddress = 0;

function theNext() {
    if (nextAddress < addresses.length) {
        var postcode = addresses[nextAddress].postcode;;
        var html = addresses[nextAddress].html

        setTimeout('getAddress(\"'+postcode+'\",\"'+html+'\",theNext)', delay);
        nextAddress++;
    }
}
function getAddress(search, html, next) {
    usePointFromPostcode(search, html);
    next();
}

var geoCount = 0;
function usePointFromPostcode(address, html, callbackFunction) {
    localSearch.setSearchCompleteCallback(null, 
        function() {
            if (localSearch.results[0])
            {   
                geoCount++;

                var resultLat = localSearch.results[0].lat;
                var resultLng = localSearch.results[0].lng;
                var point = new GLatLng(resultLat,resultLng);

                var marker = new GMarker(point);
                GEvent.addListener(marker, 'click', function() {
                    marker.openInfoWindowHtml(html);
                });
                map.addOverlay(marker);
                bounds.extend(point);

                if(geoCount == addresses.length) {
                    setCenterToBounds();
                }
            }else{
                //console.info('Postcode not found!', address);
            }
        }); 

    localSearch.execute(address + ', UK');
}

function placeMarkerAtPoint(point, html)
{
    var marker = new GMarker(point,icon);
    map.addOverlay(marker);
}

function setCenterToBounds()
{
    map.setCenter(bounds.getCenter());
    map.setZoom(map.getBoundsZoomLevel(bounds));
    console.info('zoom',map.getBoundsZoomLevel(bounds));
}

function mapLoad() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById('map'));

        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        theNext();
    }

}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function addUnLoadEvent(func) {
    var oldonunload = window.onunload;
    if (typeof window.onunload != 'function') {
      window.onunload = func;
    } else {
      window.onunload = function() {
        oldonunload();
        func();
      }
    }
}
addLoadEvent(mapLoad);
addUnLoadEvent(GUnload);
")
?>

It only happens on some of the markers though. It is like it finds the postcode, puts the marker on, but then displays the wrong details for it

Answer 1

Ok, so it seems that the data coming back from Google, seemed to come back in the wrong order.

Changing the var delay = 100 to var delay = 200 seemed to fix this

Even though it made the map load a little bit slower