1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Eigene Blogmap mit GoogleMaps

Dieses Thema im Forum "Feedback und Ankündigungen" wurde erstellt von Olaf, 12. November 2005.

  1. Olaf

    Olaf WPDE-Team
    Mitarbeiter

    Registriert seit:
    3. September 2004
    Beiträge:
    2.740
    Zustimmungen:
    41
    Im folgenden eine kurze Anleitung zur Erstellung einer eigenen Blogmap mit GoogleMaps. Das Beispiel greift nur die grundlegendsten Möglichkeiten auf, mit ein bisschen Einarbeitung lässt sich die Karte beliebig erweitern.

    Eine ausführliche Dokumentation der GoogleMaps API gibt`s hier:
    http://www.google.com/apis/maps/


    So sieht das Endergebnis aus:
    http://blogmap.wordpress-deutschland.org/mapbeispiel.php


    Längen- und Breitengrad
    Punkte auf der Karte werden durch Längen- und Breitengrad angegeben. Längen- und Breitengrad eines Ortes kannst du bei Multimap.com abfragen. Breiten- und Längengrad müssen in Dezimalzahlen angeben werden! Die Dezimalangaben stehen bei Multimap.com in den Klammern!



    Bevor du jetzt anfänst musst du dir zuallerst einen "Google Maps API key" besorgen:
    http://www.google.com/apis/maps/signup.html
    Ohne diesen Key kannst du keine Map anzeigen!


    Jetzt speichere das folgende Script (siehe auch Anhang) als "mapbeispiel.php":

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

    1. Schritt
    Öffne die Datei in deinem Editor...

    <script src="http://maps.google.com/maps?file=api&amp;v=1&amp;key=DEIN_GOOGLEMAP_API_KEY" type="text/javascript"></script>

    ...und ersetze "DEIN_GOOGLEMAP_API_KEY" mit deinem zuvor beantragten Key.


    2. Schritt
    Die Karte braucht einen Mittelpunkt und einen Zoomfaktor, beides stellst du in der folgenden Zeile ein:

    map.centerAndZoom(new GPoint(11.0224, 50.9737), 12);

    Für das Beispiel habe ich Erfurt als Mittelpunkt gewählt und einen Zoomfaktor von 12 angegeben. Die erste Angabe ist der Längengrad, die zweite der Breitengrad. Welchen Zoomfaktor du wählst bleibt dir überlassen.

    map.centerAndZoom(new GPoint(Längengrad, Breitengrad), Zoomfaktor);


    3. Schritt
    Im Beispiel habe ich drei Punkte eingetragen: Köln, Berlin und München. Jeder Eintrag ist gleich aufgebaut:

    var point = new GPoint(13.4119,52.5238);
    var marker = createMarker(point, '<a href="http://wordpress-deutschland.org/">Berlin</a><br/><br/>Hallo, ich bin eine Beschreibung!');
    map.addOverlay(marker);

    Um einen weiteren Beitrag hinzuzufügen, brauchst du lediglich diese drei Zeilen zu kopieren und unter dem letzten Eintrag einzufügen.

    var point = new GPoint(Längengrad,Breitengrad);
    var marker = createMarker(point, 'BESCHREIBUNG');
    map.addOverlay(marker);



    ...das war`s auch schon! Wie gesagt, wenn du dich ein bisschen in die GoogleMaps API Dokumentation einliest, kannst du deine Karte beliebig erweitern. Um die Karte in dein Blog zu integrieren gibt es mehrere Möglichkeiten, du kannst zB ein Page-Template anlegen oder die Karte mit einem iframe anzeigen.

    Ich hoffe das hilft erstmal weiter. Bitte stellt mir keine Fragen zum Feintuning, dafür gibt es die Dokumentation, Fachblogs und Newsgroups die sich ausschliesslich mit dem Thema beschäftigen.

    So long,
    Olaf
     
    #1 Olaf, 12. November 2005
    Zuletzt bearbeitet: 13. November 2005
  2. ratterobert

    ratterobert Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Januar 2005
    Beiträge:
    1.254
    Zustimmungen:
    0
    da freu ich mich, ehrlich gesagt, ein kleines bißchen :D
     
    #2 ratterobert, 12. November 2005
  3. funzel

    funzel Member

    Registriert seit:
    7. Januar 2006
    Beiträge:
    5
    Zustimmungen:
    0
    Leider gehts bei mir nicht, obwohl ich alles so gemacht habe :(
    Selbst bei der dem API-Beispiel-Code auf Google-Seite gibts nene Fehler :confused:
    Ich hoffe du kannst mir helfen...
    Die Seite: hier klicken

    Funzel
     
    #3 funzel, 7. Januar 2006
  4. Olaf

    Olaf WPDE-Team
    Mitarbeiter

    Registriert seit:
    3. September 2004
    Beiträge:
    2.740
    Zustimmungen:
    41
    Bei dir fehlt noch jede Menge Code, lade dir das Beispiel mal runter und teste es nochmal.
     
    #4 Olaf, 7. Januar 2006
  5. funzel

    funzel Member

    Registriert seit:
    7. Januar 2006
    Beiträge:
    5
    Zustimmungen:
    0
    habs getan und wieder ein fehler :(
     
    #5 funzel, 7. Januar 2006
  6. Olaf

    Olaf WPDE-Team
    Mitarbeiter

    Registriert seit:
    3. September 2004
    Beiträge:
    2.740
    Zustimmungen:
    41
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Du musst im Header "DEIN_GOOGLEMAP_API_KEY" mit deinen API-Key ersetzen.
     
    #6 Olaf, 7. Januar 2006
  7. funzel

    funzel Member

    Registriert seit:
    7. Januar 2006
    Beiträge:
    5
    Zustimmungen:
    0
    ok, hatte vergessen den Code einzutragen... trotzdem gehts nicht...
     
    #7 funzel, 7. Januar 2006
  8. Kossi

    Kossi Member

    Registriert seit:
    8. Januar 2006
    Beiträge:
    9
    Zustimmungen:
    0
    Hallo,

    vielen Dank für die tolle Anleitung! Ich habe alles so gemacht, wie Du gesagt hast. Leider kann ich aber noch keine Karte sehen. Woran liegt das? Und kannst Du vielleicht nochmal für ganz Doofe erklären, wie man die Karte dann in eine Seite einbindet?

    Herzlichen Dank!
    Gruß,
    Kossi...
     
    #8 Kossi, 14. Januar 2006
    Zuletzt bearbeitet: 3. Februar 2007
  9. Kossi

    Kossi Member

    Registriert seit:
    8. Januar 2006
    Beiträge:
    9
    Zustimmungen:
    0
    Jetzt geht's

    Jetzt funnktioniert es! Für einen Hinweis über die Einbindung in die Seiten wäre ich aber trotzdem noch sehr dankbar. :)
     
    #9 Kossi, 14. Januar 2006
  10. eric42

    eric42 Member

    Registriert seit:
    11. Mai 2006
    Beiträge:
    11
    Zustimmungen:
    0
    Hallo Leute,

    das tut bei mir ganz gut. Allerdings habe ich das Problem, dass der Code im Header nun auf jeder Seite steht und bei allen anderen Seiten als der mit der Map gibt es jetzt eine Fehlermeldung, dass der API-Key nicht stimmt.

    Ich muss es wohl schaffen, dass der Header-Code nur auf der Map-Seite im Header steht - aber wie schaffe ich das denn?

    Zur Info: Ich habe das mit "Seite erstellen" gemacht - habe oben also einen Pfad (www.meineseite.de/die-Map-Seite.
    Es geht um www.leonart-live.de (die Seite mit der Map habe ich abgeschaltet, weil die Fehlermeldung ja jeden nervt...)

    habe ich mein Problem richtig erklärt?

    vielen dank!!!
    ecu
     
    #10 eric42, 11. Mai 2006
    Zuletzt bearbeitet: 11. Mai 2006
  11. trip

    trip Well-Known Member

    Registriert seit:
    14. März 2005
    Beiträge:
    50
    Zustimmungen:
    0
    #11 trip, 12. Mai 2006
    Zuletzt bearbeitet: 12. Mai 2006
  12. eric42

    eric42 Member

    Registriert seit:
    11. Mai 2006
    Beiträge:
    11
    Zustimmungen:
    0
    Habe mein Problem jetzt gelöst. Ein kleiner Workaround - der euch vielleicht interessiert:

    Die Map habe ich auf eine eigene Seite eingebunden und dort den korrekten API-Key eingegeben.

    Und auf die Seite (das geht auch mit Beiträgen) habe ich dann einen IFrame eingebaut, der auf diese Seite referenziert.

    Sieht geil aus: http://www.leonart-live.de/anfahrt/ Oder? *stolzsei*

    grüße
    eric
     
    #12 eric42, 12. Mai 2006
  13. 051276

    051276 Well-Known Member

    Registriert seit:
    2. November 2004
    Beiträge:
    47
    Zustimmungen:
    0
    Kannst du mal den Code deiner Map bzw. der Templatevorlage posten? Ich steh vor dem Problem, das ich auch eine Map auf einer Seite in einem Blog einbauen muss, es aber bisher noch nicht hinbekommen hab.
    Die Map läuft soweit aber ich bekomme sie irgendwie nicht ins Blog.
     
    #13 051276, 4. Juni 2006
  14. Gecko-1

    Gecko-1 Well-Known Member

    Registriert seit:
    5. Februar 2006
    Beiträge:
    146
    Zustimmungen:
    0
    Also ich benutze folgendes Plugin:
    http://www.cyberhobo.net/downloads/geo-mashup-plugin/

    Bin damit sehr zufrieden. Damit werden meine Artikel die mit Koordinaten belegt sind in der karte angezeigt. Gibt dafür einen Link - Auf Karte zeigen. Des weiteren geht es auch umgekehrt, also klick auf Symbol in Karte führt zum Artikel. (Zu sehen bei meiner Blog-Map)

    Für individuelle Punkteeingabe in Karten benutze ich eine zweite Karte. Ist ein kostenloser Service.

    http://www.yourgmap.com/
    (Zu sehen bei meiner Cache-Map)
     
    #14 Gecko-1, 5. Juni 2006
  15. 051276

    051276 Well-Known Member

    Registriert seit:
    2. November 2004
    Beiträge:
    47
    Zustimmungen:
    0
    Ich habe ja meine Karte bereits fertig auf ner html Seite, die läuft auch soweit. Ich will die Karte in einem Beitrag anzeigen oder auf einer Seite im Blog.

    Das Plugin hilft mit dabei leider auch nicht.
     
    #15 051276, 5. Juni 2006
  16. chrispie

    chrispie Member

    Registriert seit:
    8. Mai 2007
    Beiträge:
    5
    Zustimmungen:
    0
    #16 chrispie, 8. Mai 2007
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden