Guten Tag, Alle
Ich habe eine PHP-Datei zu Anzeigen von den Markierungen auf der Google-Karte geschrieben.
Ziel:
In der Datei sollte eine js/Jquery Funktion integriert werden, die die Markierungen durch Wahl von Checkbox ein und ausgeblendet.
Bis jetzt:
>> jquery.min.js eingebunden; [JA]
>> Die Geo-Daten (Lon, Lat, auch andere Eigenschaften) werden aus DB-Tabelle geholt und in ein 2d-Array gespeichert; [JA]
>> Checkboxes fertig; [JA]
>> JS-Funktion: Das Geo-Daten-Array in For-Schleife durchlaufen und die Daten für Ein/Ausblenden extra in ein Array speichern. [JA]
>> Markierungen auf der Karte anzeigen. [NEIN]
>> Ein/Ausblenden [NEIN]
Code: Es tut mir leid, dass mein Code unschön aussieht...
JS: ab Zeile 322
Bilder:
Weiß jemand wie ich das Problem lösen könnte?
Vielen Dank!!!
LG, Carvin
Ich habe eine PHP-Datei zu Anzeigen von den Markierungen auf der Google-Karte geschrieben.
Ziel:
In der Datei sollte eine js/Jquery Funktion integriert werden, die die Markierungen durch Wahl von Checkbox ein und ausgeblendet.
Bis jetzt:
>> jquery.min.js eingebunden; [JA]
>> Die Geo-Daten (Lon, Lat, auch andere Eigenschaften) werden aus DB-Tabelle geholt und in ein 2d-Array gespeichert; [JA]
>> Checkboxes fertig; [JA]
>> JS-Funktion: Das Geo-Daten-Array in For-Schleife durchlaufen und die Daten für Ein/Ausblenden extra in ein Array speichern. [JA]
>> Markierungen auf der Karte anzeigen. [NEIN]
>> Ein/Ausblenden [NEIN]
Code: Es tut mir leid, dass mein Code unschön aussieht...
JS: ab Zeile 322
PHP-Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="../css/kg_system.css" />
<title>Kunstgriff - Karte</title>
<?php session_start();
$kg_kstl_map_array = array();
$kg_all_kstl_array_for_map = array();
$kg_all_kstl_name_array_map = array();
$kg_kstl_map_img = "";
$kg_gefd_geo = 0;
//Datenbank verbinden.
$kg_db_con = mysql_connect("mysql.xxx.de", "xxx", "xxx") or die("unable to connect to the database");
$sql_kstl_map_all_plz = "SELECT PLZ from Kunstgriff_Kuenstler where PLZ <> ''";
//echo "SQL-I: $sql_kstl_map_all_plz <br />";
//Datenbank auswählen
mysql_select_db("xxx");
//mysql_select_db("kunstgriff");
mysql_query("SET NAMES 'utf8'");
mysql_query("SET CHARACTER SET 'utf8'");
//Anfragen durchführen und Ergebnis abspeichern
$res_kstl_all_plz = mysql_query($sql_kstl_map_all_plz, $kg_db_con);
//Zeilen zurückliefern
$rows_kstl_all_plz = mysql_num_rows($res_kstl_all_plz);
if($rows_kstl_all_plz >0){
for($i = 0; $i < $rows_kstl_all_plz; $i++){
$kstl_map_plz = mysql_result($res_kstl_all_plz, $i, "PLZ");
$kstl_map_plz = strip_tags($kstl_map_plz);
//PLZ leer?
$sql_kstl_map_info = "SELECT
Kunstgriff_Kuenstler.*,
coo.loc_id,
coo.lon,
coo.lat
FROM Kunstgriff_Kuenstler
INNER JOIN geodb_textdata AS textdata
ON
textdata.text_val = Kunstgriff_Kuenstler.PLZ
AND textdata.text_type = 500300000
INNER JOIN geodb_coordinates AS coo
ON textdata.loc_id = coo.loc_id where PLZ = '$kstl_map_plz' group by Kunstgriff_Kuenstler.PLZ";
//$kstl_map_kat = mysql_result($res_kstl_erwsrch, $i, "Kategorie");
//$kstl_map_kat = strip_tags($kstl_map_kat);
//$_SESSION["edit_kstl_vorname"] = $kstl_qs_vorname;
//Datenbank auswählen
mysql_select_db("xxx");
//mysql_select_db("kunstgriff");
mysql_query("SET NAMES 'utf8'");
mysql_query("SET CHARACTER SET 'utf8'");
$res_kstl_map_info = mysql_query($sql_kstl_map_info, $kg_db_con);
//Zeilen zurückliefern
$rows_kstl_map_info = mysql_num_rows($res_kstl_map_info);
//echo "ANZAHL: $rows_kstl_map_info <br />";
//Info pro PLZ (jeder Korrdinaten)
if($rows_kstl_map_info > 0){
for($j=0; $j<$rows_kstl_map_info; $j++){
$kstl_map_vorn = mysql_result($res_kstl_map_info, $j, "Vorname");
//$kstl_map_vorn = strip_tags($kstl_map_vorn);
$kstl_map_n = mysql_result($res_kstl_map_info, $j, "Name");
//$kstl_map_n = strip_tags($kstl_map_n);
$kstl_name_karte = $kstl_map_vorn . "," . $kstl_map_n;
$kstl_map_kat = mysql_result($res_kstl_map_info, $j, "Kategorie");
//$kstl_map_kat = strip_tags($kstl_map_kat);
$kstl_map_subkat = mysql_result($res_kstl_map_info, $j, "Subkategrie");
//$kstl_map_subkat = strip_tags($kstl_map_subkat);
if($kstl_map_kat == "Sänger"){
if($kstl_map_subkat == "Sopran"){
$kg_kstl_map_img = "museum_art_rosa.png";
}elseif($kstl_map_subkat == "Mezzo/Alt"){
$kg_kstl_map_img = "museum_art_hotpink.png";
}elseif($kstl_map_subkat == "Countertenor"){
$kg_kstl_map_img = "museum_art_hotpink.png";
}elseif($kstl_map_subkat == "Tenor"){
$kg_kstl_map_img = "museum_art_rot.png";
}elseif($kstl_map_subkat == "Bariton"){
$kg_kstl_map_img = "museum_art_bordeaux.png";
}elseif($kstl_map_subkat == "Bass-Bariton/Bass"){
$kg_kstl_map_img = "museum_art_braun.png";
}else{
$kg_kstl_map_img = "museum_art_gainsboro.png";
}
}elseif($kstl_map_kat == "Ensemble"){
if($kstl_map_subkat == "Gesang"){
$kg_kstl_map_img = "museum_art_violett.png";
}elseif($kstl_map_subkat == "Theater"){
$kg_kstl_map_img = "museum_art_hell gelb.png";
}elseif($kstl_map_subkat == "Instrumental"){
$kg_kstl_map_img = "museum_art_dunkelblau.png";
}else{
$kg_kstl_map_img = "museum_art_gainsboro.png";
}
}elseif($kstl_map_kat == "Pianisten"){
$kg_kstl_map_img = "museum_art_schwarz.png";
}elseif($kstl_map_kat == "Solo-Instrumentalisten"){
$kg_kstl_map_img = "museum_art_hellblau.png";
}elseif($kstl_map_kat == "Schauspieler"){
$kg_kstl_map_img = "museum_art_hellgrau.png";
}else{
$kg_kstl_map_img = "museum_art_gainsboro.png";
}
$kg_kstl_map_img_pfad = "img/".$kg_kstl_map_img;
$kstl_map_lat = mysql_result($res_kstl_map_info, $j, "lat");
$kstl_map_lat = strip_tags($kstl_map_lat);
$kstl_map_lon = mysql_result($res_kstl_map_info, $j, "lon");
$kstl_map_lon = strip_tags($kstl_map_lon);
$kg_all_kstl_name_array_map[] = $kstl_name_karte;
//echo "Kuesntler: ". $kstl_name_karte . ", Kategorie: ".$kstl_map_kat. ", Subkategorie: ".$kstl_map_subkat.", Lat: ".$kstl_map_lat.", Lon: ".$kstl_map_lon. ", Marker: ". $kg_kstl_map_img_pfad ."<br /><br />";
$kg_kstl_map_array[] = array("$kstl_name_karte", "$kstl_map_kat", "$kstl_map_subkat", $kstl_map_lat, $kstl_map_lon, "$kg_kstl_map_img_pfad");
}
}else{
//echo "Keine Geodaten - PLZ <br />";
}
}
/*
echo "<pre>";
print_r($kg_kstl_map_array);
echo "</pre>";
*/
if(count($kg_kstl_map_array) >0){
$kg_gefd_geo = 1;
}else{
$kg_gefd_geo = 0;
}
}else{
echo "Keinen PLZ gespeichert<br />";
}
?>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
</script>
</head>
<body>
<?php
$kg_admin_login = $_SESSION['login_succ'];
$kg_admin_lg = $_GET["adm_login_succ"];
//echo "$kg_admin_lg <br />";
//Zeit mit der Admin eingeloggt hat
$kg_admin_logged_time = $_SESSION["admin_log_time"];
//Akuelle Zeit
$kg_admin_now = time();
if($kg_admin_login == 0){
echo "Sie sind noch nicht eingeloggt, <br /><a href='../blogin.php' title='einloggen'>back to login</a>";
}else{
//Wenn 120 Minuten überschritten wird, ausloggen.
if(($kg_admin_now - $kg_admin_logged_time) > 7200){
echo "<br /> TIME OUT <br />";
echo "Loggen Sie bitte nochmal ein, <br /><a href='../blogin.php' title='einloggen'>back to login</a>";
}else{
?>
<div id="kg_sys_body">
<div id="kg_sys_core_home">
<div style="width: 870px; height: 200px; margin: auto; margin-left: auto; margin-right: auto; "><a href="http://www.kunstgriff-agentur.de"><div id="kg_sys_top"></div></a></div>
<div id="kg_sys_content">
<div id="kg_sys_menu">
<a href="kunstgriff_system_kalender.php" title="online-Kalender"><div id="kg_sys_menu_kal">Kalender</div></a>
<div id="kg_sys_menu_kuenstler">
<a href="kg_kuenstler_start.php">Künstler</a><br />
<a href="kg_kstl_crt.php">Künstler anlegen</a><br />
<a href="kg_new_kuenstler.php">Neue Künstler</a>
<span style="color:#F00;"><?php require "kg_updated.php" ?></span>
</div>
<div id="kg_sys_menu_vas"><a href="kg_verst_srch.php">Veranstalter</a><br />
<a href="kg_crt_verst.php">Veranstalter anlegen</a>
</div>
<div id="kg_sys_menu_karte"><a href="kg_system_card.php">Karte</a></div>
<div id="kg_sys_menu_videe"><a href="kg_veranst_idee_srch.php">Veranstaltungsideen</a></div>
<a href="kg_veranst_idee_crt_n.php">Ideen anlegen</a><br />
<div id="kg_sys_menu_todo"><a href="kg_crt_todolist.php">ToDo</a></div>
<div id="kg_sys_menu_gdriv"><a href="https://drive.google.com" title="drive.google.com" target="_blank">Google Drive</a></div>
<div id="kg_sys_menu_ph"></div>
<div id="kg_sys_menu_ph"><a href="http://www.php.de/blogout.php">Logout</a></div>
</div>
<div id="kg_sys_info"> Karte<br /><br /><br />
<div id="kg_map_style"><div id="kg_map_view" style="width:460px;height:560px; margin-left:10px; float:left;"></div>
<div id="kg_map_marker_checkbox" style="width:170px; float:left; margin-left:5px; text-align:left; font-size:12px;"><span style="font-size:12px; font-weight:bold;">Ein- und ausblenden</span><br /><br />
<div style="float:left;"><span style=" font-weight:bold;"><br />Kategorien:</span><br /><br />
<input type="checkbox" name="kat" value="Chöre" checked=""/>Chöre(Weiß)<br />
<input type="checkbox" name="kat" value="Festival" checked=""/>Festival(Orange)<br />
<input type="checkbox" name="kat" value="Gastronomie" checked=""/>Gastronomie(hellgrün)<br />
<input type="checkbox" name="kat" value="Schule/Unis" checked=""/>Schule/Unis(dunkelgrün)<br />
<input type="checkbox" name="kat" value="Theater" checked=""/>Theater(dunkelgelb)<br />
<input type="checkbox" name="kat" value="Benefiz" checked=""/>Benefiz(dunkel grau)<br />
<input type="checkbox" name="kat" value="Saenger" checked=""/>Sänger<br />
<input type="checkbox" name="kat" value="Pianisten" checked=""/>Pianisten(Schwarz)<br />
<input type="checkbox" name="kat" value="Ensemble" checked=""/>Ensemble<br />
<input type="checkbox" name="kat" value="Schauspieler" checked=""/>Schauspieler(Orange)<br />
</div>
<div style="float:left;"><span style=" font-weight:bold;"><br />Subkategorien:</span><br /><br />
<input type="checkbox" name="subkat" value="Sopran" checked=""/>Sopran(Rosa)<br />
<input type="checkbox" name="subkat" value="Mezzo/Alt" checked=""/>Mezzo/Alt(Hotpink)<br />
<input type="checkbox" name="subkat" value="Countertenor" checked=""/>Countertenor(Pink)<br />
<input type="checkbox" name="subkat" value="Tenor" checked=""/>Tenor(Rot)<br />
<input type="checkbox" name="subkat" value="Bariton" checked=""/>Bariton(Bordeaux)<br />
<input type="checkbox" name="subkat" value="Bass-Bariton/Bass" checked=""/>Bass-Bariton/Bass(Braun)<br />
<input type="checkbox" name="subkat" value="Gesang" checked=""/>Gesang(Violett)<br />
<input type="checkbox" name="subkat" value="Theater" checked=""/>Theater(Hell gelb)<br />
<input type="checkbox" name="subkat" value="Instrumental" checked=""/>Instrumental(Dunkelblau)<br />
</div>
<br />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
var kstl_markersmap = [];
var kstl_markers = [];
var markersmap = [];
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(50.95, 10.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('kg_map_view'), mapOptions);
var geoArray = <?php echo json_encode($kg_kstl_map_array); ?>;
var kstl_nameArray = <?php echo json_encode($kg_all_kstl_name_array_map); ?>;
var geo_pos = geoArray.length;
//document.writeln ('Js-2, ' + geo_pos);
//document.write ('<br>');
for(var j = 0; j < geo_pos; j++){
var myLatLng = new google.maps.LatLng(geoArray[j][3], geoArray[j][4]);
var kg_icon = geoArray[j][5];
var infohtml = '<div style=\'text-align: center; font-size:13px; width:160px; height:30px;\'><center><b>' + geoArray[j][0] + '</b></center></div>';
var infowindow = new google.maps.InfoWindow({ content: infohtml + '<br />'});
// document.write ( 'j: ' + j + ' >> ');
// document.write ('<br>');
var kstl_geo_data_sgl_lon = geoArray[j][4];
var kstl_geo_data_sgl_lat = geoArray[j][3];
var kstl_geo_data_sgl_name = "'"+geoArray[j][0]+"'";
var kstl_geo_data_sgl_kat = "'"+geoArray[j][1]+"'";
var kstl_geo_data_sgl_subkat = "'"+geoArray[j][2]+"'";
var kg_icon_pfad = "'"+kg_icon+"'";
kstl_markers[j] = {long: kstl_geo_data_sgl_lon, lat: kstl_geo_data_sgl_lat, 'name':[kstl_geo_data_sgl_name], 'kat':[kstl_geo_data_sgl_kat], 'subkat':[kstl_geo_data_sgl_subkat], 'img':[kg_icon_pfad]};
//document.write ( 'j: ' + j + ' >> Geo-Daten: ' + kstl_geo_data_sgl_name + ' >> ' + kstl_geo_data_sgl_kat + ' >> ');
//document.write ('<br>');
//document.write ("\n INFO Markers: " + kstl_markers[j]['name'] + " || " + kstl_markers[j]['kat'] + " || " + kstl_markers[j]['img']);
//document.write ('<br>');
}
//document.write ("\n INFO Markers Länge: " + kstl_markers.length);
//document.write ('<br>');
$.each(kstl_markers, function(index, m) {
markersmap[index] = new google.maps.Marker({
position: new google.maps.LatLng(m.long,m.lat),
map: map
icon: m.img
});
});
jQuery.get(markersmap, {}, function() {
jQuery().find("marker").each(function() {
var markersmap = jQuery(this);
var latlng = new google.maps.LatLng(
parseFloat(markersmap.attr("lat")),
parseFloat(markersmap.attr("long"))
);
var marker = new google.maps.Marker({position: latlng, map: map});
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</div>
</div>
</div>
<div id="kg_sys_foot"></div>
</div>
</div>
<!-- <div id="map-canvas" style="width: 560px; height: 450px;"></div> -->
<?php
}
}
?>
</body>
</html>
Weiß jemand wie ich das Problem lösen könnte?
Vielen Dank!!!
LG, Carvin
Kommentar