Chursdorfer Infos

gleich zum Online-editieren

Über die folgenden Links können Sie nützliche Hilfe-Fenster für das Arbeiten in unseren Editierfenstern öffnen. Sie können so jederzeit Farben auswählen oder die richtige Syntax zum Einbau in Ihre HTML-Datei nachprüfen. Die unterschiedlichen Möglichkeiten sollten Sie unbedingt auf die Lauffähigkeit in verschiedenen Browsern testen, da heutige Browser viele CSS- oder auch einfache HTML-Befehle ignorieren oder anders als gewollt ausgeben!

Farben

Werte

Rahmen

Schrift

Mit GoogleMaps stellt Google ein hervorragendes Tool zur Verfügung, welches es Webmastern ermöglicht Kartenmaterial in ihre Website einzubinden, ohne eine Verletzung von Urheberrechten befürchten zu müssen. Beachten Sie jedoch hierbei unbedingt die Nutzungsbedingungen!
Voraussetzung für die Nutzung von GoogleMaps ist die Einbindung des sog. API-Key, den Sie HIER für Ihre Domain generieren müssen! Hier wird auch eine von zahlreichen Möglichkeiten für die Einbindung in Ihre Website vorgeschlagen, auf die im Folgenden näher eingegangen werden soll. Die Beispiele können Sie in unseren Editierfeldern gleich selbst testen und nach Ihren Wünschen editieren! Nutzen Sie diese Editierfelder wie den "Quelltextmodus" Ihres HTML-Editors. Achten Sie jedoch unbedingt auf die Beibehaltung der richtigen Syntax! Im Fehlerfall wird dann Ihre Test-Datei nicht mehr laufen. Laden Sie dann einfach die Seite neu! Wenn Sie hier etwas experimentieren wollen, benutzen Sie bitte oben die Hilfefenster für Farben, Schrift, numerische Werte oder Rahmen.

1. Google Maps Grundsyntax mit Inforahmen und Navigation:
Im ersten Beispiel sehen Sie die Grundsyntax zur Einbindung in einfache HTML-Seiten. Im Head der HTML-Datei wird zunächst der Google API-Key eingebunden, den Sie wie oben beschrieben für Ihre Domain generieren müssen! Wenn Ihre Webseite über 2 (oder mehrere) Domains erreichbar ist, wird für jede Domain ein weiterer API-Key erforderlich. Ansonsten wird von GoogleMaps eine Fehlermeldung ausgegeben!
Als nächstes wird im Head ein JavaScript eingefügt, welches die gewünschten Functionen des vorher eingebundenen Google-Scripts aufruft! Dieses Script können Sie weitgehend frei nach Ihren Wünschen gestalten. Hier wurde zur Demo eine Navigation und ein Info-Fenster eingebunden. Diese Function [hier mit onload="Gload()"] wird im Body-Tag aufgerufen und in unserem Beispiel in einen Div-Bereich im Body ausgegeben. Diesen Div-Tag können Sie wie gewohnt über Style [hier z.Bsp. width... height... border...] formatieren, und somit das Aussehen Ihrer eingebundenen Karte bestimmen! Achten Sie hierbei auf den gleichen Elementnamen im Script und Div-Tag [hier "Googlemap"]! Der im Body-Tag notierte Aufruf der function onunload="GUnload()" beendet Google Maps beim Verlassen der Seite.

