Will man jemandem eine visuelle Anfahrtsbeschreibung senden, den Firmensitz auf seiner Homepage mit Hilfe von Google Maps darstellen oder sonstige Informationen mit Kartenmaterial anreichern, bietet Google einige Möglichkeiten, Google Maps-Karten zu teilen, zu versenden oder einzubetten.
Da mir auch nicht unbedingt alle Möglichkeiten bewusst waren, besonders wenn man die Karte noch mit weiteren Informationen wie Markern und Pfaden erweitern möchte, will ich hierfür mal eine kleine Übersicht und Anleitung zur Verfügung stellen.

Disclaimer: Dieser Artikel ist wahrscheinlich schon veraltet, wenn Du ihn liest und die beschriebenen Links bei Google an einer absolut anderen Stelle zu finden, da Google recht oft und gerne das UI seiner Services über den Haufen schmeißt und Elemente, die immer links unten waren dann nach rechts oben in ein Untermenü verschiebt.

Als einfacher Link

Um jemandem mal schnell eine bestimmte Geo-Position per E-Mail, WhatsApp & Co. mitzuteilen, ist die Möglichkeit, aus der gerade angezeigten Karte heraus einen Link zu generieren, die einfachste.

Gesetzte Marker (hat man zum Beispiel nach einem Unternehmen gesucht) oder eine bereits erstellte Navigations-Route werden mitgegeben und später beim Empfänger ebenfalls angezeigt.

Ich will zum Beispiel den Besuchern meiner Party, die den Weg zu mir noch nicht kennen, das Leben einfach machen und einen Link senden, wo sie nur noch ihre eigene Adresse eingeben müssen und Google ihnen sogleich die Route zu mir berechnet.

1. Nach meiner Heim-Adresse suchen oder Rechtsklick in der Karte an die entsprechende Stelle und "Was ist hier?" auswählen.

2. Ggf. noch in die Karte rein- oder rauszoomen und auf Satelliten- oder Kartenansicht umschalten. Die Kartengröße und -ansicht wird später ebenfalls mitgegeben.

3. Auf das Navigations-/Routenplaner-Icon klicken (falls der Empfänger gleich zur Routenplanung gelangen soll)

 
4. Startpunkt-Standort frei lassen und auf das "Hamburger-Menü"-Icon (siehe Bild rechts) klicken
 
5. Nun "Karte teilen oder einbetten" anklicken, angezeigten Link kopieren und weiterversenden.

Der Empfänger landet dann an der Stelle von Punkt 3.

 

Auf Homepage einbetten

Ähnliches Spiel, wenn man die Karte auf einer Homepage einbetten möchte.
Hier nun allerdings beim vorher beschriebenen Punkt 5 auf den Reiter "Karte einbetten" umschalten.

Der angezeigte HTML-Quellcode kann kopiert und in die Website eingebaut werden.

Tipp: Die Karte wird vergrößert/verkleinert, wenn die Maus sich drüber befindet und man scrollt. Dies kann unerwünscht sein, wenn die Karte auf einer Homepage eingebettet ist. Hat sich wahrscheinlich jeder schon einmal darüber geärgert: Man scrollt durch eine Website, auf einmal wird nicht mehr weitergescrollt; stattdessen in so eine blöde Karte reingezoomt, nur weil sich zufällig der Mauszeiger darüber befindet. Hierfür gibt es eine Lösung!

Hinweis:
Ich verwende in folgendem Beispiel jQuery. Die Umsetzung wäre allerdings auch ohne jQuery möglich.

  1. Der von Google kopierte Quelltext 
    <iframe/>
    sollte noch zusätzlich das css-Attribut 
    pointer-events: none;
    erhalten (im folgenden Beispiel über eine css-Klasse)
  2. Außerdem dem 
    <iframe/>
    eine id geben, so dass man ihn via JavaScript ansprechen kann

Codebeispiel:

<style type='text/css'>
.scrolloff {
   pointer-events: none;
   }
</style>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.9973680292746!2d2.292318415949493!3d48.85826057928739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fe1f3bfb4ad%3A0x7bd31375becf28cd!2sEiffelturm%2C+5+Avenue+Anatole+France%2C+75007+Paris%2C+Frankreich!5e0!3m2!1sde!2sde!4v1452247006961"
        width="600" height="450" frameborder="0"
        style="border:0;"
        class="scrolloff"
        id="karte"
        allowfullscreen>
</iframe>

<script type='text/javascript'>
$(document).ready(function() {
    $('#karte').on('click', function() {
        $(this).removeClass('scrolloff');
        });
    $("#karte").mouseleave(function() {
        $(this).addClass('scrolloff');
        });    
    });
</script>

Die Karten-Ansicht vergrößert/verkleinert sich nun generell nicht, wenn man sich mit dem Mauszeiger darüber befindet und scrollt.
Erst, wenn man darauf klickt, kann man hinein/hinaus-zoomen, was allerdings wieder de-aktiviert wird, sobald man mit dem Mauszeiger die Karte verlässt.

