Wikizone - Benutzerbeiträge [de]

Mac - Probleme beheben

2012-05-04T15:38:12Z

94.216.248.30: Die Seite wurde neu angelegt: „== Tastatur - Tasten sind vertauscht == Beim ersten mal wenn eine neue Tastatur angeschlossen wurde startet der Tastatur Assistent. Wenn sich die Tastatur später…“

== Tastatur - Tasten sind vertauscht ==
Beim ersten mal wenn eine neue Tastatur angeschlossen wurde startet der Tastatur Assistent. Wenn sich die Tastatur später verändert kann es sein daß einzelne Tasten vertauscht sind (z.B. ^ und <).
Unter Snow Leopard löscht man die Datei:
/Library/Preferences/com.apple.keyboardtype.plist
dann erscheint der Tastatur Assistent beim nächsten Neustart wieder und man kann die Tastatur neu prüfen.

Mac

2012-05-04T15:32:22Z

94.216.248.30:

Hier finden sich einige nützliche Infos zum Apple Mac
== Weitere Links ==
[[Terminal und Konsole auf dem Mac]] Einige Hinweise für LINUX Leute die auf dem Mac unterwegs sind

http://www.macports.org/index.php Einfaches Kompilieren und Installieren von Konsolen X11 und Aqua OpenSource Programmen What is MacPorts?

MacPorts provides an infrastructure for building, installing, and packaging open source software. It is designed to match the functionality of the FreeBSD Ports system and to be extensible for future enhancements.

[[MacPorts]]

== Mac, Apache, PHP, MySQL (MAMPP) ==
Hinweis: auch XAMPP gibts jetzt für Mac. Ist eigentlich einfacher: In den Applications Ordner packen fertig.

Weiterführender schon etwas älterer aber ordentlicher Artikel: http://oreilly.com/pub/ct/49

Artikel über die Aktivierung von mySQL, PHP, fehlende PHP Module etc.: http://www.viames.it/mac-os-x.html

=== Lösung 1 : MAMPP-Paket installieren ===
Oder alternativ die Sachen einzeln draufspielen...

Standardmäßig erreichbar unter

http://localhost:8888/

=== Apache ===
Ist beim Mac schon dabei und kann unter Systemeinstellungen > Sharing > Personal Web Sharing aktiviert werden
Die Seiten sind dann unter
localhost (Root Benutzer)
oder
localhost/~benutzername
erreichbar außerdem kann man auch benutzer.local eingeben dann wird ein Apple-Interner Dienst benutzt um die Adressen umzuwandeln.

Ansonsten gelten weitgehend die gleichen Regeln für die Konfiguration wie unter Linux.

=== Wichtige Daten für den Mac als Webserver ===
Stand April 2009
Apache Config: /etc/apache2/httpd.conf
PHP als Modul aktivieren (muß installiert und kompiliert sein):
in Apache Config:
LoadModule php5_module libexec/apache2/libphp5.so
Der Ordner für php Extension ist hier angegeben:
/etc/php.ini
z.B.:
; Directory in which the loadable extensions (modules) reside.
extension_dir = "/usr/lib/php/extensions/no-debug-non-zts-20060613"

=== PHP ===
Hinweis: Bei Apache2 hat sich einiges geändert.
Konfiguration des Apache ist in
etc/apache2
Ist auch schon dabei muß aber noch aktiviert werden und bei der Gelegenheit auch gleich die Ausführung von CGI Skripten:
Zuerst mal ins Terminal wechseln (suche einfach mit Spotlite nach terminal)
Dann Sysadmin werden:

sudo -s

mit

cd /etc/httpd

wechselt man ins Apache Konfigurationsverzeichnis. Jetzt legen wir eine sicherheitskopie der Konfigdatei an:

sudo cp httpd.conf httpd.BAK

Nun verwenden wir den Editor vi um die entsprechenden Zeilen in der httpd.conf auszukommentieren. Mittels '''x''' wird in '''vi''' ein Zeichen gelöscht, mittels ''':wp''' werden die Änderungen geschrieben und vi beendet. In unserem Falle wird jeweils das # vor der entsprechenden Zeile entfernt.

sudo vi /etc/httpd/httpd.conf

Ein alternativer Editor unter Mac/Linux ist Pico. In Pico speichert man mit CTRL+o (write out) und kann Suchen mit CTRL+w (where is)

sudo pico httpd.conf

