Google-Maps Marker werden nicht oder nur teilweise angezeigt

Matze202

Erfahrenes Mitglied
Hiho @all,

hat jemand eine Idee, wieso auf meinem aktuellen Projekt, welches noch nicht öffentlich ist (hinter einem Verzeichnisschutz versteckt ist), auf meinem Computer in jedem Browser und auf meinem Android-Tablet im Google-Chrome alles problemlos funktioniert, aber auf meinem Android-Smartphone im Google-Chrome Version 34.0 gibt es Probleme, bei dem Anzeigen von den Markern.

Es werden diese Marker, bei dem Zoom 16 oft gar nicht angezeigt, wenn ich etwas näher gehe, wird mal der eine oder andere angezeigt, aber nie alle, welche sich in dem Bereich befinden sollen. Dabei habe ich auch einen 100*100 großen Marker, der wird auch nur zerstückelt angezeigt (mehr als 50% des Markers fehlen immer), wenn überhaupt etwas davon zu sehen ist. Dieser große ist eine SVG-Datei, ich habe auch den originalen Standart-Marker von Google dabei, aber der wird auch genauso selten angezeigt.

Bei dem Browser hatte ich zu erst, den gesamten Verlauf, Cache etc. gelöscht, weil vorher in jedem zoom-Bereich keiner der Marker angezeigen tat. Danach habe ich den Browser komplett gelöscht und neu installiert, dann wurden die, wie oben beschrieben angezeigt, aber noch lange nicht komplett.

Auf dem selben Telefon habe ich den Firefox getestet, dort funktionierte alles, wie auf den anderen Geräten.

Hat zufällig jemand eine Idee, woran es noch liegen könnte?

Gruß Matze202.
 
