{"id":576,"date":"2016-11-18T15:46:30","date_gmt":"2016-11-18T14:46:30","guid":{"rendered":"http:\/\/www.designbrandes.de\/brandesblog\/?p=576"},"modified":"2019-03-22T13:11:53","modified_gmt":"2019-03-22T12:11:53","slug":"google-kartenausschnitt-einbetten","status":"publish","type":"post","link":"https:\/\/www.designbrandes.de\/brandesblog\/google-kartenausschnitt-einbetten\/","title":{"rendered":"Google Maps Karten"},"content":{"rendered":"<p><strong>Nur Privatleute d\u00fcrfen einen kostenlosen Kartenausschnitt von Google in ihre Website einbetten. <\/strong>Wenn Sie die Google-Karte \u00f6ffnen, wird im Men\u00fc die Option &#8222;Karte teilen oder einbetten&#8220; angeboten. Das ist es auch schon. Sie w\u00e4hlen &#8222;einbetten&#8220; und bekommen den Code f\u00fcr Ihre Website quasi in die Hand oder Zwischenablage gelegt. &#8222;Einbetten&#8220; bedeutet, ein Bereichsfeld Ihrer Website ist f\u00fcr den Kartenausschnitt reserviert, aber den Inhalt liefert Google. Um die Rechte m\u00fcssen Sie sich als Privatperson keine Gedanken machen, denn alles ist frei und kostenlos.<\/p>\n<h2>Die API Einbettung f\u00fcr unternehmerische Websites<\/h2>\n<p><strong>Alle professionell betriebenen Websites<\/strong> z.B. von Firmen, B\u00fcros, Agenturen, Freiberuflern, Autoren, Kanzleien oder Praxen m\u00fcssen einen sogenannten API-Schl\u00fcssel von Google benutzen, um eine Karte auf der eigenen Website einbetten zu d\u00fcrfen. Die Nutzung bleibt erstmal kostenfrei, nur der Weg dahin ist sehr viel umst\u00e4ndlicher. Der Sinn: Google erhebt dann Geb\u00fchren, wenn gro\u00dfe Unternehmen den Kartendienst in umfangreichem Ma\u00df z.B. f\u00fcr Apps nutzen wollen. <a href=\"https:\/\/developers.google.com\/maps\/pricing-and-plans\/?hl=de\" target=\"_blank\" rel=\"noopener\"> Googles r\u00e4tselhafte Preise und Nutzungsmodelle ansehen<\/a><\/p>\n<p>Als Webdesignerin muss ich darauf bestehen, den umst\u00e4ndlichen Weg zu gehen, denn im Falle einer rechtlichen Beanstandung sind wir Designer f\u00fcr den Inhalt verantwortlich, auch wenn Kunden die einfache Einbettung ausdr\u00fccklich beauftragt haben. Wir Designer sind in der Pflicht, die korrekte Nutzung von fremden Material einzuhalten und unsere Auftraggeber ebenfalls dazu anzuhalten. Das ist etwas heikel, wenn die Nutzungsbedingungen anderer Anbieter in schwer verst\u00e4ndlichem &#8222;Juristisch&#8220; geschrieben oder wie bei Google nicht eindeutig beantwortet sind. Eine <strong>Google Maps API Einbettung<\/strong> ist auf jeden Fall der sichere Weg.<\/p>\n<h2>Der verflixte API Schl\u00fcssel<\/h2>\n<p>Wie schon geschrieben: <a href=\"https:\/\/cloud.google.com\/maps-platform\/\" target=\"_blank\" rel=\"noopener\">Google Maps API<\/a> bleibt erstmal kostenfrei, aber der Weg ist m\u00fchevoller. Erschwerend kommt seit 2018 hinzu, dass man auf jeden Fall Kreditkartendaten hinterlegen muss, um den Dienst zu nutzen, auch wenn die Websitebesuche keine geb\u00fchrenpflichtige H\u00f6he erreichen.<\/p>\n<p>Man braucht ein Google-Konto, loggt sich ein und f\u00fcgt die betreffende Domain der Projekteliste hinzu, damit man \u00fcberhaupt damit arbeiten kann. Nach einigem Berechtigungs-Hinundher\u00a0 kann man einen individuellen API-Schl\u00fcssel erzeugen, das ist eine lange Ziffern- und Buchstabenkette. F\u00fcr jede Website wird ein eigener Schl\u00fcssel erzeugt. Diese Zeichenkette wird im HTML-Code der Website an der Stelle eingesetzt, wo die eingebettete Karte liegen soll. Nun muss er nochmal aktiviert werden (wieder ein Besuch im Google-Dschungel) und im Browser getestet werden. Meistens klappt das nicht und man wei\u00df nicht, woran es liegt. Nach l\u00e4ngerer Ursachensuche klappt es dann doch und man wei\u00df immer noch nicht, warum. Die Karte ist nun online. Google hat da sicher noch Verbesserungsbedarf.<\/p>\n<p>&nbsp;<\/p>\n<h2>Einfachere L\u00f6sungen<\/h2>\n<p>Man verzichtet am besten auf eine Einbettung der Karte in der eigenen Website und setzt stattdessen einen externen Link zu Google in einem neuen Browserfenster. Das ist auch datenschutzrechtlich immer einwandfrei. Zum Gl\u00fcck gibt es noch andere Kartendienste, die aber auch alle ihre Vor- und Nachteile haben. <a href=\"https:\/\/www.openstreetmap.de\/karte.html\" target=\"_blank\" rel=\"noopener\">Ein kostenfreier und datenschutzkonformer Kartendienst ist zum Beispiel Open Street Map<\/a><\/p>\n<h5 style=\"padding-left: 60px;\">Tipp f\u00fcr Auftraggeber:<br \/>\nBitte achten Sie sehr genau darauf, die Erlaubnis zur Verwendung von fremden Material auf Ihrer Website einzuholen, denn sollte mal eine Abmahnung wegen unberechtigter Nutzung kommen, wird das schmerzhaft teuer.<\/h5>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-25 alignleft\" src=\"https:\/\/www.designbrandes.de\/brandesblog\/wp-content\/uploads\/2016\/04\/logo.png\" alt=\"\" width=\"55\" height=\"56\" \/>Eine Kundeninformation von Marion Brandes<br \/>\nWebdesign. Grafikdesign. Illustration<br \/>\n<a href=\"https:\/\/www.marion-brandes.de\" target=\"_blank\" rel=\"noopener\">www.marion-brandes.de<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nur Privatleute d\u00fcrfen einen kostenlosen Kartenausschnitt von Google in ihre Website einbetten. Wenn Sie die Google-Karte \u00f6ffnen, wird im Men\u00fc die Option &#8222;Karte teilen oder einbetten&#8220; angeboten. Das&#8230;<\/p>\n","protected":false},"author":2,"featured_media":963,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/posts\/576"}],"collection":[{"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/comments?post=576"}],"version-history":[{"count":5,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/posts\/576\/revisions"}],"predecessor-version":[{"id":1238,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/posts\/576\/revisions\/1238"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/media\/963"}],"wp:attachment":[{"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/media?parent=576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/categories?post=576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/tags?post=576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}