XML, mysql og danske bogstaver
Jeg kan ikke få denne testside http://www.tinemuller.dk/googlemap/tutorial/storelocator/library_phpsqlsearch_map.htm til at virke og er næsten sikker på at det er fordi der er danske bogstaver i databasen og ved ikke hvordan jeg skal rette nedenstående koder som er taget fra en tutorial http://code.google.com/support/bin/answer.py?answer=87134&topic=11369&ctx=sibling, hvor de ikke har tænkt på danske bogstaver. Jeg har fået en testside til at virke med en database, hvor det IKKE var danske bogstaver.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">
<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=api&v=2&key=ABQIAAAAmYYoLeRyazVGDeFwMH_5chRBa9hFh1JQE70w75ZW5bLNFA531BSqFdAlOuedN5j5p0Nzmek2tUeZkA"
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[i].getAttribute('name');
var address = markers[i].getAttribute('address');
var icon_type = markers[i].getAttribute('icon_type');
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, icon_type);
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);
//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="25" selected>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>
