Freitag, 5. Juni 2009

Blogger, Google Maps und Docs: Wo kommst du her und Wer bist du?

Ein kleines Beispiel, wie man eine Google Map und eine Eingabemaske - ein Formular aus Google Docs (Text und Tabellen) - in ein Blog-Post einbaut, das Eingaben zum Standort und eine (optionale) Beschriftung aufnimmt.

Nach der Eingabe und dem absenden werden die Angaben in einem Google Docs Spreadsheet gespeichert und sofort (Real-Time) in der eingefügten Karte angezeigt.
Hinweis: Manchmal muss man aber einen Browser-Refresh durch drücken der Taste F5 auslösen.

Zum Beispiel könnte man das nutzen, um für einen Ausflug, Ausfahrten in der Gruppe oder eine Feier etc. einen Ort, Sehenswürdigkeiten oder Routen vorzuschlagen. Die Blog-Leser können dann ihrerseits Vorschläge eingeben.

In meinem Beispiel, könnt ihr das einfach nutzen um euren Standort einzugeben (muss ja nicht exakt sein, Nachbarstadt!) und euren Nicknamen und ggf. etwas Text.
Hinweis: Standorte die sich aufgrund der Angabe nicht unterscheiden, z.B. nur einen Stadtnamen wie Berlin, kann Google Maps nicht als zwei verschiedene Standort auflösen und in der Karte anzeigen. Danke Stefan für den Hinweis)

Achtung: Je nach Anzahl der Einträge, dauert es eine Weile bis das die Einträge in der Karte angezeigt werden! Maximal 300 Zeilen/Einträge habe ich eingestellt.





Mein Dank geht an Rick für das Beispiel , Thank you Rick ...

Kurzer Ablauf wie ich das realisiert habe - Rick hat das Formular anders eingebunden:
Im Spreadsheet werde zwei Felder angelegt, Standort und die Beschriftung als letztes Feld (Inhalt wird in der Maps beim klicken auf den Marker angezeigt)
Standardmäßig enthält eine neue Tabelle nur 100 Zeilen. Ich habe den Wert auf 300 Zeilen erhöht.
Im Spreadsheet habe ich dann über den Menüpunkt "Formular" das Eingabeformular erstellt, editiert und mir den Code zum einbinden in dieses Post kopiert.
Anmerkung: Im Spreadsheet wird mit dem hinzufügen eines Formulars, automatisch eine neue Spalte "Zeitstempel" erstellt.

Das veröffentlichen der Tabelle nicht vergessen!

Google-Docs-Blogger-Realtime
In die Tabelle habe ich mir das angebotene Maps-Gadget über das Docs-Menü hinzugefügt.
Im Gadget habe ich als Datenbereich B2:C300 angegeben.

Die Karte zum einbinden in das Blog-Post

Update:
Im Maps-Gadget wird dann ein Code zum einbinden angeboten denn man ins Blog-Post einfügt.
Ich habe das Post noch mal überarbeitet, da beim ersten Test das einbinden des Javascript-Aufruf in Blogger nicht funktioniert hatte.
Rick hat mich dann aber aufgeklärt. DANKE!

Jetzt muss ich nur noch wissen, ob andere Leser die Karte auch sehen und sich eintragen können, OHNE das ein Aufforderung zu einem Log-IN (Google-Konto) kommt!

Anmerkung: Man sollte nicht vergessen, dass mit diesen sehr einfachen Mitteln eine "Mini-Datenbank" zu realisieren ist (den Profi schüttelt es jetzt ;-).
Ohne jegliche Programmierung kann aber nur ein extrem einfaches System realisiert werden.
Es zeigt aber auch auf, was man bereits mit simplen Bordmitteln (Docs und Blogger) machen kann. Mehr soll es ja nicht sein ...

Schade das die Performance bei der Anzeige der Standorte in Maps etwas langsam ist.
OK, es muss ja jeder einzelne Standort aus der Tabelle, in Google Maps erst noch ermittelt und ins richtige Format übersetzt werden (GeoCoding).
Dazu kommt ja noch, dass das ganze über verschiedene Google-Plattformen läuft:
Blogger.com, Google Docs und Google Maps.

