Ankündigung

Einklappen
Keine Ankündigung bisher.

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

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

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

    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

    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 />
                        &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="http://www.php.de/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:



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

    Vielen Dank!!!

    LG, Carvin

  • #2
    aber definitiv, könntest den debugger deines browser benützen, der sagt dir sicher was phase ist.
    sag mal sind das deine zugangdaten da oben im script?

    Kommentar


    • #3
      Autsch.

      -----

      Die älteste der drei mysql-Erweiterungen ist veraltet (mysql_*-Funktionen, nicht die MySQL-Datenbank) und wird in den kommenden Versionen aus PHP entfernt. Aktuell wirft sie schon E_DEPRECATED-Fehler bei einer Verbindung zur Datenbank. Des Weiteren stehen dir sehr viele tolle Features von mysql mit diesen Funktionen nicht zur Verfügung! Weiterführende Links:
      Choosing an API
      Warum man mysql* generell nicht (mehr) nutzen sollte.
      Wie man von mysql* auf PDO umsteigt
      Wissenswertes zum Thema SQL-Injection

      -----

      Es ist nicht mehr zeitgemäß, Anwendungslogik und Ausgabelogik zu kombinieren. Dadurch leidet die Wartbarkeit beider Komponenten. In der Regel folgen in PHP geschriebene Applikationen daher dem EVA-Muster, welches einen leicht nachvollziehbaren Datenfluss ermöglicht, besser wartbare Applikationen erzeugt und leichter von anderen Entwicklern verstanden wird. In der PHP-Welt hat sich hierauf aufbauend das (häufig falsch interpretierte) MVC-Muster [1] etabliert (siehe auch DCI oder ADR). Ganz einfach gesagt handelt es sich bei dem EVA-Muster um eine Aufteilung der Aktionen "Auswertung der Eingabeparameter", "Verarbeitung der damit verknüpften Anwendungslogik" und "Erzeugung und Übermittlung der Ausgabe". Oder vereinfacht: Erst Daten sammeln, dann daraus die Darstellung erzeugen und ausgeben. Die Verwendung einer Templateengine (mit Layout-Support) ist dafür Empfehlenswert - jedoch aber keine Voraussetzung.

      Kommentar


      • #4
        Hat jemand eine Idee? Danke ...

        Kommentar


        • #5
          Zitat von hanow_de Beitrag anzeigen
          Ziel:
          In der Datei sollte eine js/Jquery Funktion integriert werden, die die Markierungen durch Wahl von Checkbox ein und ausgeblendet.
          Zitat von hanow_de Beitrag anzeigen
          Weiß jemand wie ich das Problem lösen könnte?
          Du hast es doch schon selbst geschrieben. Wie sieht denn dein Lösungsansatz aus? (btw: http://www.php.de/php-einsteiger/675...sumfragen.html)

          My advice: Alles neu schreiben und die Hinweise berücksichtigen, die Moma und ich gepostet haben. Das Problem ist an sich recht trivial.

          Kommentar


          • #6
            Und noch ein Tipp, schau dir mal leaflet.js an. Das ist teilweise um einiges angenehmer als die Google Maps Api.
            Current Projects: http://www.welten-buch.de, http://neu.zooadoo.de

            Kommentar


            • #7
              hey rkr krank oder so?
              jetzt muss ich schon deine links posten
              http://www.php.de/php-fortgeschritte...-v3-mysql.html

              Kommentar


              • #8
                Vielen Dank für die Antworten, ich würde die Regeln von diesem Forum noch genauer lesen und mein Thema später besser anpassen...

                Ich wollte erst noch bei meinem Code bleiben, und möchte gern wissen, warum wird nichts ausgegeben, wenn ich in function initialize() in der For-Schleife dem neuen Array für Geo-Daten zuweise, und dann außerhalb der Schleife die Markierungen auf der Karte hinzufüge?

                Kommentar


                • #9
                  Wie sollen wir dir das sagen?
                  Wir können deinen Code nicht ausführen. Ich kenne die GoogleMaps-API leider nicht auswendig.

                  https://developers.google.com/maps/d...script/markers

                  Kommentar


                  • #10
                    Hast du deinen Javascript-Code schon mal debuggt mit der konsole oder firebug etc.? Bei JS heißt nichts passiert so gut wie immer, dass es nen Fehler gibt, den man in der Konsole sehen kann.
                    Current Projects: http://www.welten-buch.de, http://neu.zooadoo.de

                    Kommentar


                    • #11
                      Hi, Geromel

                      Danke für die Antwort, ja, wenn ich die Positionen ohne Aufruf der Datenbank so festlege, dann funktioniert der JS-Code wunderbar auf dem Browser.

                      Folgende Funktion (einfach JS-Code für Ein/Ausblenden von Markierungen mit Checkboxes) möchte ich auch mit Datenbank haben, also Geo-Daten aus DB auslesen dann in JS speichern, dann kann ich die Markierungen mit Checkboxes ein oder ausblenden...

                      Code:

                      Code:
                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <!DOCTYPE html>
                      <html>
                        <head>
                          <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
                          <meta charset="utf-8">
                          <title>Markers example</title>
                      
                          <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
                      <style>
                          html, body {
                        height: 100%;
                        margin: 0;
                        padding: 0;
                      }
                      
                      #map-canvas {
                      
                        width: 500px;
                        height: 300px;
                      }
                      
                      
                      </style>    
                        </head>
                        <body>
                      <div id="map-canvas"></div>
                      
                      <div style="float:left;">City:<br />
                      <input type="checkbox" name="city" value="north" checked=""/>Northen Territory<br />
                      <input type="checkbox" name="city" value="south" checked=""/>South Astraulia <br />
                      </div> 
                      
                      <div style="float:left;">Style:<br />
                      <input type="checkbox" name="style" value="victorian" checked=""/>victorian<br />
                      <input type="checkbox" name="style" value="craftsman" checked=""/>craftsman<br />
                      </div> 
                      
                      <div style="float:left;">Type:<br />
                      <input type="checkbox" name="type" value="sfh" checked=""/>Sinfle Family<br />
                      <input type="checkbox" name="type" value="condo" checked=""/>Condo<br />
                      <input type="checkbox" name="type" value="multi" checked=""/>Multi<br />
                      
                      </div> 
                      
                      <div style="float:left;">Bedrooms:<br />
                      <input type="checkbox" name="bedrooms" value="1" checked=""/>1<br />
                      <input type="checkbox" name="bedrooms" value="2" checked=""/>2<br />
                      <input type="checkbox" name="bedrooms" value="3" checked=""/>3<br />
                      <input type="checkbox" name="bedrooms" value="4" checked=""/>4<br />
                      </div>   
                      
                      <br />
                      
                      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   
                          <script>
                      
                      var markersmap = [];
                      var markers = []; 
                      
                      var geoLong = -29.2;
                      var geoLat = 132.6;
                      var std = "craftsman";
                      var std2 = "'" + std + "'";
                      
                      var typ = "multi";
                      
                      var typ2 = "'" + typ + "'";
                      var brooms = '3';
                      
                      var brooms2 = "'" + brooms + "'";
                            
                      function initialize() {
                      
                      
                      markers[0] = {long:-25.363882,lat:133.044922,'city':['north'],'style':['victorian'],'type':['sfh'],'bedrooms':['1']};
                      markers[1] = {long:-26.363882,lat:133.044922,'city':['south'],'style':['victorian'],'type':['condo'],'bedrooms':['2']};
                      markers[2] = {long:-27.363882,lat:133.044922,'city':['south'],'style':['victorian'],'type':['sfh'],'bedrooms':['3']};
                      markers[3] = {long:-28.363882,lat:133.044922,'city':['south'],'style':['victorian'],'type':['sfh'],'bedrooms':['4']};
                      markers[4] = {long:-25.363882,lat:130.044922,'city':['north'],'style':['craftsman'],'type':['condo'],'bedrooms':['1']};
                      markers[5] = {long:-26.363882,lat:130.044922,'city':['south'],'style':['craftsman'],'type':['sfh'],'bedrooms':['2']};
                      markers[6] = {long:-27.363882,lat:130.044922,'city':['south'],'style':['craftsman'],'type':['sfh'],'bedrooms':['3']};
                      markers[7] = {long:-28.363882,lat:130.044922,'city':['south'],'style':['craftsman'],'type':['multi'],'bedrooms':['4']};
                      markers[8] = {long: geoLong,lat:geoLat,'city':[std2],'style':[std2],'type':[typ2],'bedrooms':[brooms2]};
                      
                        var mapOptions = {
                          zoom: 4,
                          center: new google.maps.LatLng(-25.363882,131.044922),
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                        }
                        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                      
                      
                      $.each(markers, function(index, m) {
                      
                            markersmap[index] = new google.maps.Marker({
                            position: new google.maps.LatLng(m.long,m.lat),
                            map: map
                      
                            });   
                      
                        });
                          jQuery.get(markers, {}, function() {
                              jQuery().find("marker").each(function() {
                                  var markers = jQuery(this);
                                  var latlng = new google.maps.LatLng(
                                      parseFloat(markers.attr("lat")),
                                      parseFloat(markers.attr("long"))
                                  );
                                  var marker = new google.maps.Marker({position: latlng, map: map});
                              });
                          });
                      }
                      google.maps.event.addDomListener(window, 'load', initialize);
                      
                      
                      $("input:checkbox").bind( "change", function() 
                      {
                          $.each(markers, function(index, m) 
                          {
                              if(
                      
                              (
                              ($.inArray('south',m.city)>-1 && $("input:checkbox[name='city'][value='south']").is(':checked')) ||
                              ($.inArray('north',m.city)>-1 && $("input:checkbox[name='city'][value='north']").is(':checked'))
                              ) &&
                              (
                              ($.inArray('victorian',m.style)>-1 && $("input:checkbox[name='style'][value='victorian']").is(':checked')) ||
                              ($.inArray('craftsman',m.style)>-1 && $("input:checkbox[name='style'][value='craftsman']").is(':checked'))
                              ) &&
                              (
                              ($.inArray('sfh',m.type)>-1 && $("input:checkbox[name='type'][value='sfh']").is(':checked')) ||
                              ($.inArray('condo',m.type)>-1 && $("input:checkbox[name='type'][value='condo']").is(':checked')) ||
                              ($.inArray('multi',m.type)>-1 && $("input:checkbox[name='type'][value='multi']").is(':checked')) 
                              )&&
                              (
                              ($.inArray('1',m.bedrooms)>-1 && $("input:checkbox[name='bedrooms'][value='1']").is(':checked')) ||
                              ($.inArray('2',m.bedrooms)>-1 && $("input:checkbox[name='bedrooms'][value='2']").is(':checked')) ||
                              ($.inArray('3',m.bedrooms)>-1 && $("input:checkbox[name='bedrooms'][value='3']").is(':checked')) ||
                              ($.inArray('4',m.bedrooms)>-1 && $("input:checkbox[name='bedrooms'][value='4']").is(':checked')) 
                              )
                              )
                              {
                                  markersmap[index].setVisible(true);
                              } 
                              else
                              {
                                  markersmap[index].setVisible(false);
                              }
                          })  
                      });
                      
                      </script>    
                        </body>
                      </html>

                      Ich bin Anfänger und habe ganze Zeit nach Fehler gesucht...hast du eine Idee, woran der Fehler liegt?

                      Danke, LG

                      Kommentar


                      • #12
                        Bei sowas musst du eben debuggen, sieh nach, ob die Werte, die aus der datenbank kommen irgendwo "verschütt" gehen und wenn ja wo. etc. Im JS-Code kann man sich mit console.log Variablen ausgeben lassen.
                        Current Projects: http://www.welten-buch.de, http://neu.zooadoo.de

                        Kommentar


                        • #13
                          console.log funktioniert bei mir leider nicht, weil ich heute Vormittag schon mit folgenden Code probiert habe...deswegen erstmal bleibe ich bei document.write() ...

                          Code:
                          <?php  
                          
                          	$kg_kstl_map_array = array("ich", "mich", "dich", "ihr", "wir");
                          
                          
                          ?>
                          
                          	<!-- <script src='jquery-2.1.1.min.js'></script>-->
                          	
                          	<script>
                          	
                          
                          		var geoArray = <?php echo json_encode($kg_kstl_map_array); ?>;
                          		
                          		var arr_long = geoArray.length;
                          		
                          		for (var i = 0; i < arr_long; i++) {
                          			// This block will be executed 100 times.
                          			//document.write( 'Currently at ' + i );
                          			//document.write('<br>');
                          			
                          			console.log( 'Currently at ' + i );
                          			// Note: The last log will be 'Currently at 9'.
                          		}
                          
                          	</script>
                          	
                          <?php
                          
                          ?>

                          Kommentar


                          • #14
                            Dann nutz nen gescheiten Browser... Console.log funktioniert faktisch in jedem modernen Browser. Wo suchst du denn nach der Ausgabe. Die kommt in der Entwickler-Konsole
                            Current Projects: http://www.welten-buch.de, http://neu.zooadoo.de

                            Kommentar


                            • #15
                              Danke, aber ich habe irgendwie ein Gefühl dass der Fehler nicht daran liegt...

                              Kommentar

                              Lädt...
                              X