<html> <head> <script src="http://maps.google.com/maps?file=api&v=2&key=x--- Ihr Google API-Key ---x" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function Gload() { if (GBrowserIsCompatible()) { var GGmap = new GMap2(document.getElementById("Googlemap")); GGmap.addControl(new GSmallMapControl());//kleine Navigation GGmap.setCenter(new GLatLng(50.790221,12.240668), 8);//Breite, Länge und Zoomwert festlegen GGmap.setMapType(GGmap.getMapTypes()[3]);//Anzeigetyp (1, 2 oder 3) GGmap.openInfoWindow(GGmap.getCenter(), "Seelingstädt OT. Bahnhof, Braunichswalder Weg<br>... ziehen Sie die Luftaufnahme mit der Maus! ..."); } } //]]> </script> </head> <body onload="Gload()" onunload="GUnload()"> <div id="Googlemap" style="width:610px; height:370px; border:thin solid blue"> </div> </body> </html>

(Sie müssen ggf. bei erneutem Dateitest Ihren Browser aktualisieren!)

2. Google Maps mit Angabe der geogr. Breite, Länge und Zoomwert:
Im folgenden zweiten Beispiel wird auf Formatierungen im Head verzichtet und nur die Ausgabe im Body-Tag gewählt. Dadurch ist es problemlos möglich GoogleMaps in PHP-Seiten oder auch sog. CMS [Content Management Systeme] einzubinden. Gestartet wird im vorliegenden Fall unsere function: Gload() im unteren Teil des JavaScripts browserabhängig, wodurch sich ein onload() im Body-Tag erübrigt.

<div id="Googlemap" style="width:600px; height:400px; border:2px solid green"></div> Breite, Länge: <div id="coord" style="font-weight:bold; font-size:10pt"></div> Zoom: <span id="zoom"></span> <script type="text/javascript"> //<![CDATA[ function Gload() { if (GBrowserIsCompatible()) { var GGmap = new GMap2(document.getElementById("Googlemap")); GEvent.addListener(GGmap, "move", function() { var center = GGmap.getCenter(); document.getElementById("coord").innerHTML = center.toUrlValue(); document.getElementById("zoom").innerHTML = GGmap.getZoom(); }); GGmap.setCenter(new GLatLng(50.790221,12.240668), 6); GGmap.addControl(new GSmallMapControl());//kleine Navigation GGmap.setMapType(GGmap.getMapTypes()[3]);//Anzeigetyp (1, 2 oder 3) GGmap.openInfoWindow(GGmap.getCenter(), "Deutschland / Ostthüringen /Seelingstädt OT. Bahnhof<br>... ziehen Sie die Luftaufnahme mit der Maus! ...<br>oder nutzen Sie die Navigation Links!"); } } //////////GoogleMaps laden/////////// if (window.attachEvent) {window.attachEvent("onload", function() { Gload(); } );} else {window.addEventListener("load", function() { Gload(); }, false);} //]]> </script>

(Sie müssen ggf. bei erneutem Dateitest Ihren Browser aktualisieren!)

3. Google Maps mit anklickbaren Markern:
In den folgenden Beispielen wird das Script (nicht wie im Beispiel 2), über den am Scriptende angehängten Scriptteil browserabhängig geladen, sondern im Body abgearbeitet. Hierbei muss beachtet werden, dass die function createMarker() bereits notiert sein muss, bevor sie in der for-Schleife aufgerufen wird! Die Ausgabe erfolgt im div-Bereich mit der id="Googlemap". Dieser Bereich wird im Beispiel mit style="..." mit CSS nach Wunsch gestylt.
Im weiteren Verlauf des JavaScriptes sind hier 6 Marker in den Arrays text=[] (für das HTML-Infofenster) und koord=[] (für die jeweiligen Koordinaten) definiert. Es handelt sich um HTML-formatierbare Infofenster, in die auch Links oder verlinkte Bilder eingebaut werden können. Experimentieren Sie ggf. hier etwas entsprechend Ihren Vorstellungen. Achten Sie jedoch unbedingt auf die Einhaltung der Script-Syntax, da sonst ein Datei-Test (Button unten) nicht laufen wird!
Im Anschluss wird das als Marker verwendte Icon mit Schatten, Grösse und Positionierung des Info-Fensters festgelegt. Testweise können Sie hier in der Zeile icon.image = "images/mm_20_red.png"; ein anderes Icon wählen: grn-pushpin.png. Probieren Sie bitte hierzu auch das 4. Beispiel!
Das eigendliche Setzen der Marker erfolgt in der function createMarker(point, text). Diese wird über eine "for-Schleife" in Abhängigkeit der gewünschten Markeranzahl bzw. der definierten Arrays aufgerufen und ausgeführt. Ändern Sie hier testweise die Durchläufe (hier 6) auf z.Bsp. 3, wodurch dann nur noch 3 Marker gesetzt werden.

<div id="Googlemap" style="width:600px; height:400px; border:1px solid red"></div> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var GGmap = new GMap2(document.getElementById("Googlemap")); GGmap.addControl(new GSmallMapControl());//kleine Navigation GGmap.addControl(new GMapTypeControl());//Typ Buttons GGmap.setCenter(new GLatLng(50.780000,12.242600), 13);//Breite, Länge, Zoom GGmap.setMapType(GGmap.getMapTypes()[3]);//Typ der Anzeige - 1,2 oder 3 var text=[]; //Text-Array var koord=[]; //Koordinaden-Array ///////Marker und Infofenster definieren/////////////// text[0]='Hier befindet sich der Sitz der <br>'+ '<a title="Chursdorfer Infos" href="http://chursdorf.ch.funpic.de/" target="_blank">Chursdorfer Info-Seite</a><br>'+ '<a title="zu Fernseh-Zeuner" href="http://fernseh-zeuner.de" target="_blank"><img src="../Freak.gif" alt="" border="0"></a><br>'+ 'Die Zufahrt finden Sie direkt <br>'+ 'an der Brücke der stillgelegten Bahnlinie!'; koord[0]=new GLatLng(50.775902896501144,12.261321544647217); text[1]='Der Nachbarort <a title="Blankenhain" href="http://www.info-blankenhain.de" target="_blank">Blankenhain</a><br>'+ 'im Westsächsischen mit der<br>'+ 'sehenswerten Schlossanlage!'; koord[1]=new GLatLng(50.795695687903645,12.272608280181885); text[2]='Friedmannsdorf, ein<br>Ortsteil von Seelingstädt.'; koord[2]=new GLatLng(50.76159912095864,12.223620414733887); text[3]='Das sanierte Neubauviertel Seelingstädt<br>'+ '"Braunichswalder Weg" mit <a title="Schule Seelingstädt" href="http://www.th.schule.de/grz/rsseelingstaedt/" target="_blank">Schule</a> <br>'+ 'und "Thüringer <a title="BFW Thüringen" href="http://www.bfw-thueringen.de/home2.asp" target="_blank">Berufsförderungswerk</a>"'; koord[3]=new GLatLng(50.790202,12.240744); text[4]='Hier wurde zu DDR-Zeiten im <br>'+ 'Aufbereitungswerk 102 der <a title="Die Wismut Online" href="http://www.wismut.de/" target="_blank">Wismut</a><br>'+ '<a title="Info-Fenster" href="http://chursdorf.ch.funpic.de/modules.php?name=Content&pa=showpage&pid=57" target="_blank">Uranerz</a> gewaschen. Heute ein<br>'+ 'Gewerbegebiet von Seelingstädt.'; koord[4]=new GLatLng(50.78586138656051,12.22529411315918); text[5]='Der Gasthof "Goldene Sonne"<br>an der B175 in Seelingstädt/Ort.'; koord[5]=new GLatLng(50.771940618673796,12.240228652954102); ///////////////////////////////////////////////////////////////////////// // Marker icons definieren var icon = new GIcon(); icon.image = "images/mm_20_red.png"; icon.shadow = "images/mm_20_shadow.png"; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 8);//Window-Position // Marker setzen function createMarker(point, text) { var marker = new GMarker(point, icon);// hier kann ein anderes Icon gewählt werden! GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(text);}); return marker; } for (var i = 0; i < 6; i++) {GGmap.addOverlay(createMarker(koord[i], text[i]));} } //]]> </script>

(Sie müssen ggf. bei erneutem Dateitest Ihren Browser aktualisieren!)

4. Google Maps mit unterschiedlichen Markern gleicher Grösse:
Die Icon-Eigenschaften werden zunächst in der Variablen baseIcon definiert [Hier z.Bsp. die Grösse mit 32x32 px]. Im Anschluss werden die Marker in weiteren Variablen mit einem treffenden Namen mit verwendeten Icon und Icon-Schatten zur weiteren Verwendung gespeichert. Hier können Sie gern einige Änderungen ausprobieren, um Auswirkungen auf die Kartenausgabe nachvollziehen zu können. Achten Sie jedoch unbedingt auf die Beibehaltung der richtigen Syntax!

<div id="Googlemap" style="width:600px; height:400px; border:1px solid red"></div> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var baseIcon = new GIcon(); baseIcon.iconSize=new GSize(32,32); baseIcon.shadowSize=new GSize(56,32); baseIcon.iconAnchor=new GPoint(16,32); baseIcon.infoWindowAnchor=new GPoint(16,0); // 3 Marker mit Schatten definieren var martini = new GIcon(baseIcon, "images/martini.png", null, "images/martini-s.png"); var flug = new GIcon(baseIcon, "images/flug.png", null, "images/flug-s.png"); var humbold = new GIcon(baseIcon, "images/grn-pushpin.png", null, "images/marker-s.png"); // Karte ausgeben mit Typ-Buttons und grosser Navi var map = new GMap2(document.getElementById("Googlemap")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(52.532096,13.348901),11); function createMarker(point,html,icon) { var marker = new GMarker(point,icon); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; } // Marker setzen mit Info-Fenster var point = new GLatLng(52.521809,13.413706); var marker = createMarker(point,'<div style="width:240px">Alexanderplatz <a href="http://www.berlin.de" target="_blank">Berlin</a> <br>(Hauptstadt-Germany)</div>', martini) map.addOverlay(marker); var point = new GLatLng(52.562578,13.277664); var marker = createMarker(point,'Flughafen Tegel<br>...und weiterer Text', flug) map.addOverlay(marker); var point = new GLatLng(52.519825,13.393021); var marker = createMarker(point,'Humbolduniversität<br>(unter den Linden)', humbold) map.addOverlay(marker); } // Fehlermeldung else {alert("Sorry, the Google Maps API is not compatible with this browser");} //]]> </script>

(Sie müssen ggf. bei erneutem Dateitest Ihren Browser aktualisieren!)

5. Google Maps mit unterschiedlichen Markern unterschiedlicher Grösse:
Im Wesentlichen entspricht dieses Beispiel dem Script in Beisp. 4. Es werden lediglich drei unterschiedliche Marker inclusive der verschiedenden Eigenschaften definiert, die über die function createMarker(point,html,icon) gesetzt werden! Eine Besonderheit ist hier bei der Kartenausgabe durch Einfügen der function map.getMapTypes()[2] ersichtlich, die eine Ausgabe als Hybrid-Ansicht festlegt. Weiterhin ist am Scriptende eine Fehlermeldung über ein Alert realisiert, wenn ein nichtkompatibler Browser auf Google Map zugreifen will!

<div id="Googlemap" style="width:700px; height:500px; border:1px solid blue"></div> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { // 1.Marker definieren var icon1 = new GIcon(); icon1.iconSize = new GSize(59, 62); icon1.shadowSize = new GSize(91, 62); icon1.iconAnchor = new GPoint(6, 20); icon1.infoWindowAnchor = new GPoint(5, 8); // 2.Marker definieren var icon2 = new GIcon(); icon2.iconSize = new GSize(32, 32); icon2.shadowSize = new GSize(56,32); icon2.iconAnchor = new GPoint(16,32); icon2.infoWindowAnchor = new GPoint(16, 0); // 3.Marker definieren var icon3 = new GIcon(); icon3.iconSize = new GSize(30, 30); icon3.shadowSize = new GSize(76, 35); icon3.iconAnchor = new GPoint(6, 20); icon3.infoWindowAnchor = new GPoint(5, 8); // Drei Marker mit Schatten definieren var martini = new GIcon(icon2, "images/martini.png", null, "images/martini-s.png"); var adler = new GIcon(icon1, "images/turkey.png", null, "images/turkeyshadow.png"); var humbold = new GIcon(icon3, "images/grn-pushpin.png", null, "images/marker-s.png"); // Karte ausgeben mit Typ-Buttons und kleiner Navi var map = new GMap2(document.getElementById("Googlemap")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(52.519302,13.396797),13); map.setMapType(map.getMapTypes()[2]);//Typ der Anzeige - 1,2 oder 3 function createMarker(point,html,icon) { var marker = new GMarker(point,icon); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; } // Marker setzen mit Info-Fenster var point = new GLatLng(52.521809,13.413706); var marker = createMarker(point,'<div style="width:240px">Alexanderplatz <a href="http://www.berlin.de" target="_blank">Berlin</a> <br>(Hauptstadt-Germany)<br>(Marker: 32x32px)</div>', martini) map.addOverlay(marker); var point = new GLatLng(52.519329,13.375726); var marker = createMarker(point,'Deutscher Bundestag<br>am Platz der Republik 1<br>(Marker: 59x62px)', adler) map.addOverlay(marker); var point = new GLatLng(52.518845,13.392817); var marker = createMarker(point,'Humbolduniversität<br>(unter den Linden)<br>(Marker: 30x30px)', humbold) map.addOverlay(marker); } // Fehlermeldung else {alert("Sorry, the Google Maps API is not compatible with this browser");} //]]> </script>

(Sie müssen ggf. bei erneutem Dateitest Ihren Browser aktualisieren!)

6. Google Map mit Suchfunktion:
Mit dem im Anschluss gezeigetem Script ist es möglich nahezu von allen Orten dieser Erde die Geodaten (Breiten- und Längengrad) in einer Suchfunktion zu ermitteln! Das hierzu erforderliche JavaScript wurde als externe Scriptdatei ausgelagert (Textfeld Links). Das Script verfügt über 2 functionen:
function start(slat,slng,szoom) { map.setCenter(new GLatLng(slat,slng),szoom); } function showAddress(address) { if (geocoder) {geocoder.getLatLng( address, function(point) { if (!point) {alert(address + " leider nicht gefunden!");} else { map.setCenter(point, 13);//Marker und Zoomfaktor setzen var marker = new GMarker(point,icon);//ohne ",icon" mit default-Icon map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); } } function start(slat,slng,szoom) zum Schreiben der Karten-Startansicht. Diese wird auch unten über den Link "Mitteleuropa" angesprungen.
function showAddress(address) zum Ermitteln der Geodaten des im Suchfeld eingegebenen Ortes oder einer Region. Gleichzeitig wird ein Marker mit Info-Fenster gesetzt! Im Fehlerfall wird ein Alert ausgegeben. Kopieren Sie ggf. das Script in Ihren Text-Editor und speichern Sie die Datei als map.js im gleichen Ordner wie Ihre Hauptseite (oder passen Sie ggf. den Pfad entsprechend an)!
Geben Sie Ihre Suchanfragen etwa in folgender Form ein: Pariser Platz Berlin oder Steinbach Manitoba, Canada
Sie werden erstaunt sein, was hier Google Map alles möglich macht! Im weiteren Scriptverlauf wird ein Icon in bekannter Weise definiert, die einzubindenden Typ-Button und die Navigation links festgelegt. Als Besonderheit werden diese, wie auch das Mini-Display (unten rechts) nur bei einem RollOver ausgegeben! Sie können beliebig viele Suchanfragen ausführen. Überflüssige Marker löschen Sie durch Anklicken.Weitere Hinweise sind direkt im Script zu finden!

<form action="#" onsubmit="showAddress(this.address.value); return false"> <input type="text" size="60" name="address" value="Pariser Platz, Berlin / Deutschland" onFocus="this.value='' "> <input type="submit" value="Geodaten suchen"><br> <div id="Googlemap" style="width: 98%; height: 500px"></div> </form> <script src="map.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ // Marker mit Eigenschaften definieren var icon = new GIcon(); icon.image = "images/mm_20_red.png"; icon.shadow = "images/mm_20_shadow.png"; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1); // Startwerte festlegen var slat=51.069017; var slng=10.239258; var szoom=5; var type=3;//1, 2 oder 3 sind möglich if (GBrowserIsCompatible()) { // MapLayout (gmaps api 2.0) var map = new GMap2(document.getElementById("Googlemap"), [G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP]); start(slat,slng,szoom);//externe Script-function //map.setCenter(new GLatLng(slat,slng),szoom); map.setMapType(map.getMapTypes()[type]); map.addControl(new GLargeMapControl(0,1)); //map.addControl(new GMapTypeControl()); map.addControl(new GMapTypeControl(0));//0 oder 1 ist möglich map.addControl(new GScaleControl(300));//Entfernungsmassstab new GKeyboardHandler(map); var mini=new GOverviewMapControl(new GSize(175, 125));//Grösse-Mini map.addControl(mini); // setzt nach angegebener Zeit (hier 1 sek.) das Minidisplay auf den angeg. Typ (hier Kartenansicht) setTimeout("mini.getOverviewMap().setMapType(G_NORMAL_MAP);",1000);//Format-Minifenster map.hideControls(); geocoder = new GClientGeocoder(); // Mouseover Controls zeigen GEvent.addListener(map, "mouseover", function(){ map.showControls(); }); // Mouseout Controls verstecken GEvent.addListener(map, "mouseout", function(){ map.hideControls();}); // Geodaten und Zoomwert in Elemente schreiben function display(){ document.getElementById("coord").value=map.getCenter().toUrlValue(); document.getElementById("zoom").value=map.getZoom(); map.checkResize(); }; GEvent.addListener(map,"move",display); // Marker bei click löschen GEvent.addListener(map, "click", function(marker, point) { if (marker) {map.removeOverlay(marker);} }); } //]]> </script> <span style="background-color:yellow; padding:2px;"><a style="text-decoration:none;" href="javascript:start(slat,slng,szoom);"><b>Mitteleuropa zeigen</b></a></span><br><br> Breite, Länge <input type="text" id="coord" size="20"> ZOOM <input type="text" id="zoom" size="2"><br>

(Sie müssen ggf. bei erneutem Dateitest Ihren Browser aktualisieren!)

alles zu kompliziert ... ??
dann bitte HIER probieren !

Publiziert am: 01.05.2007 (1238 mal gelesen)

[ Zurück ]