Google Static Maps – die Größe der Karte

Die Größe der Karte ist wesentlich, um auf der Website ein ergänzendes und nicht störendes Element zu sein.

In meinem letzten Beitrag “Google Static Maps – zeigen Sie Ihren Standort” habe ich erklärt wie man schnell und einfach eine Google Static Map auf der eigenen Website integrieren kann. In den nächsten Beiträgen möchte ich gerne die einzelnen Parameter näher erklären.

Heute möchte ich auf den Einbau der Karte in die Website und den Parameter “size” eingehen.

Der Image-Tag

Zum Einbau der Karte braucht man grundsätzlich ein Bild in welcher die Karte eingebunden wird. Der HTML-Code für ein Bild lautet:

<img src="Beispielbild.jpg" src="Beispielbild.jpg" 
width="400" height="300" alt="Beispieltext" border="0" /> 
  • src: die Quelle des Bildes
  • width: die Breite des Bildes (Angabe in Pixel)
  • height: die Höhe des Bildes (Angabe in Pixel)
  • alt: der hier angegebene Text wird angezeigt, wenn man mit der Maus über dem Bild stehen bleibt
  • border: wird das Bild verlinkt, wird ein Rahmen in der Stärke des Borders angezeigt (Angabe in Pixel)

In unserem Fall wird das Bild mit dem Namen “Beispielbild.jpg” in einer Breite von 400x Pixel, einer Höhe von 300 Pixel mit dem Beschreibungstext “Beispieltext” ohne Rahmen angezeigt.

Für die Google Static Map wird nun bei “src” der Link zu Google angegeben. Wie dieser erstellt werden kann, kann man unter “Google Static Maps – zeigen Sie Ihren Standort” nachlesen.

Der Parameter “size”

Für die Darstellung des Bildes ist die Angabe 

width="400" height="300" 

wichtig. Das Bild wird vom Browser in dieser Größe dargestellt – egal wie groß das Bild tatsächlich ist. Wäre das Bild jetzt also 1000 x 500 Pixel groß, würde dieses verkleinert und vor allem auch verzerrt dargestellt werden.

Um zu vermeiden, dass unsere Karte verzerrt, zu klein oder zu groß angezeigt wird, kann man der Google Static Map mit dem Parameter “size” mitteilen, wie groß diese sein soll:

http://maps.google.com/staticmap?size=400x300

Diese Google Static Map hätte jetzt ein Größe von 400 Pixel Breite und 300 Pixel Höhe und würde ideal in unser Beispielbild passen.

Zur Vollständigkeit möchte ich noch erwähnen, dass man im Bild-Tag die Größenangaben ganz weg lassen kann. Das hätte aber zur Folge, dass der Browser beim Aufbau der Seite noch nicht weiß wie groß das Bild sein wird und daher dafür noch keinen Platz frei halten kann. Sobald das Bild dann geladen ist, wird dieses angezeigt, und die restliche Website würde sich verrücken um dem Bild Platz zu machen.

Getagged mit:
Veröffentlicht unter Web, HTML, CSS

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Archiv