Google maps Api Stockist (store locator)

By reading through many articles online ive managed to doctor a Google maps Api driven by a mysql database. I have it working to point where a user can enter their postcode or town and select a radius.

The javascript then refers to a php script which pulls back the results and throws them to xml. and then the api sets markers at each stockist point. The map will zoom and center on the center of all these markers fine.

I have one problem where if you enter a postcode/town and there is only 1 result it is zoomed so far in you get just a white box and the marker. The following is the script I use so if anyone can point out where to set the zoom level of there being just one result i would really appreciate it.

<script type="text/javascript">
//<![CDATA[
var map;
var geocoder;

function load() {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(54.622978,-2.592773), 5);
}
}

function searchLocations() {
var address = document.getElementById('addressInput').value + ' UK';
geocoder.getLatLng(address, function(latlng) {
if (!latlng) {
alert(address + ' not found');
} else {
searchLocationsNear(latlng);
}
});
}

function searchLocationsNear(center) {
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');
map.clearOverlays();

var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(54.622978,-2.592773), 5);
return;
}

var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute('name');
var address1 = markers[i].getAttribute('address1');
var address2 = markers[i].getAttribute('address2');
var town = markers[i].getAttribute('town');
var postcode = markers[i].getAttribute('postcode');
var telephone = markers[i].getAttribute('telephone');
var distance = parseFloat(markers[i].getAttribute('distance'));
var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
parseFloat(markers[i].getAttribute('lng')));

var marker = createMarker(point, name, address1, address2, town, postcode, telephone);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, town, distance);
sidebar.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}

function createMarker(point, name, address1, address2, town, postcode, telephone) {
var marker = new GMarker(point);
var html = '<div id="map-hover"><b>' + name + '</b> <br/>'
+ address1 + '<br />'
+ address2 + '<br />'
+ town + '<br />'
+ postcode + '<br />'
+ telephone + '</div>';
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

function createSidebarEntry(marker, name, town, distance) {
var div = document.createElement('div');
var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + town;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
//]]>
</script>

The zoom level is set by the setCenter call:

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds))


So simply set a maximum zoom level of your choice.


var zoom = map.getBoundsZoomLevel(bounds);
if ( zoom > 15 ) zoom = 15; // or whatever number you decide upon
map.setCenter(bounds.getCenter(), zoom);

thanks for your reply.

Im not sure I explained my problem clearly. The zoomlevel is fine and works ok as long as there is more than 1 result pulled back from the search. the problem only lies with if there is only 1 result which is quite often as we have some fairly remote areas in the UK.

I was thinking i need some code to say if results = 1 then set marker point and zoom to this else carry on as normal. unless there is an easier fix.

So just change this bit:

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

to something like:

if (markers.length > 1){
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}else{
map.setCenter(bounds.getCenter(), 5); // or whatever zoom level you want
}

Did you *TRY* the code I gave????

I'm pretty sure it does the same thing that Spudhead's code will do.

You said that the zoom level that was automatically chosen by
map.getBoundsZoomLevel(bounds)
wat too high. So my solution was to simply *LIMIT* that value to some maximum of your choice.

Heck, my solution would even work if, say, there were two stores within a KM or two of each other. In that situation, the zoom level still might be higher than you would like. So my answer would limit it to whatever you think is an acceptable max level.

Spudhead's answer only changes the zoom level when there is exactly one store found.

Which, of course, might be all you need. But isn't mine a more general solution?

If you still like Spudhead's answer better, it can be simplified:

map.setCenter( bounds.getCenter(),
markers.length > 1 ? map.getBoundsZoomLevel(bounds) : 12
);

Did you *TRY* the code I gave????

I'm pretty sure it does the same thing that Spudhead's code will do.

You said that the zoom level that was automatically chosen by
map.getBoundsZoomLevel(bounds)
wat too high. So my solution was to simply *LIMIT* that value to some maximum of your choice.

Heck, my solution would even work if, say, there were two stores within a KM or two of each other. In that situation, the zoom level still might be higher than you would like. So my answer would limit it to whatever you think is an acceptable max level.

Spudhead's answer only changes the zoom level when there is exactly one store found.

Which, of course, might be all you need. But isn't mine a more general solution?

that is exactly what i was after. i only had the problem when there was only one store. sorry i may not of explained properly. thank you both for your help.