NoodleGei.blogspot.com

Ähnliche Beiträge zum Thema/Kategorie:



4 Kommentar(e) zum Beitrag:

stefan hat gesagt…

Ich konnte die Karte sehen und mich auch eintragen.

Allerdings scheint mit dem Eintragen irgendwas nicht so richtig zu funktioniert...oder mit dem Anzeigen nachher. Nach meinem ersten Eintrag wurde Deiner nicht mehr angezeigt. Ein paar Minuten später war er dann wieder da.

Ein erneuter Eintrag am selben Standort hat dann dazu geführt, dass jetzt mein erster Eintrag nicht mehr erkennbar ist.

NoodleGei hat gesagt…

Hi Stefan,
danke für dein Feedback.
In der Tat, Einträge die den gleichen Standort nutzen werden nicht angezeigt.
In deinem Fall, hast du zweimal Herford angegeben.

Google Maps kann dann diese Angaben nicht in zwei verschiedene Standorte auflösen und mit einem Marker versehen, da exakt die gleichen Längen- und Breitengrade aufgelöst werden.
Der letzte Eintrag von dir, hat dann gewonnen.

Wenn man zusätzlich zwei unterschiedliche Strassennamen in einem Ort nutzt, klappt es.
Wie groß die Unterschiede von verschiedenen Hausnummern einer Strasse sein müssen, habe ich noch nicht getestet.

Ich habe auch nochmal einen Eintrag erstellt und hatte das gleiche Problem mit der Anzeige, nach dem ich die Angaben abschickt hatte.
Das absenden löst anscheinend nicht immer explizit einen Refresh der eingebundenen Karte aus.
Obwohl es bei meinen ersten Tests funktioniert hatte!
Im Grunde sind es ja zwei verschiedene Funktionen.
1. Übertragen und speichern von Angaben über ein Docs-Formular, in ein Spredsheet
2. Anzeigen von Geo-Informationen in einer Map

Das synchronisieren ist das Problem.
Ok, mit einem Browser-Refresh klappte es dann sofort.
So soll das eigentlich aber nicht sein.

Aber genau deswegen wird ja getestet ;-).
Ich werde mein Post noch einem Update unterziehen.

Stefan Sarzio hat gesagt…

Ist dann wohl ein Bug in Maps. Das schränkt den Nutzen natürlich ziemlich ein (bitte nicht als Vorwurf verstehen!) - sowohl wenn man keine allzu exakten Eingaben machen will; als auch bei Umfragen, bei denen es z.B. um konkrete Vorschläge für Sehenswürdigkeiten oder Orte geht, an denen man sich treffen will.

NoodleGei hat gesagt…

Das Beispiel soll eigentlich nur die Lust aufs ausprobieren wecken, mal über den Tellerrand schauen und das Interesse für Webtechnologien wecken.
Auch wenn es nur simple Beispiele sind.
Viel mehr will ich mit diesem Blog ja nicht erreichen ;-).

Ist ja nur in 5 Minuten entstanden und bietet bestimmt noch mehr Ausbaumöglichkeiten.
Mehr Spalten einfügen, einbinden der eigentlichen Tabelle, Extraktion von Textteilen usw.
Es kommt halt auf den genauen Anwendungszweck und den Leserkreis an.

Kommentar veröffentlichen

Kommentare bitte fair und im rechtlich erlaubten Rahmen verfassen!
Die Kommentare und ggf. hinterlassene URLs werden von mir überprüft. Kommentare die für blaue Pillchen, Glücksspiele, bestimmte Bilder/Videos, Abzocker-Dienste usw. werben, werden gelöscht.

Kommentare von SEO-Link-Builder sind ebenso unerwünscht!

In den Kommentare können die HTML-Tags für:
kursiv = <i>Testwort</i>
fett = <b>Testwort</b>
Links = <a href="http://www.deineURL.de/">Link Text</a>
genutzt werden. Einfach die o.g. Beispiele kopieren und mit den eigenen Werten ersetzen.

  © Blogger template Columnus by Ourblogtemplates.com 2008

Back to TOP