Für die Bedienung von Vim und Pico, gibt es eine Hilfefunktion mit F1

Nun nach unten Scrollen, die folgenden Variablen suchen und das # löschen.

#AddHandler cgi-script .cgi
#LoadModule php4_module
#AddModule mod_php4.c

Nun speichern und Apache neu starten:

:wq (mit vim)
ctrl+o (pico)
sudo apachectl graceful

Zum Testen ob php funktioniert schreiben wir ein kleines php-Programm, daß uns die aktuelle php-konfiguration ausgibt und speichern es unter

'''info.php'''
<?php
phpinfo();
?>

Im Browser geben wir ein:
http://localhost/~benutzername/phpinfo.php

Und wenn alles klappt sehen wir eine Lange Liste mit allen möglichen php und Servereinstellungen.

===MySQL installieren===
==== Neues Tutorial ====
MySQL DBMS isn’t installed by default on Mac OS X Leopard. If you need it, it’s quietly easy to install on Leopard: download MySQL 5.1 for Mac OS X 10.5 (x86_64), launch its setup wizard and edit php.ini to connect through the right mysql socket:

[MySQL]
; Default socket name for local MySQL connects. If empty, uses the built-in
; MySQL defaults.
mysql.default_socket = /tmp/mysql.sock

[MySQLi]
; Default socket name for local MySQL connects. If empty, uses the built-in
; MySQL defaults.
mysqli.default_socket = /tmp/mysql.sock

A web-server restart is required in order to apply any httpd.conf or php.ini changes. All extension files need to be executable by apache's user.

==== Alte Version ====
Herunterladen der Datenbank 4 oder neuer unter
http://dev.mysql.com/downloads/mysql/4.1.html
Doppelklick mounted das disk image. Dann Doppelklick auf das Package File und Die Datenbank wird installiert. Wenn eine alte Version läuft dann vorher abschalten (das ReadMe File gibt Tipps)

Die Datenbank wird hier installiert:
/usr/local/mysql-VERSION

Als nächstes speichern wir den Pfad zu MySQL in den Umgebungsvariablen der Shell, auf diese Weise muß man nicht jedesmal den Pfad eingeben oder in das Verzeichnis wechseln.
Das Terminalfenster muss nach Eingabe des Codes neu gestartet werden, damit die Änderung aktiv wird.
'setenv PATH /usr/local/mysql/bin:$PATH' >> ~/.tcshrc
Für tcsh (Mac OS X 10.2)

echo 'export PATH=/usr/local/mysql/bin:$PATH' >> ~/.bash_profile
Für bash (Mac OS X 10.3, 10.4)

Jetzt wechseln wir in das MySQL Verzeichnis und ändern die Rechte für das Verzeichnis data (dort sind die Datenbanken gespeichert)
cd /usr/local/mysql
sudo chown -R mysql data/

Nun testen wir ob die Datenbank erreichbar ist
sudo echo
sudo ./bin/mysqld_safe &
/usr/local/mysql/bin/mysql test

Nicht vergessen das Root Passwort zu setzen:
/usr/local/mysql/bin/mysqladmin -u root password new_password_here

==== Tabellen und Datenbanken ====
Jetzt wird es Zeit eine neue Datenbank anzulegen. Dazu loggen wir uns in den mySQL Server ein legen eine neue Datenbank an und erlauben vollen Zugriff für Herrn benutzername. benutzername wir durch den eigenen MacOsX Benutzernamen ersetzt.
mysql -u root -p
create database mein_DB_Name;
grant all on mein_DB_Name.* to benutzername@localhost identified by "passwort";

Hinweis: in der ersten Zeile haben wir uns den langen Pfad erspart weil wir ja in der bash einen neue Pfad-Variable gesetzt haben.

=== ImageMagick ===
Ist in den Macport Tools enthalten. Macports installieren falls nicht vorhanden (siehe Macports), danach sind die Tools in /opt/local/bin/ enthalten. Dies ist auch der Pfad der in der TYPO3 Installation angegeben werden muß.

==== Vorkompilierte Datei (bei Benutzung von Macports nicht notwendig)====
http://www2.entropy.ch/download/imagemagick-6.1.7.pkg.tar.gz
1) Mit boomArchivHelper aus dem System auspacken (Rechte Maustaste "Öffnen mit" / nicht stuffit-expander, da sonst eine Fehlermeldung, daß das Archiv kaputt ist)
2) Mit dem Installer installieren
3) typo3 localconf.php updaten

