マーカー付きの地図には、PHP と MySQL を使用した Maps API に関するこの記事を使用しました: https://developers.google.com/maps/articles/phpsqlajax_v3?hl=nl-NL
すべてのレコードではなく、フォームを使用してデータベース内の特定のレコードを検索するには、次のコードで何を変更すればよいですか? 関数 DownloadURL() は、同様に以下の phpsqlajax_genxml4.php を使用します。このコードには、クエリ $query = "SELECT * FROM maps WHERE vervaldatum > $vandaag"; が含まれています。これはほとんどすべてを選択しますが、選択を行いたいです。のように: WHERE heeft = 'zaden'; そして、この「ざでん」が検索文字列としてフォームに入力されました。
<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GroenteRuilen - Zoeken</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="groente, ruilen, moestuin, tuin, oogst, ruil, permacultuur, eco, ruilhandel, organic, kas, volkstuin"/>
<meta name="description" content="Platform voor het ruilen van de oogst uit je moestuin."/>
<link rel="shortcut icon" href="images/favicon.ico" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
//<![CDATA[
var shadow = {
url: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png',
size: new google.maps.Size(37, 32),
origin: new google.maps.Point(5,5),
anchor: new google.maps.Point(0,20)
};
var customIcons = {
restaurant: {
icon: 'images/markerWortel.png',
shadow: shadow
},
bar: {
icon: 'images/markerWortel.png',
shadow: shadow
}
};
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(52.6, 7.0),
zoom: 7,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("phpsqlajax_genxml4.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var heeft = markers[i].getAttribute("heeft");
var wil = markers[i].getAttribute("wil");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b><br/><font color='red'>" + address + "</font><br/>" + "<font size='-1.5'>heeft: " + heeft + "<br/>" + "wil: " + wil + "</font>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
google.maps.event.addDomListener(window, 'load', initialize);
//]]>
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36447642-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="topPanel">
<ul>
<li><a href="contact.php">Contact</a></li>
<li class='active'>Zoeken</li>
<li><a href="meedoen.php">Ruilen</a></li>
<li><a href="uitleg.html">Uitleg</a></li>
<li><a href='index.html'>Home</a></li>
</ul>
<a href="index.html">
<div id="logo"><img src="images/logoGroenteRuilenWortel300.png" title="Home" alt="Home" width="300" height="89" border="0" /></a></div>
<div id="headerPanelfast">
<div id="map" style="width: 762px; height: 264px"></div>
</div>
</div>
<div id="bodyPanel6">
<div id="link_kaart"><a href="/kaart.html" target="_blank">Klik hier voor grotere kaart</a></div>
<h2>Zoeken</h2>
<p>Je kunt op de kaart kijken of er wat te ruilen aangemeld is maar dat is lastig als er veel bij jou in de buurt is. Je moet steeds klikken op een worteltje. Als je gericht wilt zoeken kan je hier opgeven wat je zoekt. Je mag ook een deel van een woord invullen. Als je bijvoorbeeld artisjokkenzaden zoekt mag je best invullen artis.
Is het niet te vinden dan kan je het beste zelf opgeven dat je iets zoekt via <span><a href="meedoen.php">Ruilen</a></span> en geef aan wat je wilt (en zelf hebt). Succes! En eet smakelijk!</p>
<p class="dotline"><img src="images/blank.gif" alt="" width="1" height="1" /></p>
<div id="centreer">
<form method="POST" action="zoeken2.php" >
<TABLE CELLSPACING="2" CELLPADDING="2" BORDER="0">
Zoekwoord: <input type="text" name="zoekwoord" />
<input type="submit" name="submit" value="Zoek" />
</TABLE>
</form>
</div>
</div>
<div id="footerPanel">
<div id="footerbodyPanel">
<ul>
<li><a href="#">Home</a>| </li>
<li><a href="wiezijnwij.html">Wie zijn wij</a> | </li>
<li><a href="disclaimer.html">Disclaimer</a>| </li>
<li><a href="zoeken.php">Links</a> | </li>
<li><a href="contact.php">Contact</a> </li>
</ul>
<p class="copyright">© 2013 GroenteRuilen All rights reserved</p>
<div id="footerhtmlPanel"><a href="http://validator.w3.org/check?uri=referer" target="_blank">html</a></div>
<div id="footercssPanel"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">css</a></div>
<div id="footertwitterPanel"><a href="http://twitter.com/GroenteRuilen/" target="_blank"></a></div>
<div id="footerpinterestPanel"><a href="http://pinterest.com/groenteruilen/" target="_blank"></a></div>
</div>
</div>
</body>
</html>
これは phpsqlajax_genxml4.php です。
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
$vandaag = date("Ymd");
// Alleen de markers tonen met een vervaldatum in de toekomt:
$query = "SELECT * FROM markers WHERE vervaldatum > $vandaag";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name",$row['name']);
$newnode->setAttribute("address", $row['address']);
$newnode->setAttribute("heeft", $row['heeft']);
$newnode->setAttribute("wil", $row['wil']);
$newnode->setAttribute("extra", $row['extra']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
$newnode->setAttribute("type", $row['type']);
}
echo $dom->saveXML();
?>