Door
Bryan Gerritse
op 27-08-2013 14:01
gewijzigd op 27-08-2013 14:03
1.611 views
Goedemiddag,
Ik ben bezig met een project van Googlemaps. Het gene wat er nog moet gebeuren is een filter functie voor markers. Denk hierbij aan categorieën. dit moet werken met behulp van checkboxen.
Ik heb al geprobeerd dat als de checkbox is aangevinkt dat het dan een query moet uitvoeren enkelt werkt dit niet. verder ben ik out of ideas
heeft een suggestie hoe ik dit kan realiseren aangezien de marker informatie zoals: lat,lng allemaal in een database vermeld staan.
Zeg eens concreet waarover je het hebt. Welke categorieën?
Hoe zit dat in de records?
1 categorie per record? Of een aantal categorie-velden per record (of koppeltabel?)...
Is er overlap? Kan het zijn dat 1 marker kan verdwijnen met meerdere check boxes?
... dat soort dingen
---
Geef ook de SQL string waarmee je die records haalt, met een "WHERE categorie='...'
Dat ik al wat zie wat voor naamgeving je gebruikt
De SQL export die ik gebruikte: ik veronderstel dat je ongeveer het zelfde hebt.
Controleer de velden, waar ik de query gebruik.
CREATE TABLE IF NOT EXISTS markers (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
lat float DEFAULT '0',
lng float DEFAULT '0',
type int(2) DEFAULT '0',
created timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO markers (id, name, lat, lng, type, created) VALUES
(NULL, 'plaats 1', 50.1, 4.1, 1, '2013-08-28 15:23:22'),
(NULL, 'plaats 2', 50.2, 4.2, 1, '2013-08-28 15:24:22'),
(NULL, 'plaats 3', 50.3, 4.3, 2, '2013-08-28 15:25:22'),
(NULL, 'plaats 4', 50.4, 4.4, 2, '2013-08-28 15:26:22'),
(NULL, 'plaats 5', 50.5, 4.5, 2, '2013-08-28 15:27:22'),
(NULL, 'plaats 6', 50.6, 4.6, 1, '2013-08-28 15:28:22'),
(NULL, 'plaats 7', 50.7, 4.7, 1, '2013-08-28 15:29:22');
index.php
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script>
<script>
$(document).ready(function() {
$('input.filter').click(function() {
loadMarkers(drawMarkers);
})
});
/**
* Loads the markers and calls a user-giver callback with the result
*/
function loadMarkers(callback) {
var data = $('#cat').serialize(); // looks at the checkboxes ...
$.ajax({
url: 'json.php',
dataType: 'JSON',
data: data,
success: callback
});
}
/**
* Google maps API
* @see https://developers.google.com/maps/documentation/javascript/overlays for the extra marker functions
*/
var map;
var markersArray = [];
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var somePlace = new google.maps.LatLng(50.5, 4.5);
var mapOptions = {
zoom: 8,
center: somePlace,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// load the markers with Ajax
loadMarkers(drawMarkers);
}
function drawMarkers(data) {
clearOverlays();
// draw the markers
for(var i=0; i<data.length; i++) {
addMarker(new google.maps.LatLng(data[i].lat, data[i].lng));
}
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
}
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
// Shows any overlays currently in the array
function showOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="map-canvas">Please wait for Google Maps to load</div>
<div id="controls">
<form id="cat">
<input name="type[]" class="filter" type="checkbox" value="1" checked="checked"> Type 1<br>
<input name="type[]" class="filter" type="checkbox" value="2" checked="checked"> Type 2<br>
</form>
</div>
</body>
</html>
json.php
<?php
// empty checkboxes? send an empty array back to Ajax
if (empty($_GET['type'])) {
echo '[]';
exit;
}
$type = isset($_GET['type']) ? $_GET['type'] : array();
// serialize types
for ($i=0; $i<count($type); $i++) {
$type[$i] = intval($type[$i]); // protection from injection
}
$con = mysql_connect('localhost', 'root', '');
mysql_select_db('phphulp');
$sql = sprintf("SELECT id, name, lat, lng, type FROM markers WHERE type IN (%s)", implode(',', $type));
$res = mysql_query($sql);
$rows = array();
while($row=mysql_fetch_assoc($res)) {
$rows[] = $row;
}
echo json_encode($rows);
?>
