marker setzen auf eine karte

Christopher25

Hallo zusammen. Ich möchte euch gerne um Hilfe bitten.
Ich programmiere gerade eine Karte für ein Spiel in html, css, javascript und natürlich php.
Dort kann man via javascript Icons setzen, über ein modales fenster mit verschiedenen Feldern zum ausfüllen.
Es funktioniert alles super. Verbindet sich mit der Datenbank etc.
Aber nun habe ich das auf dem Server hochgeladen und ein paar pins gesetzt. Bei mir werden die dort angezeigt, wo ich die hinplatziert habe.
Aber bei anderen Leuten werden die woanders dargestellt.
Ich poste mal die php datei von einer Karte und hoffe, ihr könnt mir sagen, wo der Fehler ist und was ich dafür ändern muss.
Ich denke am CSS liegt es irgendwo.

PHP

<?php include('login.php'); ?><html>
    <title>TreWa Map - Cyrodiil</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    html {
        max-height: 620px;
        background-color:#CCCCCC;
    }
    body
    {
        font-family:arial;
        background-color:#CCCCCC;
        margin:0;
        padding:0;
        max-height:620px;
    }
    .pin {
        position: absolute;
        cursor:pointer;
    }
    figure {
        display: compact;
        box-shadow:0 0 10px #000;
    }
    #modal {
        display:none;
        position:absolute;
        box-shadow:0 0px 100px #000;
        border-radius:10px;
        overflow: visible;
        max-width: 600px;
        padding: 5px 20px 13px 20px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }
    #modal textarea, input {
        display:block;
        width:100%;
    }
    #infoModal {
        display: inline;
        position:absolute;
        box-shadow:0 0 20px #000;
        max-width: 600px;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #FFFFFF;
        background: -moz-linear-gradient(#FFFFFF, #999999);
        background: -webkit-linear-gradient(#FFFFFF, #999999);
        background: -o-linear-gradient(#FFFFFF, #999999)
        overflow: inherit;
    }
    #infoModal span.close {
        display: inline;
        background: #285C82;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
        cursor:pointer;
    }
    #modal span.delete {
        display: inline;
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
        cursor:pointer;
    }
    #infoModal span.pic {
        max-height: 350;
        max-width: 550px;
        display: block;
    }
    #infoModal span.title {
        font-weight:700;
    }
    #infoModal span.text {
        display: block;
        font-size:12px;
    }
    #banner
    {
        float:top;
        text-align:center;
    }
    #login
    {
        float:top;
        text-align:right;
        margin-right:10px;
    }
    #rechts
    {
        float: right;
        width: 250px;
        position: relative;
        display: block;
        background: #999999;
        min-height: 600px;
        border-style:solid;
        border-width:medium;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
    }
    #mapContainer
    {
        position: absolute;
        float:center;
        text-align:center;
        background-color:#CCCCCC;
    }
    #map
    {
        max-height: 1000px;
        text-align:center;
        background-color:#CCCCCC;
        border-style:solid;
        border-width:medium;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;    
    }
    #foot 
    {
     text-align:center;
    }
    </style>
    </head>
    <body>
        <div id="banner">
        <a href="http://teso.trewa.net/"><img src="logo.gif" width="300px" height="200px" border="0" alt="logo"></a>
        </div>
        <div id="login">
        <?php
        if(isset($_SESSION['login']) && $_SESSION['login'] == true) {
            echo "<h2>Willkommen <u>".$_SESSION['username']."</u></h2><br>";
            echo '<form method="POST" action="logout.php" width="20px">
            <b>Logout:</b><br><button>Ausloggen</button>
            </form>';
        }
        ?>
        </div>
        <div id="mapContainer">
        <?php
            if(isset($_SESSION['login']) && $_SESSION['login'] == true) {
            if($_SESSION['isAdmin'] == true) {
                echo '<img id="map" src="Cyrodiil.jpg" width="70%" height="1000px" border="1px" style="z-index:2; cursor:pointer;">';
            } else {
                echo '<img id="map" src="Cyrodiil.jpg" width="70%" height="1000px" border="1px" style="z-index:2;">';
            }} else {
                echo '<img id="map" src="Cyrodiil.jpg" width="70%" height="1000px" border="1px" style="z-index:2;">';
            }
            // Kartenvariable anlegen zum übergreifen auf den Loadprozess
            include('mapName.php');
            $mapName ="Cyrodiil";
            // Aufrufen des Datenbankzugriffs um die Marker zu laden
            include('loadmarker.php');
        ?>
        <div id="modal" style="z-index:2;">
            <span class="delete">X</span>
            <input type="text" name="title" placeholder="Titel..">
            Nur fuer Mitglieder sichtbar? 
            <select id="memberchoise">
                <option value="true">ja</option>
                <option value="false">nein</option>
            </select>
            <input type="text" name="youtube" placeholder="Youtube VideoID..">
            <input type="text" name="pic" placeholder="Bild URL..">
            <textarea name="text"></textarea>
            <button id="save">Speichern</button>
            </div>
            <div id="infoModal" style="z-index:2;"> <span class="close">X</span>
            <span class="title"></span>
                <div class="yt"></div> <span class="pic"></span> <span class="text"></span>
            </div>
        </div>
        <div id="rechts" style="z-index:1;"><br>
            <h1>
            <b><i> Navigation: </b></i>
            <ul>
            <li>
                <a href="index.php"> Weltkarte </a>
            </li>
            <hr>
            <?php
                if(isset($_SESSION['login']) && $_SESSION['login'] == true) {
                if($_SESSION['isAdmin'] == true) {
            ?>
            <button class="iconSelect">
                <img data-offsetLeft="10" data-offsetTop="10" src="TESO-Icon.png">
            </button>
            <button class="iconSelect">
                <img src="pin1.png">
            </button>
            <?php
                }}
            ?>
        </div>
        <div id="foot">@Christopher Teichert</div>
        <script type="text/javascript">
            var $infoModal = $("#infoModal");
            $infoModal.hide();

            $(document).on("click", ".pin", function (e) {
                $this = $(this);
                $infoModal.css("top", $this.css("top"));
                $infoModal.css("left", $this.css("left"));
                $infoModal.show();
                var title = $this.attr("data-title");
                var youtube = $this.attr("data-yt");
                var picture = $this.attr("data-pic");
                if (youtube != "") {
                    youtube = '<iframe width="560" height="315" src="//www.youtube.com/embed/' + youtube + '?rel=0" frameborder="0" allowfullscreen></iframe>';
                }
                if (picture != "") {
                    picture = '<figure><img src="'+ picture +'" width="100%" height="100%" /></figure>';
                }
                var text = $this.attr("data-text");
                $infoModal.children(".title").html(title);
                $infoModal.children(".yt").html(youtube);
                $infoModal.children(".pic").html(picture);
                $infoModal.children(".text").html(text);
            });
            $("#infoModal span.close").click(function () {
                $infoModal.hide();
            });
        </script>
        <?php
            if(isset($_SESSION['login']) && $_SESSION['login'] == true) {
            if($_SESSION['isAdmin'] == true) {
        ?>
        <script type="text/javascript">
            var currentIcon = "pin1.png";
            var imgOffsetTop = 0;
            var imgOffsetLeft = 0;




            $(".iconSelect").click(function () {
                $img = $(this).children('img');
                currentIcon = $img.attr('src');
                imgOffsetTop = imgOffsetTop.attr('data-offsetTop');
                imgOffsetLeft = imgOffsetTop.attr('data-offsetLeft');
            });
            var offsetLeft;
            var offsetTop;
            $("#map").click(function (e) {
                e.preventDefault();
                var parentOffset = $(this).position();
                offsetLeft = e.offsetX + parentOffset.left-12;
                offsetTop = e.offsetY + parentOffset.top-25;
                openModal(offsetLeft, offsetTop);
            });




            var $modal = $("#modal");
            var clickState;
            function openModal(x, y) {
                clickState = false;
                $modal.children("input").val("");
                $modal.children("textarea").val("");
                $modal.css({
                    left: x,
                    top: y
                });
                $modal.show();
                return true;
            }




            $("#save").click(function () {
                dataTitle = $modal.children("input[name=title]").val();
                dataYt = $modal.children("input[name=youtube]").val();
                dataPic = $modal.children("input[name=pic]").val();
                dataMember = $modal.children("select[id=memberchoise]").val();
                dataText = $modal.children("textarea[name=text]").val();

                $.ajax({
                    type: 'POST',
                    url: 'savemarker.php',
                    data: { title: dataTitle, yt: dataYt, pic: dataPic, text: dataText, x: offsetLeft, y: offsetTop, member: dataMember, map: "Cyrodiil", src: currentIcon }
                });




                dataString = "data-title=\"" + dataTitle + "\" data-yt=\"" +          
                dataYt + "\" data-pic=\"" + dataPic + "\" + data-text=\"" +     
                dataText + "\"";

                $("#mapContainer").append("<img " + dataString + " class=\"pin\"  src=\"" + currentIcon + "\" style=\"left:" + offsetLeft + "px;top:" + offsetTop + "px;\">");
                $modal.hide();
            });
            $("#modal span.delete").click(function () {
                $modal.hide();
            });
        </script>
        <?php
        }}
        ?>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $("#mapContainer").width($("body").width());
            $("#rechts").height($("#map").height());
        </script>
    </body>
