expertinnen-web.de

Das Expertinnen-Web

Google Map in die eigene Seite integrieren

| 10 Kommentare

Wie wäre es, den Kundenstamm oder auch das eigene Netzwerk zu visualisieren? Dafür eignet sich z.B. die freigegebene Google Maps API, mit der sich recht einfach Standorte, z.B. von Kunden und Kundinnen sowie Zusatzdaten in Infofenstern darstellen lassen.

Einen Google Maps API Key sowie eine kurze Dokumentation gibt es hier, ohne den funktioniert es leider nicht. Die Geodaten in Form von Latitude (kurz lat) und Longitude (kurz lon) bekommt man z.B. entweder bei World of Maps für einzelne Städte (die Daten von dort sind ohne N und E zu übernehmen) oder bis auf die Strasse heruntergebrochen bei Multimaps.

Mit diesen Daten ausgerüstet lässt sich schon eine erste eigene Map erstellen und natürlich auch in das eigene HTML-Template einfügen.
Dazu wird zunächst folgender Code in den Head der Seite eingefügt:

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=1&amp;key=hier-den-API-Key-einfügen"></script>

Der folgende Code kommt in den Body der Seite und wird mit den ermittelten Geodaten und Zusatzinfos vervollständigt (siehe Anmerkungen):

<h1>Titel der Map</h1>

// width und height je nach verfügbarem Platz angeben
<div id="map" style="width:600px; height:600px;"></div>

<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {

function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

// statt lon und lat hier die Zahlen eintragen, die den Mittelpunkt der Map bilden sollen
// die Auflösung als Ganzzahl angeben, für Deutschland darf sie nicht niedriger als 11 sein
map.centerAndZoom(new GPoint(lon, lat), Auflösung);

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);

// im folgenden werden die Standorte eingetragen, es können beliebig viele sein

// statt lon und lat hier z.B. die Geodaten des ersten Kunden eintragen
var point = new GPoint(lon, lat);
var marker = createMarker(point,'Zusatztext, z.B. Infos zum Kunden, HTML-Code ist erlaubt')
map.addOverlay(marker);

// statt lon und lat hier z.B. die Geodaten eines weiteren Kunden eintragen
var point = new GPoint(lon, lat);
var marker = createMarker(point,'Zusatztext, Infos zum Kunden')
map.addOverlay(marker);

}
//]]>
</script>

Damit ist die erste einfache Map bereits fertig, kann hochgeladen und aufgerufen werden. Die Zusatztexte erscheinen beim Klick der sog. Marker.
Noch ein paar Tipps: Achten Sie darauf, die Geodaten in der richtigen Reihenfolge einzutragen, sonst landen Sie wie ich erstmal im Jemen. emoticon Die Geocoder geben die Daten meistens in der Reihenfolge lat – lon aus, Google möchte diese jedoch genau andersrum verarbeiten.
Packen Sie den Javascript-Code im Body nicht in eine Tabelle oder in ein div, der Internet Explorer kann dies sonst nicht darstellen.

Weitere Tipps und Gestaltungsmöglichkeiten sowie Funktionen finden Sie hier.
Wer sich mit dem Code jedoch gar nicht auseinandersetzen will, findet im Netz eine ganze Reihe nützlicher, oder auch eher spielerischer Tools auf Google Maps Basis, die meist nach einer kostenfreien Registrierung nutzbar sind:

  • Wayfaring (Google Maps erstellen und mit anderen teilen)
  • Google Maps EZ (eigene Google Maps ohne Javascript-Kenntnisse erstellen)
  • Frappr! (Friends + Mapping = Frappr)
  • Mapstats (Life-Report von Besuchern)
  • Mapissimo (Life-Report von Besuchern und Life-Interaktion)
  • YourGMap (Google Maps erstellen und mit anderen teilen)
  • Mapbuilder (Google oder Yahoo Maps erstellen)

10 Kommentare

  1. Hat jemand ein Script, dass die Kunden aus einer Datenbank (Excel) in die Seite eingetragen ?

  2. Wenn Ihr die Funktion wiefolgt ergänzt klappt es:

    function createMarker(point,html) {

    var blueIcon = new GIcon(G_DEFAULT_ICON);
    blueIcon.image = “picture/landart-marker.png”;
    blueIcon.iconSize = new GSize(32, 32);
    markerOptions = { icon:blueIcon };

    var marker = new GMarker(point, markerOptions);
    GEvent.addListener(marker, “click”, function() {
    marker.openInfoWindowHtml(html);

    });

  3. Wie kann ich für die Marker eine Blätterfunktion erstellen.
    Damit nicht so viele Marker angezeigt werden.

    Mfg Matthias

  4. Hallo,

    ich finde diese Beschreibung wirklich nicht schlecht, da ich bisher kaum deutsche Anweisungen im Web gefunden habe. Aber Finde ich ist:

    var icon = new GIcon();
    icon.image = “http://www.google.com/mapfiles/marker.png’;
    icon.shadow = “http://www.google.com/mapfiles/shadow50.png’;
    icon.iconSize = new GSize(13, 59);
    icon.shadowSize = new GSize(37, 34);

    Total unnötig, da das Bild wenn man ein anderes einsetzt, nicht angezeigt wird. da fehlt noch die variable in:

    var point = new GPoint(lon, lat);
    var marker = createMarker(point,’Zusatztext, z.B. Infos zum Kunden, HTML-Code ist erlaubt’)
    map.addOverlay(marker);

    leider hab ich das problem selbst, dass es bei mir nicht mit den eigenen Icons nicht funktioniert. also kann ich nicht sagen wohin die variable gehört. Kann mir vllt jemand helfen?

  5. hallo expertinnen,

    ich möchte geren auf meiner seite eine google maps weltkart mit verschidenen besuchten ländern und orten darstellen. die weltkarte soll aber der ausgangspunkt/die übersicht sein. gibt es fda irgendwo ein beispiel für oder einen tipp???

    ich müsste doch Hier:
    >>>
    var icon = new GIcon();
    icon.image = “http://www.google.com/mapfiles/marker.png”;
    icon.shadow = “http://www.google.com/mapfiles/shadow50.png”;
    icon.iconSize = new GSize(13, 59);
    icon.shadowSize = new GSize(37, 34);

  6. Bernd Röthlingshöfer hat die Eintragung von Unternehmen in Google Maps vor kurzem beschrieben:
    Wie Sie Ihr Unternehmen in die Google Maps eintragen

  7. Laut der GoogleMap Doku wird das Verzeichnis völlig automatisch generiert,
    weshalb man sich einfach gedulden muss. ;)

  8. Hallo Herr Krauß,

    so Sie auf Ihre frage eine antwort erhalten haben,
    wäre ich Ihnen dankbar auch mir diese info, link, etc.
    zukommen zu lassen oder besser noch die antwort hier einzustellen.
    dann hat jeder etwas davon!

    vielen dank im voraus
    S. Fox

  9. Hallo !

    Ich habe in maps.google.de Eintragungen von Hotels gesehen.
    Wie kann ich meine eigene Firma in dieses Verzeichnis eintragen lassen ?

    Mit freundlichen Grüßen

    Stephan Krauß

  10. Hallo !

    Ich suche eine deutsche Beschreibung der Goggle – Maps Schnittstelle Version 2 und ein deutschsprachiges Forum zu dieser Thematik. Hat jemand eine Information ?

    M.f.G.

    Stephan

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.

*