Artikel Datenbank Foren-Übersicht Artikel Datenbank
Computer - Internet - Multimedia
 
 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Google Maps in Homepage einbinden

 
Neues Thema eröffnen   Neue Antwort erstellen    Artikel Datenbank Foren-Übersicht -> Webpage Design
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
GrayGhost
Site Admin


Anmeldedatum: 06.06.2007
Beiträge: 148
Wohnort: Achim (bei Bremen)

BeitragVerfasst am: 22.07.2007, 13:48    Titel: Google Maps in Homepage einbinden Antworten mit Zitat

Google Maps in Homepage einbinden

Vorbedingung für die Nutzung von GoogleMaps ist ein gültiges Google Konto. Du musst dir über dieses für deine Homepage einen Key besorgen. Dies ist für nichtkommerzielle Webseiten kostenlos.

Beispiel für das Einbinden einer Karte (key ist durch xxx ersetzt):

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=xxxx_xxxx_xxxx"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>


Dieses Beispiel ist sehr einfach und zeigt einen Kartenausschitt von Palo Alto. Natürlich möchtest du eine geografische Position deiner Wahl einsetzen. Die Zenter-Position der Karte wird in dieser Zeile festgelegt:

Code:
map.setCenter(new GLatLng(37.4419, -122.1419), 13);


Als Parameter sind Lat (Latitude=Breitengrad), Lng (Longitute=Längengrad), sowie der Zoomfaktor angegeben. Als Zoomfaktor sind Werte von 1 bis 19 zulässig, wobei 19 die stärkste Vergrößerung angibt. Beachte bitte, dass nicht alle Gebiete den Faktor 19 zulassen, da sie noch nicht ausreichend genau erfasst sind. Bis 17 sollte es aber allemal möglich sein. Bei Längen- und Breitenangaben ist zu beachten, dass nördliche- und östliche Angaben positiv und südliche- sowie westliche Angaben negativ angegeben werden.

Ein Problem, vor dem du nun stehen wirst, ist die etwas eigenwillige Angabe der geografischen Position. Normalerweise wird diese in Grad, Minuten und Sekunden, oder in Grad, Minuten und den Dezimalen der Minuten angegeben. Die exakte Position meiner Hütte ist in diesen Schreibweisen folgendermaßen:

Länge: 58° 0' 38'', Breite: 9° 2' 59'' oder
Länge: 58:00,6322, Breite: 009:02,98284

Google verwendet aber nur Grad und die Nachkommastellen. Falls du eine Position aus einer Karte ermittelt hast, dann musst die die Koordinaten entsprechend umrechnen. Beachte bitte auch eine ggf. notwendige geodätische Datum-Transformation, sofern du die Angaben nicht aus einer WGS84 Karte entnommen, oder mittels GPS ermittelt hast. Bei Fragen zu diesem Thema, kontaktiere mich bitte unter folgender E-Mail Adresse: forum@eddys-domain.de

Nun steht nicht jedem das notwendige Kartenmaterial zur Verfügung, aber es besteht auch die Möglichkeit die Koordinaten direkt über Google Maps zu ermitteln. Dabei gehst du folgendermaßen vor:

1. Suche den gewünschten Ort über http://maps.google.com/
2. Zoome soweit wie möglich in die Karte zu deinem gewünschten Ort
3. Klicke mit der rechten Maustaste auf den exakten Ort deiner Wahl
4. Wähle "Karte hier zentrieren"
5. Klicke rechts oberhalb der Karte auf den Link "URL zu dieser Karte"
6. Klicke mit der rechten Maustaste auf den eingeblendeten Link und kopiere ihn.
7. Füge den Link in einen Editor wie Notepad ein.

Der Link wird nach einer Suche nach einer Location so aussehen:
http://maps.google.com/maps?f=q&hl=de&geocode=&q=
Achim,+Verden,+Niedersachsen,
+Deutschland&sll=37.0625,-95.677068
&sspn=46.946584,81.386719&ie=UTF8&cd=1
&mpnum=0&ll=53.010536,9.049746
&spn=0.002192,0.004967&t=k&z=18&iwloc=addr&om=1

Wie du in der markierten Zeile siehst, liefert dir Google die Koordinaten "frei Haus". Diese kannst du dann ohne komplizierte Umrechnungen direkt verwenden.

Falls du die o.a. Informationen umsetzt, dann wirst du zu deiner Enttäuschung feststellen, dass du lediglich eine Karte angezeigt bekommst. Mein Ziel war aber, eine Möglichkeit zum Zoomen zu haben, sowie eine Auswahl zwischen Karte und Satelliten-Darstellung anbieten zu können. Dies ist aber über die Möglichkeiten der Google API leicht möglich. Du musst dein Script nur um die folgenden Zeilen erweitern:

Code:
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_SATELLITE_MAP);


Damit fügst du noch das Control für Zoom und Pan ein, sowie die Möglichkeit zwischen Karten-, Satellit- und Hybriddarstellung zu wählen. Das fertige Script sieht dann so aus:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXXXXXXXXXXX"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(53.010536, 9.049714), 17);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setMapType(G_SATELLITE_MAP);
      }
    }

    //]]>
    </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 800px; height: 600px"></div>
  </body>
</html>


Im Body Bereich definierst du in einem DIV Tag die Größe deiner Map in Pixel. Im o.a. Beispiel sind dies 800x600 Pixel.

Die Dokumentation zur Google Maps API findest du hier:
http://www.google.com/apis/maps/documentation/

Wenn wissen möchtest wo ich wohne, dann guckst du hier:
http://www.eddys-domain.de/artikel/scripts/googlemap.htm

MfG
GrayGhost aka Erhard Olszok
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden E-Mail senden Website dieses Benutzers besuchen Yahoo Messenger
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    Artikel Datenbank Foren-Übersicht -> Webpage Design Alle Zeiten sind GMT
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de