Mehr Informationen in Karte einbetten

Manchmal reichen die Information, die Google zur Verfügung stellt, nicht aus.
Vielleicht will man noch ein paar Wegpunkte mit einbringen oder wichtige Punkte markieren.

Ich habe dies bei einer Anfahrtsbeschreibung für eine Hütte, die irgendwo im Wald liegt und zu der Google keine Route kennt, machen müssen.
Generell kann man die Hütte aus zwei unterschiedlichen Richtungen erreichen – diese Wege habe ich markiert und einen Punkt, an dem man laut beigefügter Wegbeschreibung abbiegen muss, markiert.

 
Dreh- und Angelpunkt ist der MyMaps-Service von Google, den jeder registrierte Google-User nutzen kann.
Um dort hin zu gelangen, wählen wir aus dem "Hamburger"-Menü "My Maps" aus.
 
Ziemlich versteckt und unscheinbar findet sich links unten ein Link "Karte erstellen".
 
Es öffnet sich ein neues Fenster, in welchem man zum gewünschten Ort zoomen und Objekte wie Marker, Linien und Routen-Informationen hinzufügen kann.
In der Palette links lassen sich verschiedene Ebenen anlegen, um die Sache etwas übersichtlicher zu machen, und eine Basis-Karte auswählen. Hier kann im Gegensatz zu Google Maps nicht nur zwischen Satelliten- oder Straßenkarten-Ansicht gewählt werden; auch eine Terrain- oder vereinfachte Atlas-Ansichten stehen zur Verfügung.
 
Hat man seine Karte fertig (kann später jederzeit geändert/überarbeitet werden), klickt man auf "Teilen" und wird ggf. nach einem Titel für die Karte gefragt.
 
Die Karte muss "öffentlich im Web" zugänglich sein ("Jeder, der über einen Link verfügt" reicht seltsamerweise nicht aus), damit man sie später auf einer Website einbetten kann.
 
Über das (etwas unscheinbare) Drei-Punkte-Menü "In meine Website einbetten" wählen.
 
Analog zum vorherigen Punkt "Auf Homepage einbetten" den angezeigten Quelltext für die Website verwenden.
 

API verwenden

Absolut flexibel ist man, wenn man Googles JavaScript-API verwendet, um Kartenmaterial in die eigene Website einzubringen.
Weiterer Vorteil: Hiermit lassen sich auch ältere Google-Maps-Versionen wieder zum Leben erwecken (=> Ältere API-Version verwenden).

Mit Googles JavaScript-API könnte man theoretisch Google Maps selbst neu nachbauen. Meistens vergnügt man sich allerdings damit, ein paar Marker auf einer Karte zu setzen.

Hier ein Beispiel, bei welchem die API-Version 3 verwendet wird.
Ich zeige eine Karte vom Bereich der Pyramiden von Gizeh und füge noch einen blauen Marker und eine grüne Pin-Nadel bei der Sphinx hinzu.

<script src="https://maps.googleapis.com/maps/api/js?v=3.20&libraries=places"></script>
<script type="text/javascript">
      var map = null;
      function initialize() {
         var options = {
            zoom: 15,
            zoomControl: true,
            zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE,
                             position:google.maps.ControlPosition.LEFT_TOP },
            center: new google.maps.LatLng(29.979063, 31.134180),
            panControl: false,
            scaleControl: true,
            streetViewControl: false,
            disableDefaultUI: true,
            mapTypeControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId.ROADMAP,google.maps.MapTypeId.SATELLITE,google.maps.MapTypeId.HYBRID,google.maps.MapTypeId.TERRAIN],
                              style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                              position:google.maps.ControlPosition.TOP_LEFT}
            }

         map = new google.maps.Map(document.getElementById('map-canvas'), options);
         set_marker(new google.maps.LatLng(29.979063, 31.134180), 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png');
         set_marker(new google.maps.LatLng(29.975063, 31.138000), 'https://maps.gstatic.com/mapfiles/ms2/micons/grn-pushpin.png');
         }

       function set_marker(point, icon) {
              var marker = new google.maps.Marker({
                     position:point,
                     map:map
                  });
              marker.setIcon(icon);
            }

         google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas" style='width:600px; height:600px;'></div>

Tipp:
Für solch anspruchsvolle Zwecke, wie JavaScript-APIs, um Karten anzuzeigen und mit eigenen Informationen zu erweitern, lohnt sich gegebenenfalls auch ein Blick auf ein alternatives Nicht-Google-Produkt: Leaflet.
Leaflet setzt auf alternative Kartendienste wie OpenStreetMaps (verschiedene Kartendienste können verwendet werden) und hat eine einfacher handzuhabendere API (ich tu' mich mit der Gogle-API immer ziemlich schwer, da sie zwischenzeitlich einiges an der API geändert haben, die aktuelle Dokumentation weder einfach zu finden noch ein Vorzeigeobjekt einer guten Dokumentation ist und man beim Googeln nach Hilfe meist Infos für die falsche API-Version bekommt).