I had a good answer, but the accursed Google Groups interface ate it
8-(
I'm not sure what you mean here?
I have trouble understand your technic explanation and maybe it's because my
language is danish and that this is NOT easy to understand, sorry.
I have made some inprovements on another testmap
http://www.tinemuller.dk/googlemap/tutorial/storelocator/library_phpsqlsearch_map.htm
but there is still problems. If you look in the code you can see that I have
tried a lot of doctype and charset. In my table on my host is says
"utf8_danish_ci" but try search for "Smakkegårdsvej 112" and "1" and you
will see the problem and then try with "3" and you will see an error message
in Firebug.
I have ask'ed Pamelas who made the tutorial here
http://code.google.com/support/bin/answer.py?answer=87134&topic=11369&ctx=sibling
to show us the code to use when you use foreign language as for instance
danish but haven't heard anything from here yet.
If you would help me some more I could send you my files to you privately
and maybe you could test on your host also using "utf8_danish_ci" to see if
YOU can get it to work, please?
library_phpsqlsearch_genxml.php
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>-->
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tine - Google Maps AJAX + MySQL/PHP Example</title>
<script
src="
http://maps.google.com/maps?file=ap...70w75ZW5bLNFA531BSqFdAlOuedN5j5p0Nzmek2tUeZkA"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var geocoder;
var iconBlue=new GIcon();
iconBlue.image='
http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow='
http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize=new GSize(12, 20);
iconBlue.shadowSize=new GSize(22, 20);
iconBlue.iconAnchor=new GPoint(6, 20);
iconBlue.infoWindowAnchor=new GPoint(5, 1);
var iconRed=new GIcon();
iconRed.image='
http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow='
http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize=new GSize(12, 20);
iconRed.shadowSize=new GSize(22, 20);
iconRed.iconAnchor=new GPoint(6, 20);
iconRed.infoWindowAnchor=new GPoint(5, 1);
var iconYellow=new GIcon();
iconYellow.image='
http://labs.google.com/ridefinder/images/mm_20_yellow.png';
iconYellow.shadow='
http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconYellow.iconSize=new GSize(12, 20);
iconYellow.shadowSize=new GSize(22, 20);
iconYellow.iconAnchor=new GPoint(6, 20);
iconYellow.infoWindowAnchor=new GPoint(5, 1);
var customIcons = [];
customIcons["SH"]=iconBlue;
customIcons["SF"]=iconRed;
customIcons["SB"]=iconYellow;
customIcons["FH"]=iconBlue;
customIcons["FF"]=iconRed;
customIcons["FB"]=iconYellow;
customIcons["JH"]=iconBlue;
customIcons["JF"]=iconRed;
customIcons["JB"]=iconYellow;
customIcons["OH"]=iconBlue;
customIcons["OF"]=iconRed;
customIcons["OB"]=iconYellow;
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(40, -100), 4);
map.setCenter(new GLatLng(56.26392, 9.501785), 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 = 'library_phpsqlsearch_genxml.php?lat=' + center.lat() +
'&lng=' + center.lng() + '&radius=' + radius; alert(searchUrl)
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(40, -100), 4);
map.setCenter(new GLatLng(56.26392, 9.501785), 6);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var name = markers
.getAttribute('name');
var address = markers.getAttribute('address');
var icon_type = markers.getAttribute('icon_type');
var distance = parseFloat(markers.getAttribute('distance'));
var point = new GLatLng(parseFloat(markers.getAttribute('lat')),
parseFloat(markers.getAttribute('lng')));
var marker = createMarker(point, name, address, icon_type);
//var marker = createMarker(point, name, address);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address,
distance);
sidebar.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}
function createMarker(point, name, address, icon_type) {
var marker = new GMarker(point, customIcons[icon_type]);
GLog.write(icon_type);
//function createMarker(point, name, address) {
//var marker = new GMarker(point);
//GLog.write(icon_type);
//var marker = new GMarker(point, {icon:customIcons[type]});
var html = '<b>' + name + '</b> <br/>' + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function createSidebarEntry(marker, name, address, distance) {
var div = document.createElement('div');
var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' +
address;
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>
</head>
<body onload="load()" onunload="GUnload()">
Address: <input type="text" id="addressInput"/>
Radius: <select id="radiusSelect">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="25">25</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<input type="button" onclick="searchLocations()" value="Search
Locations"/>
<br/>
<br/>
<div style="width:600px; font-family:Arial,
sans-serif; font-size:11px; border:1px solid black">
<table>
<tbody>
<tr id="cm_mapTR">
<td width="200" valign="top"> <div id="sidebar" style="overflow:
auto; height: 400px; font-size: 11px; color: #000"></div>
</td>
<!-- <td> <div id="map" style="overflow: hidden; width:400px;
height:400px"></div> </td> -->
<td> <div id="map" style="border: 1px solid black; overflow: hidden;
width:400px; height:400px"></div> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
/Tine