Elke: Google Maps auf iPhone

Hallo,
ich habe eine Seite auf der Google Maps eingebunden ist.
Neben dem, dass sie im Browser gut aussehen sollte habe ich mir von Anfang an Gedanken gemacht, wie ich sie gestalte damit sie auch auf de iPhone gut nutzbar ist.

Aus dem Grund dachte ich mir, ich baue ein Menü (das über der Karte liegt und ausgeblendet werden kann) mit fester Größe, damit es am iPhone groß genug ist und bedienbar bleibt und im Browser auch gut aussieht.

Als ich sie nun auf dem Handy ansah war alles klitze klein. Ich geh davon aus, dass die Pixel auf dem Handy anders interpretiert werden.

Nun, das ist das kleinere Problem, ich muss wohl 2 verschiedene Aussehen basteln und je nachdem was anfrägt die richtige darstellen. Wenn ihr da aber Tipps habt, würd ich mich sehr freuen.

Größe Sorgen macht mir allerdings die Map an sich selber.
Sie nimmt zwar wie gewollt den ganzen Bildschirm ein aber sie ist trotzdem sehr klein - sie sieht unschärfer aus (wieso auch immer). Bilder wie der Positionsmarkierungen (z.B. für Start und Ziel) sind sehr klein. So klein, dass man damit nicht wirklich arbeiten kann.
Ich denke allerdings, dass dies nicht das normale Verhalten sein sollte. Google gibt in der API an, dass es auch für iPhone mit gestaltet wurde, damit man es dort gut nutzen kann.
Ich habe wie in der Api empfohlen den Div in der die Karte angezeigt wird auf 100% gesetzt (<div id="karte" style="width:100%; height:100%"></div>) und im head <meta name="viewport" http-equiv="Content-Type" content="text/html; initial-scale=1.0, user-scalable=no" /> eingefügt.

Hat wer mit Google Maps Programmierung auf dem iPhone Erfahrung?
Dass meine Menüs von der Größe nicht stimmen bekomme ich hin mit nem 2. Style aber dass die Karte nutzerfreundlich bleibt und die Icons in normaler Größe sind, schaffe ich nicht.

Danke für die Hilfe

  1. Ich sehe 2. Möglichkeiten:

    1. Benutze CSS3 Media Queries, um die Seite je nach Bildschirmauflösung anders darzustellen.

    2. Statt Google Maps direkt einzubinden, kannst Du auf dem iPhone auch darauf verlinken - normalerweise erkennt das System dies und öffnet den Link direkt mit der Maps-App.

    Gruß, LX

    --
    RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
    1. Hallo LX,
      danke für deine Antwort.

      Zu 2.: Das geht leider nicht, da ich eine zusätzliche Funktionalität habe und deshalb eigene Buttons brauche.

      Werd mich päter über die CSS3 Media Queries informieren und danach googlen. Oder hast du ne gute Erklärung dazu?

      Danke

      1. @media all and ([min-width|max-width]:NNNpx) {  
           selector { CSS definitions }  
        }
        

        Das ist die für Dich im Moment wichtigste Variante in hoffentlich verständlicher Kurzform.

        Gruß, LX

        --
        RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.