</html>

Alles anzeigen

Gastl

Keiner hat Lust deine Datei erst zu erstellen. Ein Link?

Christopher25

Ein link wohin?
also ich kann dir das hier anbieten...

http://teso.trewa.net/map

explanator

EDIT: Das ist deine Startseite, denkst du allen Ernstes daran dass wir uns einloggen.

Davon abgesehen, Der Validator zeigt schon dort etliche Fehler an --> http://validator.w3.org/unicorn/check?ucn_uri=teso.trewa.net%2Fmap%2Findex.php&doctype=Inline&charset=%28detect%20automatically%29&ucn_task=conformance#

Du solltest allea auf UTF-8 umstellen.

Christopher25

Man muss sich nicht einloggen^^
Das einloggen ist nur für pins, welche nur für Mitglieder sichtbar sein sollen.
Ansonsten kann man alle pins sehen.

explanator

Ok, habe ich erst nicht gesehen. Dennoch solltest du erst einmal die Fehler beheben, Ohne doctype rendern die Browser deine Seite im Quirksmodus, da ist alles denkbar.

Christopher25

Was ist denn der Doctype und was ist der Quirksmodus?

explanator

Zitat von Christopher25

Was ist denn der Doctype und was ist der Quirksmodus?

Dazu hätte ich von dir ein wenig Eigeninitiative erwartet, denn das meiste lässt sich mit einer Suchmaschine sehr leicht finden.