== Software Grundausstattung ==

=== Freeware ===
Tools
* Filezilla (FTP)

Editor:
* NetBeans IDE von Sun (wenns etwas größer Sein darf)
* Alternativ Eclipse (Geschmacksache)
* Textwrangler (Freeware kann nicht besonders viel)

Thumbnail Viewer:

Office

* OpenOffice > Version 3.1
* Freemind OpenSource Mindmapper (einfach und effektiv)
* Baralga (OpenSource Tool zur Zeiterfassung in Java geschrieben)

Projektverwaltung

=== Kostenpflichtig ===
TextMate Editor

== Windows auf dem Mac ==
Auf den Intel Macs ist es möglich Windows zu installieren.

1. Lösung BootCamp von Apple

Vorteil - pure Windowsinstallation mit allen Features, kostenlos

Nachteil - Der Rechner muß zum Wechsel runtergefahren werden

2. Lösung Parallels

Vorteil - Wird im Fenster Parallel zu MacOS ausgeführt, auch andere OS verfügbar

Nachteil - im Moment kein DirectX, kostenpflichtig (ca. 80 Euro)

[[Tutorial: Windows auf dem Mac]]

== Sonderzeichen und Spezialtasten auf dem Mac ==
Tilde ~ : ALT + n

Pipe | : ALT + 7

Backslash \ : ALT + SHIFT + 7

Funktionstasten sind oft mit Systemfuktionen (Dashboard etc. vorbelegt) ESC + Zahl gehts aber (nacheinander drücken). Andere Möglichkeite ist Apfel + Funktionstaste (hier gleichzeitig) damit wird der Tastendruck an die Anwendung durchgereicht.

Laptops, Powerbooks, etc. haben oft keine Entf Taste. Mit fn+ Backspace geht's

Apfel + Backspace löscht Dateien direkt

== JAVA ==
Ist auf dem Mac schon installiert. Schwierig wird es wenn die Version zu alt ist. Dann ist man nämlich auf Apples Update Politik angewiesen und wenn das iPhone gerade wichtiger ist... kann es dauern.

=== JAVA Einstellungen ===
In den Dienstprogrammen kann man z.B. die Default Version einstellen. Getrennt für Web Applets und Java Anwendungen (Programme/Dienstprogramme/Java). Wenn beim Starten von Java Applications ein Fehler auftritt hilft es manchmal hier die Default Java Version zu verändern. Einfach in der Liste die gewünschte Version nach oben ziehen.

== Mac Ärgernisse ==
Trotz aller schönen Dinge bietet der Mac doch einige Ärgernisse. Interessanterweise zeigt der geneigte, sonst so kritische Mac User sich diesen gegenüber erstaunlich resistent. Zumindest wenn man den Forenbeiträgen glauben schenkt. Der Gerechtigkeit wegen hier einige der kleinen Haken im Mac-Leben.

Fehlermeldung: Auf das drahtlose '''netzwerk''' wurde möglicherweise unerlaubt zugegriffen... daraufhin wird das Netzwerk für kurze Zeit zurückgesetzt.

Der Fehler tritt scheinbar auf wenn andere Rechner im Drahtlosen Netzwerk aktiv sind. Abhilfe bringt wenn das Netzwerk auf WPA2 AES upgedatet wird.

Fehlermeldung: Sinngemäß: Nix geht mehr schalten Sie den Rechner aus...
Kommt zum Beispiel bei vielen offenen Flash-Filmen im Browser vor.

Fenster auf allen Seiten vergrößern

Schriften werden auf einmal in verschiedenen Programmen nicht mehr richtig dargestellt.
Lösung: Font Cache löschen: http://adminday.de/tutorials-und-tipps/fontcache-unter-mac-os-x-10-6-loschen/

