Hi All,
I have successfully got the Store Locator Function (http://
code.google.com/apis/maps/articles/phpsqlsearch.html) working fine
even though I am only a beginner at SQL and javascript. However I am
stuck on 2 things:
1 - I need the address info that is shown when you click on a marker
to be changed from one continuous line, to separate lines.
Each part of the address is seperated with a comma. So I have thought
about setting up a search and replace so that a comma ',' can be
replaced with ',<br>'. If so how would I do this?
Or I could set up the address in the database to have seperate fields
for address but I am worried about the knock-on effects it would have
in terms of the address distance calculations. Suggestions?
2 - I would like to change the color of the text for the 'name' of the
store in the sidebar. But again after numerous attempts I seem unable
to format this.
Here is a copy of the Javascript I am using.
var map;
var geocoder;
function load() {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
map = new GMap2(document.getElementById('map'));
//map.setMapType(G_HYBRID_MAP);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl3D());
map.setCenter(new GLatLng(53.852527, -2.647461), 6);
}}
function searchLocations() {
var address = document.getElementById('addressInput').value;
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 = 'php/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(53.852527, -2.647461), 6);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute('name');
var address = markers[i].getAttribute('address');
var tel = markers[i].getAttribute('tel');
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, address, tel);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address,
tel, distance);
sidebar.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel
(bounds));
// svOverlay = new GStreetviewOverlay();
//map.addOverlay(svOverlay);
});
}
function createMarker(point, name, address, tel) {
var marker = new GMarker(point);
var html = '<b>' + name + '</b> <br/>' + address + '<br/>' +
tel;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function createSidebarEntry(marker, name, address, tel, distance)
{
var div = document.createElement('div');
var html = '<b>' + name + '</b> (' + distance.toFixed(1) + '
miles)<br/>' + address + '<br/>' + tel;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
div.style.paddingLeft = '5px';
div.style.paddingRight = '5px';
div.style.paddingTop = '5px';
div.style.paddingBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#222';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#000';
});
return div;
}
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Maps-API?hl=en
-~----------~----~----~----~------~----~------~--~---
