Sunday 20th of May 2012

Home anica goMaps
anica goMaps PDF Drucken E-Mail

Ein einzelner Standort soll mit Google Maps in einer Webseite dargestellt werden. Hiermit lassen sich Standorte (Firmen, Sehenswürdigkeiten, ..) einfach integrieren und einfach verwalten. Diese Funktionalität nutzt die API's von Google Maps.

  • Kartenausschnitt wählbar
  • Strassenkarte, Satellitenbild oder gemischt
  • UserControl
  • verschiedene Zoomfunktionen
  • Ãœbersichtskarte einblendbar
  • Markierungspunkt setzbar mit eigenem Text
  • Link auf GoogleMaps mit den eigenen Daten
Sprache
JavaScript
Platform
offen
Copyright anica
Version 1.0
Seit
 17.02.09
Lizenz Free

Lösung

Lösung

Die API's von Google-Maps um eigene JavaScript-Funktionen erweitern und im eigenen Code darstellen. Die Erweiterung bring eine vereinfachte Verwaltung der Darstellung der Karte, sowie die Möglichkeit einen eigenen Text oberhalb der Karte und einen Markierungspunkt mit eigener Bezeichnung zu setzen. Über die Varialben kann das Aussehen und Verhalten der Darstellung beeinflusst werden.

Für Joomla-Nutzer: In Joomla lässt sich der Code mit dem Modul mod_customcode oder mit dem Plugin includePHP einfach integrieren und die CSS's des Templates werden voll berücksichtigt.

Variablen

Mit diesen Variablen können Sie das Aussehen und Verhalten debr Darstellung von anica goMaps beinflussen.

Variablenerklärung

place

Ortschaft, die in der vergrösserten Darstellung im neuen Fenster von Google-Maps aufgerufen wird.
Optionale Variable

country

Land, das in der vergrösserten Darstellung im neuen Fenster von Google-Maps aufgerufen wird. Das Land muss zur Ortschaft in der Variable place passen.
Optionale Variable

linkText

Oberhalb der Karte kann ein Link auf ein neues Fenster mit grossem Kartenauschnitt gezeigt werden. In dieser Variable wird der Inhalt des Links definiert, dieser kann auch HTML-Code enthalten.
Optionale Variable

mapWidth

Breite der darzustellenden Karte in Pixel

mapHeight

Höhe der darzustellenden Karten in Pixel

centerlat

Längengrad (Latitude), Koordinate im Zentrum der Karte im Format hh.hhhh°

centerlng

Breitengrad (Longitude), Koordinate im Zentrum der Karte im Format hh.hhhh°

zoom

Zoomfaktor von 1 (Weltkarte) bis zu 18 (Detail)
Gültige Werte: 1 bis 18

zoomControl

User sieht eine Zoom-Leiste um den Detailierungsgrad verändern zu können.
Gültige Werte: false, small, large
optionale Variable

zoomByMouseDoubleClick

Beim Doppelklick wird eingezoomt
Gültige Werte: true, false
optionale Variable

zoomByMouseWheel

Veränderung des Zoomfaktor durch Mausrad
Gültige Werte: yes, no
optionale Variable

mapType

Art der Karte kann bestimmt werden
Gültige Werte: normal, satellite, hybrid
optionale Variable

typeControl

User kann Kartenart selber ändern
Gültige Werte: yes, no

overviewControl

Eine kleine Ãœbersichtskarte wird eingeblendet. Der sichtbare Bereich wird darin dargestellt.
Gültige Werte: yes, no
optionale Variable

scaleControl

Eine Massstabslinie wird angezeigt.
optionale Variable

markerName

Bezeichnung des Markierungspunktes
optionale Variable

markerlat

Längengrad (Latitude), Koordinate des Markierungspunktes im Format hh.hhhh°. Sobald markerlat und markerlng ungleich 0 sind, wird ein Icon dargestellt.
optionale Variable

markerlng

Breitengrad (Longitude), Koordinate des Markierungspunktes im Format hh.hhhh°. Sobald markerlat und markerlng ungleich 0 sind, wird ein Icon dargestellt.
optionale Variable

markerIcon

Url-Pfad auf das Bild, das als Markierung angezeigt werden soll. Ist diese Variable leer (markerIcon = "";) wird das Standardicon von GoogleMaps verwendet.
optionale Variable, Default = GoogleMaps-Standard

markerIconWidth

Breite in Pixel, in der das Bild der Markierung dargestellt werden soll. Diese Angabe ist nur wirksam, wenn markerIcon eine URL enthält. Wird die Breite definiert, muss auch die Höhe (markerIconHeight) definiert werden.

markerIconHeight

Höhe in Pixel, in der das Bild der Markierung dargestellt werden soll. Diese Angabe ist nur wirksam, wenn markerIcon eine URL enthält. Wird die Höhe definiert, muss auch die Breite (markerIconWidth) definiert werden.

markerIconAnchorX

Welche Stelle des Bildes soll auf dem Koordinatenpunkt erscheinen. Abstand in der Breite in Pixel von links.

markerIconAnchorY