Weil mir noch keiner helfen konnte, habe ich hier mal das Script mit angehängt:
HTML:
    <section class="karte">
      <map name="karte" id="karte">
      </map>
      <div id="pos">
          Deine Position wird ermittelt...
      </div>
      <script src="js/zepto.js"></script>
      <script src="http://maps.googleapis.com/maps/api/js?key=hier_steht_der_key&sensor=true"></script>
      <script>
        $(function(){
          navigator.geolocation.getCurrentPosition(function(position){
            meineLatitude = position.coords.latitude;
            meineLongitude = position.coords.longitude;
          
            var myLatlng = new google.maps.LatLng(meineLatitude,meineLongitude);
          
            var optionen = {
              zoom: 16,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
          
              var image = {
                url: 'images/marker-muster.svg',
                // This marker is 24 pixels wide by 36 pixels tall.
                size: new google.maps.Size(24, 36),
                // The origin for this image is 0,0.
                origin: new google.maps.Point(0,0),
                // The anchor for this image is the base of the flagpole at 12,38.
                anchor: new google.maps.Point(12, 38)
              };

              var image2 = {
                url: 'images/marker-muster2.svg',
                // This marker is 24 pixels wide by 36 pixels tall.
                size: new google.maps.Size(100, 100),
                // The origin for this image is 0,0.
                origin: new google.maps.Point(0,0),
                // The anchor for this image is the base of the flagpole at 12,38.
                anchor: new google.maps.Point(50, 100)
              };
          
            var karte = new google.maps.Map($('#karte')[0],optionen);
          
            var marker = new google.maps.Marker({
                position: myLatlng,
                icon: image,
                title:"Deine Position!"
            });

            var marker3 = new google.maps.Marker({
                position: new google.maps.LatLng(p2_1,p2_2),
                icon: image2,
                title:"2. Position!"
            });

            var marker2 = new google.maps.Marker({
                position: new google.maps.LatLng(p1_1,p1_2),
                title:"Andere Position!"
            });
          
            // To add the marker to the map, call setMap();
            marker.setMap(karte);
            marker2.setMap(karte);
            marker3.setMap(karte);
                  
            document.getElementById('pos').innerHTML = 'deine Koordinaten:<br /> Breite: '+position.coords.latitude+'<br /> L&auml;nge: '+position.coords.longitude;
          }, function(){
            document.getElementById('pos').innerHTML = 'Deine Position konnte leider nicht ermittelt werden';
          });
        });
      </script>
    </section>
Die Koordinaten der Marker 2 und 3 habe ich hier mal überschrieben, weil diese ja funktionieren, nur halt nicht in meinem Smartphone. :(
 
Es ist zwar nur ein Schuss ins Blaue(habe kein Smartphone, kann es somit nicht testen), aber aufgrund der Info der wird auch nur zerstückelt angezeigt könntest du mal versuchen den Markern die Eigenschaft optimized:false zu geben.


Marker werden wie die meisten anderen Elemente einer Map über tiles(Kacheln, <canvas/>-Elemente, um genau zu sein) in der Grösse 256x256 erzeugt.

Überlappt nun ein Marker die Grenze solch einer Kachel, wird er in der Tat auf mehrere Kacheln aufgeteilt(bei dir fehlen Kacheln, somit wird der Marker zerstückelt).

Normalerweise ist das kein Problem und von Vorteil sobald sich der Viewport der Map ändert, da nur die Kacheln bewegt werden müssen und nicht jeder einzelne Marker, aber wie es scheint gibt es in deinem Fall Probleme damit(evtl. mangelnder Arbeitsspeicher)

Wenn du optimized auf false setzt wird für jeden Marker ein einzelnes Element (<img/>) erzeugt.

Cache-Probleme würde ich ausschliessen, da diese Kacheln zur Laufzeit erzeugt und gefüllt werden und keine Dateien sind die sich irgendwie speichern lassen
 
Zuletzt bearbeitet:
@abuzze ich danke dir erstmal noch für die Antwort, aber ich hab mit folgendem Befehl schon einen Teilerfolg gehabt:
Javascript:
    var marker2 = new google.maps.Marker({
        position: new google.maps.LatLng(p1_1,p1_2),
        draggable:true, // <-- Hiermit
        title:"Andere Position!"
    });
Nur leider waren die Marker ja dann beweglich, aber die Marker wurden richtig angezeigt.

Dann hab ich das draggable auf false gesetzt und dann kam das selbe Problem wieder.

Nach vielen Stunden suchen und testen, habe ich es nun geschafft, mit paar wenigen Zeichen an der Google-Maps-Api-URL anzuhängen, klappt nun alles super.
Aus
habe ich
gemacht.
 
draggable:true hat den selben Effekt wie optimized:false, Marker die draggable sind oder denen eine animation zugewiesen wurde werden nicht optimiert(werden also als separate img-Elemente eingebunden).
 
Ahh ok danke, für die Info, aber ich hätte nach der Tage langen suche, nicht erwartet, dass es nur an den wenigen Zeichen "&v=3.9" liegen würde, zu mal ich es vorher schon mal mit &v=3.exp versucht hatte und es damit nicht klappt.
 
Was die Version betrifft:
Da geht es aktuell ein bisschen durcheinander bei google.

Ohne den v-Parameter wird die experimentelle Version geladen. (aktuell 3.20)
Ebenso mit 3.exp

Du hast 3.9 angegeben, damit lädts du nicht Version 3.9(diese ist schon seit langem nicht mehr verfügbar), sondern die frozen-version(aktuell 3.17)

Prinzipiell solltest du immer die release-Version laden(aktuell 3.18), das tust du indem du den v-parameter auf 3 setzt.

Das solltest du auch jetzt tun, denn es kann schon am Montag passieren dass geupdated wird, dann ist version 3.17 nicht mehr verfügbar(eigentlich war das Update schon vor 2 Wochen draussen, wurde aber ein paar Tage später zurückgezogen).

Sollte das Problem nur bei der aktuellen experimentellen Version auftauchen, kannst du folgendes tun:

Code:
optimized:google.maps.version<'3.19'

Damit hättest du fürs Erste Ruhe vor den Updates, bis 3.18 werden Marker optimiert, danach nicht(könntest du dann später prüfen ob das evtl. ein Bug war der behoben wurde)
 
Zuletzt bearbeitet:
Danke für die Info´s :)
Javascript:
optimized:google.maps.version<'3.19'[
Sollte das mit in die var der Marker rein?
Soll ich dafür auf das draggable verzichten, wenn die das selbe machen, weil ich bei bestimmten Funktionen, das verschieben bestimmter Marker ermöglichen möchte.

Zur Zeit habe ich nur v3 an der URL eingetragen und es funktioniert wunderbar.

Hast du zufällig nen Link auf deutsch, wo man sich informieren kann, was sich in welcher Version geändert hat?
 
Zuletzt bearbeitet:
Das muss in die Marker-Eigenschaften:
Code:
var marker = new google.maps.Marker({
        position: new google.maps.LatLng(p1_1,p1_2),
        draggable:true, 
        optimized:false,
        title:"Andere Position!"
    });

Wenn du das draggable benötigst, dann notiere es halt, es gibt keine Probleme wenn du beides verwendest(egal mit welchen Werten)

Das changelog gibt es nur auf Englisch soweit ich weiss: https://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog
 
Zurück