> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dc.ag/llms.txt
> Use this file to discover all available pages before exploring further.

# dynamic content - Google Maps Verknüpfungen erstellen

> Einen Google Maps Karten-Ausschnitt mit Markierung auf Ihrer Seite einbinden.

In folgendem zeigen wir Ihnen, wie Sie eine Google-Maps Verknüpfung für Ihre Seite erstellen. Dies zeigt dann auf Ihrer Seite einen Karten-Ausschnitt mit einem Icon an der gewünschten Stelle bzw. Adresse an.

<Note>
  Diese Anleitung gehört zu den [Inhaltsarten](/docs/de/dynamic-content/user-guide/inhaltsarten). Wie Sie generell einen Inhalt erstellen, zeigen wir Ihnen unter [Inhalte erstellen und bearbeiten](/docs/de/dynamic-content/user-guide/inhalte-erstellen).
</Note>

<Steps>
  <Step>
    ## Schritt 1: Auswählen der Inhaltsart

    Wählen Sie zuerst bei der Erstellung eines Inhalts den Inhaltstyp "Google Maps" aus. Schon sollte sich ein Fenster mit der Überschrift "Neue Google maps Karte" öffnen.

    <Frame>
      <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/google-maps/auswahl-inhaltsart.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=2e0fd08ffe09c4389698b490c9546b4d" alt="Auswählen der Inhaltsart Google Maps" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/google-maps/auswahl-inhaltsart.png" />
    </Frame>
  </Step>

  <Step>
    ## Schritt 2: Beschreibung wählen und Speichern

    Legen Sie anfangs eine Beschreibung der Karte fest. Diese dient nur der Übersichtlichkeit und wird nicht auf der ausgewählten Seite angezeigt.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/google-maps/beschreibung.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=48261822c05584c5891d36188f36baeb" alt="Beschreibung der Google Maps Karte festlegen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/google-maps/beschreibung.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/google-maps/speichern.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=9573916b78f13b972ac69fc53cc87dbf" alt="Beschreibung speichern" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/google-maps/speichern.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 3: Kartengröße festlegen

    Stellen Sie als nächstes auf der rechten Seite ein, wie groß Ihre Karte auf der Seite angezeigt werden soll. Wählen Sie dazu sowohl die Karten-Breite und -Höhe in Pixeln fest.

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/google-maps/karten-breite.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=e75fffc6b729930087f3501d7d3c7df4" alt="Karten-Breite einstellen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/google-maps/karten-breite.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/google-maps/karten-hoehe.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=bebef2277c0dbe35568227b0747c1a04" alt="Karten-Höhe einstellen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/google-maps/karten-hoehe.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 4: API-Key und Icon Pfad eingeben

    Als nächstes geben Sie Ihren Google API-Key in das Feld "apiKey" ein. Diesen API-Key müssten Sie selbst bei Google Maps erstellen bzw. anfordern.

    <Info>
      Optional können Sie über den absoluten Icon-Pfad das angezeigte Marker-Icon anpassen. Wird kein Pfad hinterlegt, wird der Standard-Marker von Google Maps verwendet.
    </Info>

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/google-maps/api-key.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=de4a4881f68bc0db6517c756f48d0665" alt="Google API-Key eingeben" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/google-maps/api-key.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/google-maps/icon-pfad.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=2a95d16d4514de0b365bba085858a76a" alt="Absoluter Icon-Pfad" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/google-maps/icon-pfad.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>

  <Step>
    ## Schritt 5: Orte hinzufügen

    Da Sie nun die Einstellungen für die Karte an sich getroffen haben, können Sie nun damit beginnen, den angezeigten Ort zu pflegen. Geben Sie dort im Feld "Titel" den Namen des Ortes an. Darunter geben Sie im Feld "Adresse" die frei formatierte Adresse an.

    <Columns cols={3}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/google-maps/neuer-ort.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=5400ababcda40e1426bd446cec5572da" alt="Neuen Ort hinzufügen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/google-maps/neuer-ort.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/google-maps/titel.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=0a1cca1e4233ba51c03f1e9f01c5a611" alt="Titel des Ortes eingeben" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/google-maps/titel.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/NHJ2s69sWhUfX2Ig/images/dynamic-content/inhaltsarten/google-maps/adresse.png?fit=max&auto=format&n=NHJ2s69sWhUfX2Ig&q=85&s=b296cd3490bb1707e0438d29df15dc99" alt="Adresse des Ortes eingeben" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/google-maps/adresse.png" />
        </Frame>
      </Column>
    </Columns>

    <Columns cols={2}>
      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/google-maps/info-box.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=3209c8be3866ac0a8b66fb063f4328cc" alt="Inhalt der Info-Box pflegen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/google-maps/info-box.png" />
        </Frame>
      </Column>

      <Column>
        <Frame>
          <img src="https://mintcdn.com/dcag/DlKD43HGX8h1zbMf/images/dynamic-content/inhaltsarten/google-maps/speichern-und-schliessen.png?fit=max&auto=format&n=DlKD43HGX8h1zbMf&q=85&s=d8c6df1c67342c437419a750fc7c7a0f" alt="Ort speichern und schließen" width="1080" height="643" data-path="images/dynamic-content/inhaltsarten/google-maps/speichern-und-schliessen.png" />
        </Frame>
      </Column>
    </Columns>
  </Step>
</Steps>

## Verwandte Themen

<CardGroup cols={2}>
  <Card title="Inhaltsarten" icon="shapes" href="/docs/de/dynamic-content/user-guide/inhaltsarten">
    Übersicht aller verfügbaren Module.
  </Card>

  <Card title="Inhalte erstellen und bearbeiten" icon="pen-to-square" href="/docs/de/dynamic-content/user-guide/inhalte-erstellen">
    Inhalte auf Seiten anlegen.
  </Card>

  <Card title="Externe Inhalte" icon="square-arrow-up-right" href="/docs/de/dynamic-content/user-guide/inhaltsarten/externe-inhalte">
    Inhalte aus externen Quellen einbinden.
  </Card>

  <Card title="Kontaktformulare" icon="envelope" href="/docs/de/dynamic-content/user-guide/inhaltsarten/kontaktformulare">
    Formulare für Kontaktanfragen anlegen.
  </Card>
</CardGroup>