Problem: Ein / Ausblenden von Markers von Google-Map innerhalb einer PHP-Datei?

hanow

Mitglied
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:

JS: ab Zeile 322


PHP:
<!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 />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="kg_kstl_crt.php">Künstler anlegen</a><br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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="../blogout.php">Logout</a></div>
                     
            </div>
            <div id="kg_sys_info">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>


Bilder:

8obqtt6valj6.png


Weiß jemand wie ich das Problem lösen könnte?

Vielen Dank!!!

LG, Carvin
 
Zuletzt bearbeitet:
Zurück