Time Machine geht nicht über Netzlaufwerke (zumindest nicht ohne weiteres

=== Video und Audio-Dateien auf dem Mac ===
Oft gibt es das Problem, daß man Audio und Video Dateien auf dem Mac nicht abspielen kann. Es gibt einige Tools die Helfen können.

Zum Thema Video gibt es hier einige Infos: [[Video]]

== Time Machine über Netzlaufwerke nutzen ==

=== Lösung 1 ===

Link: http://www.ratschlag24.com/index.php/mac-os-x-time-machine-auch-mit-netzlaufwerken-nas-laufwerken-und-wlan-festp/

'''Rechnername des Mac-Rechners rausfinden.'''

Terminal
scutil --get ComputerName

'''MAC Adresse der Netzwerkkarte rausfinden'''
ifconfig en0 | grep ether
(Pipe Zeichen mit ALT+7)

Die MAC-Adresse besteht aus zwölf Zahlen-/Buchstaben-Paaren. Merken Sie sich auch diese Adresse.

'''Sparsbundle Diskimage mit ausreichender Größe erzeugen'''

3. Timemachine speichert seine Daten in einem sog. Sparsebundle. Im nächsten Schritt müssen Sie ein Disk-Image nach einem ganz bestimmten Namensmuster anlegen. Hierzu geben Sie in das Terminalfenster einen Befehl nach folgendem Muster ein:

hdiutil create -size 100g -fs HFS+J -volname TM-Backup "<Computename>_<MAC-Adresse>.sparsebundle"

<Computername> s.o. <MAC Adresse> s.o. ohne Doppelpunkte eingeben

Beispiel:

hdiutil create -size 100g -fs HFS+J -volname TM-Backup "Mirko Müllers MacBook_001ff3d0b9c8.sparsebundle"

Damit wird eine Backupdatei mit einer Maximalgröße von 100 GB angelegt. Sie finden die so erzeugte Datei in Ihrem Dokument-Verzeichnis.

Schalter “100g” entsprechend anpassen, etwa “200g” für eine maximal 200 GigaByte große Time-Machine-Datei. Die Datei wird nicht sofort 100 GB, sondern nur knapp 80 MB groß. Erst durch die Sicherheitskopien wächst die Datei später auf die Maximalgröße.

'''Datei auf die Netzwerkfestplatte kopieren'''

Danach die Lokale Datei löschen.

'''Konfigurationsänderung'''

Mit einer Konfigurationsänderung akzeptiert Time Machine auch Netzwerkordner als Backupmedien.

defaults write com.apple.systempreferences TMShowUnsupportedNetworkVolumes 1

Das war’s. Wenn Sie jetzt die Systemeinstellung “Time Machine” öffnen, können Sie über die Schaltfläche “Volume wechseln” auch das Netzlaufwerk auswählen. Ganz wichtig: Wählen Sie den Netzwerkordner, in den Sie in Schritt 4 die “sparsebundle"-Datei kopiert haben.

[Update]: Einige Leser berichten von Problemen bei der Anmeldung in der TimeMachine. Mitunter tritt zum Beispiel der FEhler “OSStatus-Fehler -6602” auf. Die Lösung: Richten Sie auf dem Netzlaufwerk einen neuen Ordner “backup” ein, und legen Sie dort die sparsebundle-Datei ab. Dann klappt’s auch ohne Fehlermeldung.

Quelle s.o. Verfasst 2008 Zugriff 06/2011

Problem unter 10.6 hdiutils der Vorgang wird nicht unterstützt

== Mac Terminal Tipps ==
[[Mac Terminal Tipps]]

== Mac Probleme lösen ==
[[Mac - Probleme beheben]]

Google Maps API - Programmieren für Google Maps

2012-05-04T14:27:28Z

94.216.248.30: /* Google Maps Beispiele */

Die folgenden Code Beispiele basieren i.d.R. auf der Google API Version3, bei der kein API Key mehr benötigt wird.

== Links ==
Google Group zu Google Maps
http://groups.google.com/group/google-maps-js-api-v3

Developer Dokumentation von Apple
http://developer.apple.com/webapps/docs/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html

Android Dokumentation
http://developer.android.com/

=== API Links ===
Google Maps API-Familien (auf deutsch) http://code.google.com/intl/de-DE/apis/maps/

Geocodierung: http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/services.html#Geocoding

Ereignisse (Events): http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/events.html

== Snippets ==
=== Weiterführende und fortgeschrittene Techniken für Google Maps ===
[[Google Maps - Benutzerdefinierte Stile]]

[[Google Maps - eigene Marker und Symbole]]

Hier kommen Links rein...

=== Position des Nutzers bestimmen ===
http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/basics.html#DetectingUserLocation (11/2011)

Google liefert folgendes Code Beispiel. Dabei wird zuerst getestet ob der Browser die HTML5 Geocoding Spezifikation des W3C unterstüzt (http://dev.w3.org/geo/api/spec-source.html). Wenn nicht wird Google Gears getestet und ansonsten eine Fehlermeldung ausgegeben.

<pre>
// Note that using Google Gears requires loading the Javascript
// at http://code.google.com/apis/gears/gears_init.js

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag = new Boolean();

function initialize() {
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Try W3C Geolocation (Preferred)
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
// Try Google Gears Geolocation
} else if (google.gears) {
browserSupportFlag = true;
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeoLocation(browserSupportFlag);
});
// Browser doesn't support Geolocation
} else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}

