Eigene Blogmap mit GoogleMaps

Olaf · 12.11.2005, 21:46

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...apbeispiel.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-Code:

<html>
 <head>
  <title>Eigene Blogmap mit GoogleMaps</title>
<script src="http://maps.google.com/maps?file=api&amp;v=1&amp;key=DEIN_GOOGLEMAP_API_KEY" type="text/javascript"></script>
 </head>
<body>



<div id='map' style='width: 100%; height: 350px'></div>

  <script type="text/javascript">
  //<![CDATA[

  var map = new GMap(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.centerAndZoom(new GPoint(11.0224, 50.9737), 12);

  // Creates a marker whose info window displays the given number
  function createMarker(point, number)
  {
  var marker = new GMarker(point);
  // Show this markers index in the info window when it is clicked
  var html = number;
  GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
  return marker;
  };

  // erster Eintrag
  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);

  // zweiter Eintrag
  var point = new GPoint(6.9599,50.9405);
var marker = createMarker(point, '<a href="http://wordpress-deutschland.org/">Köln</a><br/><br/>Hallo, ich bin eine Beschreibung!');
  map.addOverlay(marker);

   // dritter Eintrag
  var point = new GPoint(11.5803,48.1391);
var marker = createMarker(point, '<a href="http://wordpress-deutschland.org/">Köln</a><br/><br/>Hallo, ich bin eine Beschreibung!');
  map.addOverlay(marker);


 //]]> </script>
 
</body>
</html>

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

<script src="http://maps.google.com/maps?file=api&v=1&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

ratterobert · 12.11.2005, 21:52

Zitat:

Zitat von Olaf

Für das Beispiel habe ich Erfurt als Mittelpunkt gewählt [...]

da freu ich mich, ehrlich gesagt, ein kleines bißchen

funzel · 07.01.2006, 16:52

Leider gehts bei mir nicht, obwohl ich alles so gemacht habe

Selbst bei der dem API-Beispiel-Code auf Google-Seite gibts nene Fehler

Ich hoffe du kannst mir helfen...
Die Seite: hier klicken

Funzel

Olaf · 07.01.2006, 17:22

Bei dir fehlt noch jede Menge Code, lade dir das Beispiel mal runter und teste es nochmal.

funzel · 07.01.2006, 17:56

habs getan und wieder ein fehler

Olaf · 07.01.2006, 18:16

Code:

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

Du musst im Header "DEIN_GOOGLEMAP_API_KEY" mit deinen API-Key ersetzen.

funzel · 07.01.2006, 18:44

ok, hatte vergessen den Code einzutragen... trotzdem gehts nicht...

Kossi · 14.01.2006, 09:48

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...

Kossi · 14.01.2006, 10:00

Jetzt funnktioniert es! Für einen Hinweis über die Einbindung in die Seiten wäre ich aber trotzdem noch sehr dankbar.

eric42 · 11.05.2006, 22:30

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