Welche Stelle des Bildes soll auf dem Koordinatenpunkt erscheinen. Abstand in der Breite in Pixel von oben.

markerShadowIcon

Url-Pfad auf das Schattenbild, das zur Markierung angezeigt werden soll. Wird ein markerIcon definiert, so wird der Standardschatten entfernt. Mit dieser Variable kann der ein passender Schatten definiert werden, wobei das Bild oben links an der gleichen Stelle beginnt. 
optionale Variable

markerShadowIconWidth

Breite in Pixel, in der das Schattenbild der Markierung dargestellt werden soll. Diese Angabe ist nur wirksam, wenn markerShadowIcon eine URL enthält. Wird die Breite definiert, muss auch die Höhe (markerShadowIconHeight) definiert werden.

markerShadowIconHeight

Höhe, in der das Schattenbild der Markierung dargestellt werden soll. Diese Angabe ist nur wirksam, wenn markerIcon eine URL enthält. Wird die Höhe definiert, muss auch die Breite (markerIconWidth) definiert werden.

optionen

Optionen zur Darstellung des Browser-Fensters mit grosser Kartenanzeige. Zeichenkette ohne Leerzeichen
Bsp: width=600,height=400,menubar=no,scrollbars=no,status=no,toolbar=no, location=no,hotkey=no,directories=no,dependent=no

Voraussetzung

 

Voraussetzung

Voraussetzungen
Google Maps KeyPersönlicher Key für die Benutzung der API von Google Maps. Dieser Key ist in wenigen Schritten und kostenlos errichtet.
> Google Maps Key beantragen

 

Voraussetzungen für Joomla-Nutzer
Joomla 1.5.x

Das OpenSource CMS System
> Hier downloaden

mod_customcodeDiese tolle Modul von ?? muss installiert sein. Das Modul lässt sich frei platzieren und setzt eine persönlichen browserffähigen Code um.
> Infos hier
inlucdePHP

Diese tolle Plugin muss installiert sein, wenn die Karte in einem Artikel dargestellt werden soll.
> Infos hier

 

Installation

Installation

Vorgehens-Schritte
Nur für Joomla-Nutzer: mod_customcode mit Joomla-Installer installieren.
Google Maps API-Key beantragen.

Code aus Kapitel Lösung in den <head>-Bereich ihrer HTML-Datei kopieren.
Joomla-Nutzer in das Modul mod_customcode. Modul platzieren und aktivieren.

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAYbgkROIUrg3Mx0LF9QcEphS-Au09YmQcPImxTBbEkxSyb0z5FBTxE-5T0WQBsuVUfZ-0zt-4MW2pQQ" type="text/javascript"></script>

<script type="text/javascript">
<!--
// Variables
var place = "Luzern";
var country = "Schweiz";
var linkText = "Mein Standort";
var mapWidth = 160;
var mapHeight = 140;var centerlat = "47.0000";
var centerlng = "7.0000";
var zoom = 10;
var zoomByMouseDoubleClick = false;
var zoomByMouseWheel = false;
var mapType = "normal";
var typeControl = false;
var zoomControl = false;
var overviewControl = false;
var scaleControl = false;
var markerName = "Dorfstrasse, 48, 6000 Luzern";
var markerlat = "47.0000";
var markerlng = "7.0000";
var markerIcon = "../icons/redpoint.png";
var markerIconWidth = 16;
var markerIconHeight = 16;
var markerIconAnchorX = 8;
var markerIconAnchorY = 8;
var markerShadowIcon = "../icons/redpointShadow.png";
var markerShadowIconWidth = 8;
var markerShadowIconHeight= 8;
var optionen = "width=800,height=600,menubar=no,scrollbars=no,status=no,toolbar=no,
location=no,hotkey=no,directories=no,dependent=no";
//--></script>

blau = Variablen zur Einstellung von anica goMaps, auf eigene Bedürfnisse anpassen
rot = Eigener Google Maps Key einsetzen

Code aus Kapitel Lösung in den <body>-Bereich ihrer HTML-Datei kopieren.
Joomla-Nutzer: Code in das gleiche mod_costumcode unten ergänzen. Modul platzieren und aktivieren.

<script src="http://www.meens.ch/scripts/moduls/anica_goMaps/goMaps.js" mce_src="http://www.meens.ch/scripts/moduls/anica_goMaps/goMaps.js" type="text/javascript"></script>

<noscript>Browser unterstützt Javascript nicht oder ist abgeschalten, daher kein Standort ersichtlich</noscript>

blau = besser wäre es natürlich ein Bild mit dem Standort zu zeigen, wenn durch die Inaktivität von JavaScript Google Maps nicht dargestellt werden kann.

Google Maps API-Key durch eigenen Code im Sourcecode ändern (rot).
Daten (Variablen) an die eigene Wünsche anpassen (blau).
Testen
 

Demo

Demo

Aus Darstellungsgründen wird die Demo in einer eigenen Seite dargestellt.

Bitte hier klicken.

Versionen

Versionsinfo

V 1.0 Erste freigegebene stabile Version
 

Created by www.anica.ch. Powered by Joomla!.