function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed.");
initialLocation = newyork;
} else {
alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
initialLocation = siberia;
}
map.setCenter(initialLocation);
}
}
</pre>

=== Sensorparameter einstellen ===

Die Anwendung muß angeben ob sie einen Sensor zur Positionsbestimmung benutzt. Z.B. der GPS Empfänger in einem Handy. Wenn nicht muß trotzdem "false" übergeben werden.

<pre>
#
# Example using sensor when loading the Maps JavaScript API
#
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</pre>

=== Optimierungen für Mobilgeräte ===
http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/basics.html#Mobile

Umgebender Div Container (hier mapdiv) mit width:100%. Bei älteren Desktop Browsern kann dies aber zu Schwierigkeiten führen.

Sie können iPhones und Android-Geräte anhand der navigator.userAgent-Eigenschaft im DOM erkennen:
<pre>
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map_canvas");

if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}
</pre>
Dadurch können Sie das Layout für bestimmte Geräte wie in diesem Beispiel verändern und beispielsweise den verfügbaren Platz auf dem Display für jedes Gerät anpassen.

Das iPhone akzeptiert das folgende <meta>-Tag:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

Diese Einstellung gibt an, dass diese Karte im Vollbildmodus angezeigt werden soll und ihre Größe vom Nutzer nicht geändert werden kann. Android-Geräte mit Softwareversion 1.5 (Cupcake) unterstützen diese Parameter ebenfalls. Für den iPhone-Browser Safari muss dieses <meta>-Tag im <head>-Element der Seite enthalten sein.

=== Lokalisierung einer v3 App (Sprachanpassung) ===
==== Sprachlokalisierung und Anpassung der Texte - language Parameter====
Normalerweise nicht notwendig weil die Sprache des Browsers verwendet wird. Wenn doch dann mit dem Language Parameter.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=de">

==== Gebietslokalisierung - region Parameter ====
Normalerweise wird die Domain der Homepage für die Regionserkennung verwendet. Manchmal möchte man die Region verändern damit Google Maps richtig gewichtet. Z.B. kann die Suche nach dem Ort Toledo den Ort in Spanien finden oder in den USA. Wenn der Region Parameter auf es steht liefert er stets den Ort in Spanien.

'''Beispiel'''
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=GB">

=== Richtige API Version laden - der v Parameter ===
http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/basics.html#Versioning

'''Beispiel'''

http://maps.google.com/maps/api/js?v=3.1&sensor=true_or_false

=== Kartentyp ändern ===
Kartentypen werden im Map options-Objekt der Karte mithilfe der mapTypeId-Eigenschaft festgelegt.

Die folgenden Kartentypen sind im Google Maps-API verfügbar:

MapTypeId.ROADMAP zeigt die Standard-Straßenkartenansicht.
MapTypeId.SATELLITE zeigt Google Earth-Satellitenbilder.
MapTypeId.HYBRID zeigt eine Mischung aus der normalen und der Satellitenansicht.
MapTypeId.TERRAIN zeigt eine physische Karte an, die auf Geländeinformationen basiert.

Sie können den Kartentyp einer Karte ändern, indem Sie die setMapTypeId()-Methode der Karte aufrufen.

== Wichtige Google Maps Objekte ==
Wichtige Objekte anhand von Beispiel Definitionen:

=== LatLng Objekt ===
var myLatlng = new google.maps.LatLng(-34.397, 150.644);

=== Options Objekt ===
<pre>
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
</pre>

Wird normalerweise nicht direkt erzeugt sondern als "Literalobjekt" (also als Zeichenfolge) definiert und dann direkt im Map Objekt verwendet und implizit erzeugt (siehe Map Objekt)

==== Wichtige Optionen ====
Einige oft benötigte Optionen und was sie machen:

http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/reference.html#MapOptions

* ''zoom'' - anfänglicher Zoom Level (0 = World) '''Erforderlich'''
* ''mapTypeId'' - anfängliche mapTypeId der Karte. '''Erforderlich'''
* ''center'' - anfängliches Kartenzentrum. '''Erforderlich'''
* ''disableDefaultUI'' - damit kann man die Standard Bedienelemente ausschalten (true,false). Man kann fast alles auch einzeln ein und ausschalten (Maussteuerung, Tastatursteuerung, verschieben der Karte, etc.). Siehe Link oben.
* ''navigationControlOptions'' Anfängliche Anzeigeoptionen für die Navigationssteuerung (position, style).

=== Map Objekt ===
Das Zentrale Objekt.
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

=== Marker Objekt ===
Benötigt als Parameter eine Position und optional das Map Objekt. Wenn dies nicht vorhanden ist kann man den Marker später mit ''setMap'' hinzufügen. Mit setMap(null) kann man den Marker entfernen.

Standardmäßig haben die Marker einen click Listener.

'''Beispiel - Marker hinzufügen'''
<pre>
// Marker für die Achalm
var posAchalm = new google.maps.LatLng(48.493978,9.244276);
var marker = new google.maps.Marker({
position: posAchalm,
map: map,
title:"Achalm"
});
</pre>

=== Info Window Objekt ===
Das folgende Beispiel definiert ein InfoWindow, welches an einen Marker ("marker") gehängt wird und sich bei Klick öffnet.
Es funktioniert also mit dem obigen Marker Beispiel zusammen.
<pre>
// INFOWINDOW
// Inhalt festlegen
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Achalm</h1>'+
'<div id="bodyContent">'+
'<p>Die <b>Achalm</b>, ist der Hausberg der Stadt Reutlingen, ' +
'am Rande der schwäbischen Alb gelegen. '+
'<p>Attribution: Achalm, <a href="http://de.wikipedia.org/wiki/Achalm">'+
'Achalm in der Wikipedia</a>.</p>'+
'</div>'+
'</div>';
// Fenster erzeugen...
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 280
});
// Klick-Listener an Marker hängen der das Fenster öffnet.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
</pre>