Aber nun gut, hier ein Link --> http://www.mediaevent.de/xhtml/doctype.html

Um der nächsten Frage gleich vorzubeugen.

Du kannst folgende Einleitung für deine Seiten nehmen:

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">

Deine Seiten solltest du im Editor ebenfalls in UTF-8 speichern, dann passt das schon mal.

Christopher25

so habe das mal bei jedem eingefügt, indem html vorkommt

explanator

Ich kann bei deiner Seite http://teso.trewa.net/map/ nicht erkennen, das da ein doctype ist. Kannst du selber überprüfen indem du im Firefox Browser mit der rechten Maustaste in ein freies Feld deiner Seite klickst und danach den Punkt Quellcode anzeigen auswählst.

Hast du auch die anderen Fehler schon gesehen. Den Link vom Validator hatte ich ja bereits mitgeteilt.

Sieht bis jetzt noch aus:

HTML

<html>
 <head>
  <title> Test</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <style type="text/css">

Christopher25

Ja das wurde noch nicht übertragen. Einen moment ich übertrag die daten zum Server.

Daten sind aufn sServer =)

explanator

Welchen Editor verwendest du?
Hast du die Dateien auch alle als UTF-8 gespeichert?

Die Startseite ist nicht umgestellt, diese Seite meine ich ---> http://teso.trewa.net/map/
Die Startseite hat noch jede Menge Fehler drin. Schau doch mal in den Validator.

Christopher25

Wie kann ich denn dateien als utf-8 speichern bzw. was ist der Validator sorry für diese dummen Fragen,
aber habe da echt keine Ahnung

explanator

Warum lernst du nicht erst mal mit leichten Übungen anstatt dich an so etwas schwierigem wie einem Onlinespiel zu versuchen. Das überfordert dich doch gerade im Moment.

Das sind alles Grundlagen und den Link vom Validator habe ich dir mittlerweile auch schon mal gegeben. Hier geht es zum Validator. Was das ist steht bei Wikipedia.

Beantworte auch mal meine Fragen, dann kann man dir auch helfen, woher soll ich wissen mit welchem Editor du arbeitest. Jeder hat seine Umstellung der Zeichenkodierung woanders, Da kann man nur sagen lies die Anleitung zu dem Programm.

So scheint mir kommen wir jedenfalls nicht weiter. Dir fehlen einfach zu viele Grundlagen die du dir erst mal anhand einiger Tutorials aneignen solltest.

Christopher25

Ich mache kein Onlinerollenspiel, es ist nur eine karte von einem Rollenspiel.
Und kann schon sein dass mir die Grundlagen fehlen, weil ich mich nicht wirklich gut mit
php und html auskenne.
Ich programmiere eigentlich in normal Java

explanator

http://webkompetenz.wikidot.com/docs:html-handbuch

Tutorial html
Tutorial PHP für Anfänger

- - - Aktualisiert - - -

Nicht vergessen alle Fehler die der Validator ausspuckt zu beheben.

Christopher25

Danach müsste es laufen?

ich benutze Notepadd++

explanator

Ob es danach läuft kann man an dieser Stelle noch nicht sagen, aber erst wenn alle anderen Fehlerquellen ausgeschlossen wurden kann man sich um das Problem kümmern.
Kann natürlich sein dass danach geht weil das Problem darin lag.

Christopher25

so ich habe jetzt alle sachen behoben welche mir der Validator angezeigt hat.

http://validator.w3.org/check?uri=http…=Inline&group=0

Jetzt habe ich das Problem, wenn ich als admin angemeldet bin, ruft sich das modale fenster nicht mehr auf, um icons zu setzen (das #modal nicht das #infoModal das ist nur zum anzeigen der icons da, welches funktioniert)

explanator

Das Div #modal ist mit display:none ausgeblendet.

Jetzt musst du mal in deine PHP-Datei schauen wie du es auf display:block stellst.

Die Datei kennen wir ja nicht.

marker setzen auf eine karte

Tags

Benutzer online in diesem Thema