== Google Maps Beispiele ==
=== Komplettes Anwendungsbeispiel (Horex) ===
Interessant mit ein paar netten Tricks
<pre>
var map, mapOptions, panoMap, resultBounds, timeout, markers = [];
function initialize() {
// MAP
//var myMapDiv = document.getElementById("map_canvas");
// or with jQuery
var myMapDiv = $("#map_canvas")[0];
var latlng = new google.maps.LatLng(51.4634, 9.5581);
// we need a ID for our new maptype
var HOREX_MAPTYPE_ID = 'HOREX';
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// new control button to select the maptype id
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, HOREX_MAPTYPE_ID]
}
};
var map = new google.maps.Map(myMapDiv, myOptions);
// MAP STYLING
// Neue Map Style Definition
//#D1A456
//#565451
var stylez =
[
{ // Strassen
featureType: "road",
stylers: [
{ visibility: "off" }
]
},
{ //Bahn
featureType: "transit",
stylers: [
{ visibility: "off" }
]
},
{ // POI
featureType: "poi",
stylers: [
{ visibility: "off" }
]
},
{ // Landflächen
featureType: "landscape",
stylers: [
{ visibility: "on" },
{ hue: "#D1A456" },
{ saturation: 65 },
{ lightness: -33 },
{ gamma: 1 }
]
},
{ // Landflächen besiedelung
featureType: "landscape.man_made",
stylers: [
{ visibility: "off" }
]
},
{ // Landflächen natur
featureType: "landscape.natural",
stylers: [
{ visibility: "off" }
]
},
{ // Grenzen allgemein
featureType: "administrative",
elementType: "geometry",
stylers: [
{ lightness: -50},
{ saturation: 0 },
{ gamma: 1 },
{ hue: "#565451" },
{ visibility: "on" }
]
},
{ // Ländergrenzen
featureType: "administrative.country",
elementType: "geometry",
stylers: [
{ hue: "#FFFFFF" },
{ saturation: 100 },
{ lightness: 100 }
]
},
{ // Bundesländer label
featureType: "administrative.province",
elementType: "labels",
stylers: [
{
visibility: "on"
}
]
},
{ // Bundesländer label
featureType: "administrative.locality",
elementType: "labels",
stylers: [
{ visibility: "simplified" },
{ invert_lightness: true },
{ hue: "#565451" },
{ gamma: 1 },
{ saturation: 20 },
{ lightness: 25 }
]
},
{ // Wasser
featureType: "water",
stylers: [
{ visibility: "on" },
{ hue: "#cfd1d2" },
{ lightness: 50 },
{ saturation: -100 },
{ gamma: 1 }
]
}
];
// Map Zuordnung und Name des Stils
var styledMapOptions = {
map: map,
name: HOREX_MAPTYPE_ID
}
var horexMapType = new google.maps.StyledMapType(stylez,styledMapOptions);
// Style auswählen
map.mapTypes.set(HOREX_MAPTYPE_ID, horexMapType);
map.setMapTypeId(HOREX_MAPTYPE_ID);
// Zoom auf Deutschland
//geocoder = new google.maps.Geocoder();
//findAddress(map,"Germany");
// Marker setzen und in Array speichern
var markers=setMarkers(map);
}
function setMarkers(map) {
// This will hold all the markers for the clustering
// Get the JSON data that shall be mapped.
$.getJSON("http://www.horex.com/fileadmin/js/sampledata/horex.json", function(json){
//Make sure we have a markers array, holding some data.
//alert(json.markers.length);
if (json.markers && json.markers.length){
//New bounds object for the total results' bb.
var bounds = new google.maps.LatLngBounds();
//Loop through the JSON array's markers array.
$.each(json.markers, function(i){
///'this' refers to the array element of the current loop iteration index.
var data = this;
// Object position
var point = new google.maps.LatLng(data.lat,data.lng)
// New Object -> extend Bounds
bounds.extend(point);
// Data object that shall be assigned to the marker object.
var marker_data = {
"id": data.id,
"name": data.name,
"title": data.title,
"street": data.street,
"city": data.city,
"country": data.country,
"telephone":data.telephone,
"postcode":data.postcode,
"www": data.www,
"email": data.email,
"lat": data.lat,
"lng": data.lng,
"category": data.category,
"icon": data.icon,
"details": data.details
};
/**
* New google.maps.Marker object for 'this' Object.
**/
var marker = new google.maps.Marker({
map: map,
icon: 'http://www.horex.com/fileadmin/js/'+data.icon,
flat: true,
category: data.category,
title: unescape(data.title),
data: marker_data
});
// Map markers with raising timeout (just eye-catching).
//$.doTimeout(i*300, function(){
marker.setValues({
position: point,
//animation:google.maps.Animation.DROP
});
//}); i++;
// Push the marker object to the markers array.
markers.push(marker);
// Add event listener that will trigger the infoWindow.
google.maps.event.addListener(marker, "click", function(){
// panTo just looks 'nicer' than setCenter.
map.panTo(marker.position);
// Add a delay for a smoother pop-up animation.
$.doTimeout(600, function(){
// Call the custom info Window function.
showDetails(marker.data);
/**
* Workaround for an issue that loads some tiles
* in plain grey when initializing a map and on-
* screen of that map object are timed very close.
**/
google.maps.event.trigger(panoMap, 'resize');
});// End doTimeout callback function
});// end eventListener for Marker
});// End JSON Loop
// Save all markers' bounding box to a global variable.
resultBounds = bounds;
// Set the viewport to optimal fit to all results' bb.
//map.fitBounds(resultBounds);
var actZoom = map.getZoom();
map.setZoom(6);
} // end if json markers
/*
// MarkerClusterer
var markerClusterer = null;
var markerClustererStyles = [{
url: 'http://www.horex.com/fileadmin/js/images/m1.png',
height: 35,
width: 35,
textColor: '#ffffff',
textSize: 10
}, {
url: 'http://www.horex.com/fileadmin/js/images/m2.png',
height: 45,
width: 45,
textColor: '#ffffff',
textSize: 11
}, {
url: 'http://www.horex.com/fileadmin/js/images/m3.png',
height: 55,
width: 55,
textColor: '#ffffff',
textSize: 12
}]
var markerClustererOptions = {
gridSize: 35,
maxZoom: 10,
styles: markerClustererStyles
};
var markerCluster = new MarkerClusterer(map,markers,markerClustererOptions);
*/
});
return markers;
}
/**
* Function showDetails
* @author: Stephan Schmitz <eyecatchup@gmail.com>
*
* @description: Using jQueryUI modal dialogs instead of InfoWindows, to
* show the marker object's data details. Dialog overlays
* contain all custom data that have been assigned to the
* marker and also a street-view map of the markers point
* to enhance the overview. (If there is no streetview
* available, a standard map will be shown.)
**/
function showDetails(data){
// Objects position as google.maps.LatLng object.
var point = new google.maps.LatLng(data.lat,data.lng);
// Set the options for the info window map object to be created.
/*
var panoMapOptions = {
center: point,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
*/
// Initialize the info window map.
/*
panoMap = new google.maps.Map($('#panoMap')[0],
panoMapOptions);
*/
// Set the options for the google.maps.StreetViewPanorama.
/*
var panoramaOptions = {
position: point,
pov:{
heading: 34,
pitch: 10,
zoom: 0}};
*/
// Initialize the google.maps.StreetViewPanorama.
/*
var panorama = new google.maps.StreetViewPanorama(
$('#panoMap')[0],panoramaOptions);
*/
// Set the Streeview Overlay.
//panoMap.setStreetView(panorama);
/**
* The 'template' for the data, shown in the info window.
**/
var br = '<br>';
$('#data').empty()
.html(
'<div class="headerimg"><img src="http://www.horex.com/fileadmin/js/images/vertrieb_logo.gif"></div>'+
'<div class="headline">'+data.title+'</div>'+
'<div class="headline2">'+data.name+'</div>'+
'<div>'+data.postcode+' '+data.city+'</div>'+br+
'<div>'+data.street+'</div>'+
'<div>Tel.: '+data.telephone+'</div>'+
'<div>E-Mail: <a href="mailto:'+data.email+'">'+data.email+'</a></div>'+
'<div>Website: <a href="http://'+data.www+'" target="_blank">'+data.www+'</a></div>'+
'<div class="geosearch-details">'+data.details+'</div>'+
'<div class="map-printlink" style="cursor:pointer; width:21px;" onclick="window.print();"><img width="21" height="16" border="0" title="drucken" alt="drucken" style="margin-top: 20px;" src="http://www.horex.com/fileadmin/templates_v2/media/print.png"></div>'+
'<div class="route"><strong>Route finden</strong>'+br+
'<form id="routefinder" action="http://maps.google.de" method="GET" target="_blank">'+
'<input type="text" id="saddr" name="saddr" value="Abfahrtsort" onclick="if(this.value==\'Abfahrtsort\')this.value=\'\';"/>'+
'<input type="hidden" id="daddr" name="daddr" value="'+data.city+','+data.street+'"/>'+br+
'<input type="submit" class="route_button" value="Absenden"></form></div>'
);
/**
* Set the dialog options for the info windows.
**/
$('#dialog').dialog({
width: 675,
modal: true,
position: ['center','center'],
title: " ",
autoOpen: true,
closeOnEscape:true,
draggable: true,
show: "slide",
hide: "slide"
});
}
// Zoom auf Adresse Funktion (mit geocoder siehe init)
function findAddress(map,address) {
if (!address)
var address=document.getElementById("countryselect").value;
if ((address != '') && geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
if (results && results[0] && results[0].geometry && results[0].geometry.viewport)
map.fitBounds(results[0].geometry.viewport);
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
/**
* jQuery doTimeout: Like setTimeout, but better! - v1.0 - 3/3/2010
* http://benalman.com/projects/jquery-dotimeout-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
**/
(function($){var a={},c="doTimeout",d=Array.prototype.slice;$[c]=function(){return b.apply(window,[0].concat(d.call(arguments)))};$.fn[c]=function(){var f=d.call(arguments),e=b.apply(this,[c+f[0]].concat(f));return typeof f[0]==="number"||typeof f[1]==="number"?this:e};function b(l){var m=this,h,k={},g=l?$.fn:$,n=arguments,i=4,f=n[1],j=n[2],p=n[3];if(typeof f!=="string"){i--;f=l=0;j=n[1];p=n[2]}if(l){h=m.eq(0);h.data(l,k=h.data(l)||{})}else{if(f){k=a[f]||(a[f]={})}}k.id&&clearTimeout(k.id);delete k.id;function e(){if(l){h.removeData(l)}else{if(f){delete a[f]}}}function o(){k.id=setTimeout(function(){k.fn()},j)}if(p){k.fn=function(q){if(typeof p==="string"){p=g[p]}p.apply(m,d.call(n,i))===true&&!q?o():e()};o()}else{if(k.fn){j===undefined?e():k.fn(j===false);return true}else{e()}}}})(jQuery);
</pre>
Beispiele auf Google: http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/examples/index.html
=== Simple Map ===
<pre>

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

</pre>